WordPressでPHPからJavaScriptにデータを渡す

2023.09.30

WordPressでPHPからJavaScriptにデータを渡したい場合は、wp_localize_script関数を使います。

使用例

functions.phpで、wp_enqueue_scriptsアクションにフックします。
コールバック関数内でスクリプトファイルを読み込んだ後に、wp_localize_script関数を実行します。

function my_enqueue_scripts() {
  $handle = 'my-script';
  wp_enqueue_script(
    $handle,
    get_template_directory_uri() . '/js/my-script.js',
    null,
    '1.0.0',
    true
  );
  $fruits = array('apple', 'banana', 'orange');
  wp_localize_script($handle, 'fruits', $fruits);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

wp_localize_script関数の第2引数はそのままJavaScriptの変数名になるので、JavaScriptのルールに従って指定する必要があります。
例えば、以下の例だとエラーになってしまいます。

  • fruit-list（ハイフンを使っている）
  • 3fruits（数字から始まっている）

第3引数は、渡したいデータを配列で指定します。

スクリプトファイルでconsole.log()を実行すると、データが受け取れていることが確認できます。

console.log(fruits);  // (3) ['apple', 'banana', 'orange']

連想配列も指定できます。

function my_enqueue_scripts() {
  $handle = 'my-script';
  wp_enqueue_script(
    $handle,
    get_template_directory_uri() . '/js/my-script.js',
    null,
    '1.0.0',
    true
  );
  $person = array(
    'name'	=> 'Taro Yamada',
    'age'	=> 30,
    'hobby'	=> 'sports',
  );
  wp_localize_script($handle, 'person', $person);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

この場合はオブジェクト型でデータが渡されます。

console.log(person);  // {name: 'Taro Yamada', age: '30', hobby: 'sports'}

【参考】どのようにデータを渡しているのか

Webページのソースを確認すると、スクリプトファイルが読み込まれる直前に、WordPressがインラインスクリプトを出力していることが分かります。

<script type='text/javascript' id='my-script-js-extra'>
/* <![CDATA[ */
var fruits = ["apple","banana","orange"];
/* ]]> */
</script>
<script type='text/javascript' src='https://{domain}/wp-content/themes/{theme-name}/js/my-script.js?ver=1.0.0' id='my-script-js'></script>

PHPから渡したデータがJavaScriptの変数として宣言＆初期化されているので、直後のスクリプトファイル内で使うことができます。

コメント