WordPressで、外部JavaScriptファイルにPHPの変数・配列の値を渡して、JavaScriptファイル内で使えるようにする方法をご紹介いたします。
wp_enqueue_scriptsで読み込んでいるJavaScriptファイル内で、functions.phpで定義した変数・配列の値が扱えるようになるので便利です。
wp_enqueue_scriptsで読み込んでいるJavaScriptファイルにPHPの変数・配列の値を渡す方法
外部JavaScriptファイルにPHPの変数や配列の値を渡すには、wp_localize_script関数を使用します。
<?php wp_localize_script( $handle, $name, $data ); ?>
wp_localize_script関数では、「$handle」「$name」「$data」の3つの引数を指定します。
| $handle | JavaScriptファイルのハンドル名(wp_enqueue_scriptで最初に指定する名前) |
| $name | JavaScript側で値が格納される変数名 |
| $data | PHPで定義した値が格納されている変数名 |
ごくごく簡単な例ですが、トップページのURLをhome_url関数で取得しJavaScriptに渡したい場合は、functions.phpで以下のように記述します。
function load_scripts() {
wp_enqueue_script( 'sample-js', get_theme_file_uri('/js/sample.js'), array(), '1.0', true );
$home = home_url('/');
wp_localize_script( 'sample-js', 'homeurl', $home );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
wp_enqueue_scriptでsample.jsを読み込み、$homeの値をsample.jsに渡しています。sample.js側では、「homeurl」にトップページのURLが格納された状態になります。
このように、wp_localize_script関数を使うことで、PHPで定義した変数を外部JavaScript内で扱えるようにできます。
あとがき
上述した例では単純にURLを渡しただけですが、配列も扱うことができるので色んなケースに応用できそうですね。
wp_localize_script関数を使うケースは少ないかもしれませんが、覚えておくといざという時に役立つと思います。