Ajaxの使い方 on WordPress

WordPressならAjaxの統合もシンプルな方法で導入できる。

各ページでAjaxを利用可能にする

WordPressではAjax用のインタフェースが用意されている。

そのインテフェースを利用すれば、WordPressの機能を利用しつつシンプルな方法でAjax化することが可能。

WordPress側にAPIの受け口を用意してみたい。そして、そのAPIにブラウザからリクエストを送信してみることで具体的になイメージを掴むことができる。受け口となる関数はaction_center_callbackとして以下のようにした。

function action_center_callback() {
	
	if( !$_POST ) // ブラウザからのリクエストにレスポンスするテストデータ
	{
		$data = array('param' => 'test response', 'page' => 'test');
	}
	
	else
	{
		$param = $_POST['param1'];
		$param .= " World";
		$data = array('param' => $param, 'page' => $_POST['page']);
	}

	echo json_encode($data);
	die();
}

action_center_callback関数をAjax対応にする。そのためには以下のようにアクションフックに関連付ける。

add_action('wp_ajax_action_center', array($this, 'action_center_callback'));

上のアクションフックに関連付けることで管理系のAPIとして有効なインタフェースとなった。

ここまでの作業でWordPress側にAPIのインタフェースが作成されたことになる。ブラウザからアクセスして確認してみる。リクエスト先URLは以下のとおり。

blog.local/wp-admin/admin-ajax.php?action=action_center

リクエスト結果は以下のようになった。

{"param":"test response","page":"test"}

json形式でデータを取得できた。

WordPressのAjaxではログイン認証の有無もチェックされている

ブラウザからリクエストしてjson形式のデータを取得することが確認できたが、ログイン認証の有無で結果が異なるので、WordPressからログアウトした状態で同じURLにアクセスしてみる。するとデータがレスポンスされないことを確認できる。WordPressのAjaxでは認証の有無がチェックされている。

ログアウトした状態で以下のアクションフックに上で定義した関数を関連付けてみる。

add_action('wp_ajax_nopriv_action_center', array($this, 'action_center_callback'));

wp_ajax_nopriv_アクションフックは、ログインしていない状態でもデータをレスポンスするフックになる。この機能を利用して管理系以外のページにもデータがレスポンスできる状態になる。具体的には、個々のブログサイトの公開しているブログページをAjax化する際に利用する。

Ajaxクライアントの開発の準備

ここまでは、シンプルなAPIを作成しブラウザから直接アクセスするという方法で、WordPressのAPI化の一部を確認した。実際には、Ajaxリクエストを行うクライアントが必要となる。具体的には、

• jQuery
• AngularJS

などを用いて開発することになる。今回はjQueryを利用してクライアント側の開発を行うが、その前にjQueryでフロント側のコードを書く前に、WordPress側で2つほどやっておくことがある。

• フロント側のスクリプトの読み込み設定
• フロント側で利用するデータのグローバル化

上の2つの設定をWordPress側で行っておく。そのために用意したのが以下のコードになる。

function enqueue_script($hook) {

//var_dump($hook);

    if( !is_admin() ) // 公開ページの場合はpublicを設定
    {
	$hook = "public";
    }

        // jsスクリプトの読み込み設定
	wp_enqueue_script('ajax-script',
		plugins_url( '/js/ajax_requester.js', __FILE__ ),
		array('jquery')
	);

        // データのグローバル化処理
	wp_localize_script('ajax-script',
		'ajax_object',
    	        array(
			'ajax_url' => admin_url('admin-ajax.php'),
			'action' => 'action_center',
			'page' => $hook,
			'param1' => "Hello Blog"
		)
	);
}

上のコードでは$hookという引数を利用している。この引数は、管理画面における各ページのhook名というかページのIDのようなものが格納されており、上のコードのコメントを削除することで個々のページの名称を把握することができる。この$hookを利用してページ毎に異なるAjax処理が書けるように配慮してみた。

jsスクリプトの読み込み設定では、ajax_requester.jsというファイルを読み込む設定を行っている。この設定により、

wp-content\plugins\init\js\ajax_requester.js

というファイルが読み込まれる。上で書いたWordPress関数はinitプラグインに定義されている点を補足しておく。

最後のデータのグローバル化処理でフロント側スクリプトで扱うパラメータやリクエストURL(ajax_url)の設定を行っている。

enqueue_scriptを作成したら、この独自関数をアクションフックに関連付けて、各ページでスクリプトが読み込まれるように設定しておく。管理画面でのスクリプトの読み込み設定は以下のように行う。

add_action( 'admin_enqueue_scripts', array($this, 'enqueue_script'));

公開ページでも読み込む場合は以下のようにする。

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_script'));

なお、wp_enqueue_scriptsにフックすると、テーマのwp_head()にjsのインクルード処理が記載される。そのため、テーマファイルにwp_head()が書いていない場合は、Ajaxリクエストが行われないので注意したい。

フロント側のjQuery

Ajaxリクエストを行うjQueryは以下のようにした。ajax_requester.jsというファイルを

wp-content\plugins\init\js

に作成する。

jQuery(document).ready(function($) {

	var data = {
		action: ajax_object.action,
		page: ajax_object.page,
		param1: ajax_object.param1
	};

	jQuery.ajax({
		type: 'POST',
		data: data,
		url: ajax_object.ajax_url,
		dataType: 'json',
		success: function(response){
			console.log(response);
			alert(response.page + ' is Ajax page');
		}
	});
});

このコードで重要ななのが、

ajax_object

というデータになる。設定したのは、WordPress側のenqueue_script関数の

wp_localize_script

でグローバル化したデータになる。変数としてグローバル化することで、ページに依存しないコードを書くことができる。ajax_object.pageで各ページの情報を渡してあるので、action_center_callbackでページ単位で分岐することで異なるデータをレスポンスすることが可能。

function action_center_callback() {
	
	if( $_POST['page'] == "index.php" )
	{

	}
	
	elseif( $_POST['page'] == "edit.php" )
	{

	}
	
	echo json_encode($data);
	die();
}

バックエンドとしてWordPressを利用する際にはNonce認証についても検討する必要がある。AjaxにNonce認証を追加のエントリーも参考にして頂きたい。

実行結果

管理画面でメディアのページにアクセスするとアラートメッセージが表示された。

WordPressを利用すればAjax化もスマートに開発することができる。

• WordPressでソーシャルボタンを非同期化して高速化
• 遅延ロードとjQuery.ajax