【WordPress】jQueryでAjaxを実装する簡単な例｜ajaxメソッド

ウェブサイトの中には、Googleマップのように、ブラウザを更新せずに画面が変化するサイトなどがあると思います。そのようなサイトの中には、Ajaxを使用している場合があります。

Ajaxでは、JavaScriptのHTTP通信機能を利用し、Webページのリロードを伴わずにページの更新などを行えます。

今回は、そのAjaxをjQueryのajaxメソッドを利用し、WordPressのサイトに実装する簡単な例となります。

【WordPress】jQueryでAjaxを実装する簡単な例
まとめ
参考サイトなど

【WordPress】jQueryでAjaxを実装する簡単な例

今回の例では、id="button"を持つ要素をクリックするとAjax通信を行います。

Ajax通信では、現在のページからURLを取得してサーバー側に渡し、その値を元にPHPで処理をしてクライアント側に投稿IDの値を返します。

また、取得した投稿IDは次のとおりダイアログに表示します。

投稿ページの場合は、「投稿IDは●」（●の箇所にそのページの投稿ID）
投稿ページ以外では、「投稿IDはなし」

jQuery・PHPのコードについて

例では、次のソースコードをそれぞれ記述し、WordPressサイトにAjaxを実装します。

読み込んでいるJavaScriptファイルなどに、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/wp-admin/admin-ajax.php',
			cache: false,
			data: {
            	// アクションフックで利用する文字列を指定
				action : 'my_ajax_action',
                // 現在のページのURLが格納された変数を値に指定
				url_data : currentUrl,
			},
			success: function(response){
            	// AJAX通信によって取得したデータをダイアログに表示
				alert(response);
			}
		});
	});
});

なお、今回は設定していませんが、扱うデータによってはCSRFのセキュリティ対策としてnonceを設定する必要があります。詳しくは文末の参考サイトを確認してみてください。

ajaxメソッドの引数に指定したオブジェクトついて

ajaxメソッドでは引数をオブジェクト（キーと値）で指定することでAjaxの設定を行います。

以下は、例のajaxメソッドの引数に指定したオブジェクトの要素となります。

type

"POST"か"GET"などのHTTP通信の種類を指定。初期値は"GET"

url

リクエストを送信する先のURLを指定。省略時は呼び出し元のページに送信します。WordPressでAjaxを使用する場合には、admin-ajax.phpの絶対パスを指定します。

cache

通信結果をキャッシュしたくない場合はfalseを指定。初期値はtrue

data

サーバーに送信するデータを指定。送信するデータが複数ある場合には値をオブジェクトで指定します。

WordPressの場合はオブジェクトで指定し、その要素の１つは、キーをactionとして値にはWordPressのアクションフック名で利用する文字列を指定します。例ではその値に'my_ajax_action'を指定しています。

また、今回の例では、その他に現在のページのURLを格納した変数currentUrlを、キーurl_dataの値に指定しています。

success

Ajax通信が成功した場合に、呼び出す関数を指定します。

関数の第1引数は、戻ってきたデータとなります。また、第2引数には戻ってきたデータの型を指定することができ、省略した場合は自動的に判別します。

例で指定した関数では、Ajax通信により、戻ってきたデータをダイアログに表示しています。

その他の設定について

上記例のajaxメソッドの引数で指定した設定以外にも、指定できる設定はあります。詳しくは、文末の参考サイト内を確認してみてください。

ajaxメソッドで実行させるアクションフック

functions.phpファイルには、Ajax通信によって実行するアクションフックを記述します。以下、ソースコードの例となります。

function my_ajax(){
    // POST送信で受け取ったURLから投稿IDを取得
	$ID = url_to_postid( $_POST["url_data"] );
	$ID = $ID == 0 ? "なし" : $ID; 
    echo "投稿IDは" . $ID;
    // WordPressの実行を停止
    wp_die();
}
add_action( 'wp_ajax_my_ajax_action', 'my_ajax' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax' );

ajaxメソッドで実行させるアクションフックについて

上記は、Ajax通信によって実行するアクションフックとなりますが、次のようにユーザの条件によって、2つのアクションフックに実行するコールバック関数を登録します。

ログイン済みユーザーの場合に実行するフックは、add_action( 'wp_ajax_{$action}', 'コールバック関数名' );
未ログインユーザーの場合に実行するフックは、add_action( 'wp_ajax_nopriv_{$action}', 'コールバック関数名' );

フック名の{$action}には、jQueryのajaxメソッドのdataで渡すactionの値を指定します。今回の例ではmy_ajax_actionとなります。

コールバック関数について

フックのコールバック関数には、Ajax通信によってサーバー側で実行する処理を記述します。クライアント側に返すデータはechoで指定します。また、その返したデータは、ajaxメソッドのsuccessの値に指定する関数の引数にセットされます。

例のコールバック関数my_ajax()では、まず、$_POSTでajaxのPOST通信によって受け取った現在のページURLを取得しています。（ajaxメソッドのdataで渡したurl_dataの値）

そして、そのページURLによって、クライアント側に渡すデータを変更しています。

まとめ

以上が、Ajax通信をjQueryのajaxメソッドを利用し、WordPressのサイトに実装する簡単な例となります。

また、Ajax通信がローディング中に、くるくる（スピナー）を表示させたい場合もあると思います。そのような場合は、以下のリンク先を参考にしてみてください。

【jQuery】Ajaxのローディング時に、くるくる（スピナー）を表示