Javascriptの処理上で、サイトやページによって変化するような値を扱いたい場合があります。
例えば、AJAXのエンドポイントです。
|
1 2 3 4 5 6 7 8 9 |
$.ajax({ type: "POST", // urlは本番環境かテスト環境かによって違う url: "http://my-domain.com/wp-admin/admin-ajax.php", data: "query=hoge", success: function(msg){ alert(msg); } }); |
このような不定の値を、Javascript内で扱う方法を紹介します。
Javascriptに値を送るWordPress関数
上記のスクリプトのadmin-ajax.phpのURLは、WordPressではadmin_url('admin-ajax.php')という関数で取得できます。
Javascript内でもその関数を用いたいところですが、拡張子.jsのスクリプトファイルの中では、PHPの関数は使えません。（一応、PHPファイル内で<script>タグを使用する方法もありますが、それではスクリプトの管理が大変です。）
|
1 2 3 4 5 6 7 8 9 |
$.ajax({ type: "POST", // こんな風には書けません url: "<?php echo admin_url('admin-ajax.php'); ?>", data: "query=hoge", success: function(msg){ alert(msg); } }); |
そこで、WordPressにはwp_localize_scriptという便利な関数が用意されています。
wp_localize_script($handle, $object_name, $l10n);
$handleでは、値を使用するスクリプトをハンドル名で設定します。wp_enqueue_scriptで定義した名前です。
$object_nameでは任意のオブジェクト名を設定します。グローバルなオブジェクトになるので、他の変数やクラスなどと競合しないような名前にします。
$l10nでは、スクリプトに渡す値を配列で設定します。
'site'というハンドル名のスクリプトに、前述のURLを渡す場合、次のようになります。
|
1 2 3 |
wp_localize_script('site', 'MySite', array( 'url' => admin_url('admin-ajax.php') )); |
wp_localize_script関数を使用する場合は、wp_head関数より前であればどこでも構いませんが、wp_enqueue_script関数とセットで記述しておくと良いでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> ... <?php wp_enqueue_script('site', get_template_directory_uri(). '/js/site.js', array('jquery'), '1.0'); wp_localize_script('site', 'MySite', array( 'url' => admin_url('admin-ajax.php') )); ?> <?php wp_head(); ?> </head> |
定義された値は、以下のように呼び出します。
|
1 2 3 4 5 6 7 8 |
$.ajax({ type: "POST", url: MySite.url, data: "query=hoge", success: function(msg){ alert(msg); } }); |
この方法で、他にもサイトのホームURLや、現在表示中のカテゴリ名など、色々な値をJavascriptで扱う事ができるようになります。