wp_enqueue_scriptsで読み込んでいるJavaScriptファイルにPHPの変数・配列の値を渡す方法

wp_enqueue_scriptsで読み込んでいるJavaScriptファイルにPHPの変数・配列の値を渡す方法

wp_enqueue_scriptsで読み込んでいるJavaScriptファイルにPHPの変数・配列の値を渡す方法

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関数を使うケースは少ないかもしれませんが、覚えておくといざという時に役立つと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です