ウェブサイトの中には、Googleマップのように、ブラウザを更新せずに画面が変化するサイトなどがあると思います。そのようなサイトの中には、Ajax（エイジャックス）を使用している場合があります。
Ajaxでは、JavaScriptのHTTP通信機能を利用し、Webページのリロードを伴わずにページの更新などを行えます。
今回は、そのAjaxをjQueryのajaxメソッドを利用し、WordPressのサイトに実装する簡単な例となります。
【WordPress】jQueryでAjaxを実装する簡単な例
今回の例で実装する内容では、id="button"を持つ要素をクリックするとAjax通信を行い、WordPressから投稿データを取得しブラウザのダイアログに次のとおり表示します。
現在のページが投稿の場合は、「投稿IDは●」（●の箇所にそのページの投稿ID）を表示し、それ以外のページでは、「投稿IDはなし」とダイアログに表示します。
jQueryとPHPのソースコードについて
例では、次のソースコードをそれぞれ記述し、WordPressサイトにAjaxを実装します。
- jQueryでAjax通信を行うスクリプトを記述
- functions.phpファイルに、Ajax通信で実行させるアクションフックを記述
また、WordPressにjQueryライブラリー本体は読み込んでいる前提としています。
jQueryによるAjax通信
以下、jQueryでAjax通信を行うスクリプトとなります。
jQuery(function($){
$('#button').click(function(){
// 現在のページのURLを取得
var currentUrl = location.href;
$.ajax({
type: 'POST',
// WordPressでAjaxを使用する場合、urlにはadmin-ajax.phpの絶対パスを指定
url: 'http://example.com/wordpress/wp-admin/admin-ajax.php',
cache: false,
data: {
// アクションフックで実行する関数名を値に指定
action : 'my_ajax',
// 現在のページのURLが格納された変数を値に指定
url_data : currentUrl,
},
success: function(data){
// AJAX通信によって取得したデータをダイアログに表示
alert(data);
}
});
});
});ajaxメソッドの引数に指定したオブジェクトついて
ajaxメソッドでは引数をオブジェクト（キーと値）で指定することでAjaxの設定を行います。
以下は、上記例のajaxメソッドの引数に指定したオブジェクト内容となり、オブジェクトのキーと、値として指定できる内容となります。
type
"POST"か"GET"などのHTTP通信の種類を指定。初期値は"GET"
url
リクエストを送信する先のURLを指定。省略時は呼び出し元のページに送信します。WordPressでAjaxを使用する場合には、admin-ajax.phpの絶対パスを指定します。
cache
通信結果をキャッシュしたくない場合はfalseを指定。初期値はtrue
data
サーバーに送信するデータを指定。送信するデータが複数ある場合には、オブジェクトで指定します。今回の例では、以下の2つのデータを指定しています。
action : 'my_ajax' では、WordPressのアクションフックを実行させるため、キーをactionとして、値にアクションフックのコールバック関数名の'my_ajax'を指定。
url_data : currentUrl では、JavaScriptで取得したデータPHP側に渡すため、キーをurl_dataとして、値に現在のページのURLを格納した変数currentUrlを指定。
なお、今回は使用していませんが、送信するデータによりデータベースを更新する場合などは、セキュリティ対策として、nonceを設定する必要があります。詳しくは、以下のリンク先を参考にしてみてください。
初歩からわかるWordPressのnonceでAjaxをセキュアに実装する方法 | ゆっくりと…
success
AJAX通信が成功した場合に、呼び出す関数を指定します。
関数の第1引数には、戻ってきたデータを指定します。第2引数には、戻ってきたデータの型を指定することができ、省略した場合は自動的に判別します。
例で指定した関数では、AJAX通信により、戻ってきたデータをダイアログに表示します。
その他の設定について
上記例のajaxメソッドの引数で指定した設定以外にも、指定できる設定はあります。詳しくは、以下のリンク先を参考にしてみてください。
jQuery.ajax(options) - jQuery 日本語リファレンス
ajaxメソッドで実行させるアクションフック
functions.phpファイルには、jQueryのajaxメソッドによって実行させるアクションフックを記述します。以下、ソースコードの例となります。
function my_ajax(){
// POST送信で受け取ったURLから投稿IDを取得
$ID = url_to_postid( $_POST["url_data"] );
$ID = $ID == 0 ? "なし" : $ID;
echo "投稿IDは" . $ID;
// ０を出力させない
exit();
}
add_action( 'wp_ajax_my_ajax', 'my_ajax' );
add_action( 'wp_ajax_nopriv_my_ajax', 'my_ajax' );ajaxメソッドで実行させるアクションフックについて
上記は、jQueryのajaxメソッドで実行させるアクションフックとなりますが、次のようにユーザの条件によって、2つのアクションフックを使用しています。
- ログイン済みユーザーの場合は、add_action( 'wp_ajax_アクション名', '任意の関数名' );
- 未ログインユーザーの場合は、add_action( 'wp_ajax_nopriv_アクション名', '任意の関数名' );
今回の例でフックに指定しているアクション名は、jQueryのAJAX通信によって渡されたmy_ajax（ajaxメソッドのdataで指定したキーactionの値）となります。
アクションフックのコールバック関数について
アクションフックのコールバック関数my_ajax()では、まず、$_POSTでAJAX通信によって渡された現在のページURL（ajaxメソッドのdataで指定したキーurl_dataの値）を受け取ります。
そして、$_POSTで受け取った値により、ajaxメソッドに渡すデータを変更しています。渡したデータは、ajaxメソッドのsuccessで指定する関数の変数に格納されます。
まとめ
以上が、AjaxをjQueryのajaxメソッドを利用し、WordPressのサイトに実装する簡単な例となります。
また、Ajax通信がローディング中に、くるくる（スピナー）を表示させたい場合もあると思います。そのような場合は、以下のリンク先を参考にしてみてください。
