WordPressでPHPの値をJavaScriptファイルへ渡す方法

WordPressでPHPの値をJavaScriptファイルへ渡す方法

  • 2018-11-22  最終更新日:2018-11-22

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。

PHPの値をJavaScriptで処理を行う場合などに有効ですね。最近はJavaScript処理多くなったのでこのようなパターンもあるかと思います。

単純にPHPの値をJavaScriptに渡すだけなのですがワードプレスの場合だと関数を使わないとうまく処理できない場合がありますので一応区別しておきます。


スポンサーリンク


wp_localize_scriptの使い方

ワードプレス

wp_localize_script($handle, $name, $data)

  • パラメータ内容
  • $handle:(文字列)(必須)登録済みのスクリプトハンドル名。初期値: なし
  • $name:(文字列)(必須)データを格納する変数の名前。(任意のもの)初期値: なし
  • $data(配列)(必須)データ変数。初期値: なし

使い方の例を見ていきましょう。ワードプレスのfunctions.phpに以下を記載します。

<?php
function sample_scripts(){
    // sample-pageというページの場合のみ
    if(is_page(['sample-page'])){
        // phpの値を受け取るjavascriptを読み込みます。
        wp_enqueue_script('some_handle', 'path/to/myscript.js', array( 'jquery' ), false, true);
        // phpの配列を$data_array変数に格納します
        $data_array = array('some_string' => 'texttext', 'a_value' => '10');
        // javascript変数で処理します。
        wp_localize_script('some_handle', 'object_name', $data_array);
    }
}
add_action( 'wp_enqueue_scripts', 'sample_scripts' );

上記のsome_handleのスクリプトに$data_arrayの配列をobject_nameというjavaScriptの変数にて扱いますということになります。

以下は上記が実行されたら以下のように表示されます。

特定のページだけに使うことが多いと思いますのでif文で条件分岐をしております。全部のページに出てもよろしくないので。

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"texttext","a_value":"10"};
/* ]]> */
</script>
<script type='text/javascript' src='path/to/myscript.js'></script>

myscript.jsのファイルでobject_nameというJavaScript変数が使えるようになります。上記に例でいえばobject_name.some_stringにtexttextという値があってobject_name.a_valueに10という値が入っていることになります。

PHPからJavaScriptへ値を渡す場合

特定のPHPファイルの一番上に記載します。

//JSON形式に変換する関数を定義
function json_safe_encode($data){
    return json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
}
$data_array = array('some_string' => 'texttext', 'a_value' => '10');

head要素内か閉じbodyタグ上の方でJavaScriptに値を渡すファイル名でidとdata-paramというカスタムデータ属性をつけてそこから値を取り出す方法です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id='setparam' data-param='<?php echo json_safe_encode($data_array);?>' src='path/to/myscript.js'></script>
// myscript.js内に記載
var set = $('#setparam');
var data = JSON.parse(set.attr('data-param'));
console.log(data);

因みに上記の方法でワードプレスではうまくいきませんでした。関数で渡した方がセキュアということでしょうか。

参考になれば幸いです。


∞Tadashi Suyama∞

wordpress wp javascript php wp_localize_script
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
プラグイン自動更新ができるプラグインEasy Updates Manager

さて今回はワードプレスのプラグインの自動化ができるプラグインのご紹介です。自動で常に最新の状態に保つことが出来るのでとても便利です。 しかし、いろいろサーバーに入れたのですがどうもサーバーによ...

16 Dec 2018

アイキャッチ
ブラウザ上でデザインができるツールのCanva(キャンバ)のご紹介

簡単にプロ並みのデザインという感じで作成できてしまうデザインツールのご紹介です。 デザインのスキルはなくてもテンプレートから選ぶだけで、必要な素材をドラッグアンドドロップで簡単に出来てしまうツー...

11 Dec 2018

アイキャッチ
WordPress内でFTP操作ができるプラグインFile Managerのご紹介

今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレ...

26 Nov 2018

アイキャッチ
WordPressでPHPの値をJavaScriptファイルへ渡す方法

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。 PHPの値をJavaScriptで処理を行う...

22 Nov 2018

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ