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