WordPressでJavaScriptを扱う際、PHPの値をそのまま渡したい場面は多くあります。AjaxのURLやセキュリティ用のnonce、テーマやプラグインの設定値などをフロント側に渡す方法として便利なのがwp_localize_scriptです。ここではその基本的な使い方と実用例を解説します。
wp_localize_scriptとは
wp_localize_scriptは、PHPからJavaScriptにデータを渡すためのWordPress関数です。本来は翻訳用に作られた関数ですが、連想配列をJavaScriptオブジェクトとして出力できるため、スクリプトとサーバー側の値を橋渡しする用途に広く利用されています。
基本的な書き方
まずはテーマやプラグインのfunctions.phpでスクリプトを登録し、その後にwp_localize_scriptでデータを渡します。
<?php
function my_enqueue_scripts() {
// JSファイルを読み込み
wp_enqueue_script(
'my-script',
get_template_directory_uri() . '/assets/js/my-script.js',
['jquery'],
'1.0.0',
true
);
// PHPの値を渡す
wp_localize_script('my-script', 'MyData', [
'ajaxUrl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('my_nonce'),
'message' => 'こんにちは、JavaScript！'
]);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
上記のコードにより、JavaScript側では以下のようにアクセスできます。
console.log(MyData.ajaxUrl); // Ajax送信先URL
console.log(MyData.nonce); // セキュリティ用nonce
console.log(MyData.message); // 任意の文字列
Ajaxでの利用例
フロントエンドからAjax通信を行う際に、admin-ajax.phpのURLやnonceを渡すのが定番の使い方です。
// my-script.js
jQuery(function($) {
$('#send').on('click', function() {
$.post(MyData.ajaxUrl, {
action: 'my_action',
_ajax_nonce: MyData.nonce,
value: 'テスト送信'
}, function(response) {
alert(response);
});
});
});
サーバー側ではAjaxフックを登録して処理を記述します。
<?php
function my_ajax_handler() {
check_ajax_referer('my_nonce');
$value = sanitize_text_field($_POST['value']);
wp_send_json_success("受け取った値: " . $value);
}
add_action('wp_ajax_my_action', 'my_ajax_handler');
add_action('wp_ajax_nopriv_my_action', 'my_ajax_handler');
複数のデータをまとめて渡す
連想配列にまとめて定義すれば、複数の値を一度に渡すことができます。URLやテキスト、設定値などを整理して渡すのがおすすめです。
wp_localize_script('my-script', 'MyData', [
'endpoints' => [
'ajax' => admin_url('admin-ajax.php'),
'rest' => esc_url(rest_url())
],
'user' => [
'id' => get_current_user_id(),
'name' => wp_get_current_user()->display_name
],
'settings' => [
'themeColor' => '#02a1cd'
]
]);
注意点
– wp_enqueue_scriptで登録したスクリプトの**ハンドル名**を正しく指定する必要があります
– wp_localize_scriptは必ずwp_enqueue_scriptの**後**に呼び出してください
– 出力されるのはグローバル変数になるため、名前の衝突を避けるためにユニークなオブジェクト名を付けるのが望ましい
まとめ
wp_localize_scriptを使えば、PHPからJavaScriptへ値を安全かつ簡単に渡せます。特にAjax処理やテーマ設定のフロント反映などで役立つため、WordPressでのフロントエンド開発には欠かせないテクニックです。親オブジェクト名を工夫し、必要なデータだけを渡す設計を心がけると、より保守性の高いコードになります。
