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

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

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

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

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

関数リファレンス/wp localize script - WordPress Codex 日本語版

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);