PHPのurl取得関数や定数をJavaScriptで使いたいと思ったことはありませんか?
WordPressでは翻訳機能があり、PHPとJavaScriptで変数の受け渡しができるんですが、それを流用すればできます。
とてもかんたんです。スクリプトのキュー登録をちょっとイジります。
いきなりですがサンプルコードです。
キュー登録
add_action('wp_enqueue_scripts', function() {
wp_register_script('custom-scripts', get_theme_file_uri( 'js/custom_script.js' ), [ 'jquery' ] );
wp_localize_script('custom-scripts', 'localize', ['ajax_url' => admin_url('admin-ajax.php')]);
wp_enqueue_script('custom-scripts');
} );
wp_localize_script()ってなんだ?と思うかもしれません。
これが、JavaScriptに変数を渡すものです。
'custom-scripts' | jsファイルのハンドル名 |
'localize' | オブジェクト変数名 |
[] | オブジェクト変数の連想配列。 変数名 => 値 |
ハンドル名は変数を使うjsファイルのキュー登録のハンドル名と同じにします。
オブジェクト変数名は任意です。好きな変数名をつけてください。
オブジェクト変数の連想配列にjsファイルで使いたい変数を指定します。配列なので複数指定できます。
wp_localize_script()は、WordPressの翻訳ファイルの機能をJavaScriptでも使うために用意されました。
だから関数名が『ローカライズ』(翻訳)なんですね?
ただWordPress5.0から、JavaScriptのローカライズ機能が追加されたので、ローカライズとしての使い方はなくなっています。
JavaScriptの変数オブジェクトに追加できました。これでjsファイルで参照します。
custom_script.js
console.log(localize.ajax_url);
今回はサンプルなのでコンソールに出力しました。