WordPressでPHP変数をJavaScriptに渡す方法

WordPressのテーマやプラグインを作成しているときに、PHPのデータ/値を使用する必要のあるJavaScriptコードがある場合があります。たとえば、JavaScriptコードには次の値が必要です。

Homepage URL
Theme option values
WordPress posts data
etc

これを行う最も簡単な方法は、header.phpテーマファイルまたはwp_headフックでこれらの値をJavaScriptオブジェクトに初期化することです。例えば ​​：

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

それは機能しますが、WordPressにはそのようなことをするための機能が提供されています。これはwp_add_inline_scriptと呼ばれます。

wp_add_inline_script( $handle, $data, $position = 'after' )

$ handle：インラインスクリプトを追加するスクリプトの名前。

$ data：追加するJavaScriptを含む文字列。

$ position：ハンドルの前または後にインラインスクリプトを追加するかどうか。

この関数は、JavaScriptコードの前後にインラインスクリプトを追加します。実際には、PHP変数をJavaScriptに渡す以外にも多くのことができます。ここで別のユースケースを見ることができます。

したがって、PHPからJavaScriptに変数を渡すためにwp_add_inline_scriptを使用するには、JSファイルの前にインラインスクリプトを追加するように、positionプロパティをbeforeに設定する必要があります。次に、JavaScriptオブジェクトを初期化し、PHPからのデータで値を設定します。

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

JavaScriptでは、次のようにアクセスできます。

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );