WordPressでAJAX通信する方法

2020年2月26日2021年11月27日

はにわまん

WordPressでAJAX通信する方法です。WordPressの場合はアクション先のURLがあらかじめ決まっていて、fucntions.phpからフックすることによって実態の処理を実行するといった流れになります。

そのお決まりの作法を見ていきましょう！

はにわまん

Ajaxで記事の取得などできるようになると、WordPressでありながらシングルページアプリケーション風なリッチな作りにできて楽しいです！

WordPressでAJAX通信する方法

Ajax通信するためのJavaScirptの部分と、処理の内容を記載するPHP（functions.php）の2箇所の書き方を覚えておく必要があります。

AjaxするためのJavaScriptの書き方

WordPressのテンプレートタグが使えるfooter.php等で<script>を定義しておくと、独立したJavaScriptファイルに書くよりもタグが使える分はかどります。

wp-admin/admin-ajax.phpを使うために、admin_urlを使って取得しています。

let ajaxUrl = '<?php echo esc_url( admin_url( 'admin-ajax.php', __FILE__ ) ); ?>';

$.ajax({
	type: 'POST',
	url: ajaxUrl,
	data: {
		'action' : 'my_ajax',
		'nonce': '<?php echo wp_create_nonce( 'my-ajax-nonce' ); ?>'
	},
	success: function( response ) {
		console.log( '成功しました：' + response );
	}
});

Ajax通信内の、dataのactionにて実行させる関数名を指定し、セキュリティ的な観点からnonceの指定を行って検証を行います。

→ 関数リファレンス/wp create nonce – WordPress Codex 日本語版
→ 関数リファレンス/wp verify nonce – WordPress Codex 日本語版

Ajaxを受け取るアクションを指定

先程のAjax通信で指定したactionが処理に対応する関数名になります。作り方としては、wp_ajax_[action名]およびwp_ajax_nopriv_[action名]というアクションフックをfunctions.phpに用意してあげればOKです。

function my_wp_ajax() {

	$nonce = $_REQUEST['nonce'];
	if ( wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) {
		echo '返す値';
	}
	die();
}
add_action( 'wp_ajax_my_ajax', 'my_wp_ajax' );
add_action( 'wp_ajax_nopriv_my_ajax', 'my_wp_ajax' );

wp_ajax_[action名]・・・ログインしているユーザー用
wp_ajax_nopriv_[action名]・・・ログインしていないユーザー用

なので、ログインしていない人にもAjaxさせる場合はwp_ajax_nopriv_[action]を指定しておかないと動作しなくなる（400エラーを起こす）のでご注意ください。

結果の確認

今回は成功した際（success）に、処理結果を表示するようにしています。この変の処理（functions.phpも含めてですが）は好きなような作成してあげてください。

成功してecho '返す値';として結果が返ってきているので、デベロッパーツールの「Console」を見てみると「成功しました：返す値」と表示されていることが分かるはずです。

変数を渡してみる

現状では、Ajax通信する際にnonceしか使っていませんが、他の変数も使うことが可能です。この辺は通常のAjax処理と同様になります。

例えば、以下のようにnameという変数を定義してAjax通信の際に渡してみます。

let ajaxUrl = '<?php echo esc_url( admin_url( 'admin-ajax.php', __FILE__ ) ); ?>';

$.ajax({
	type: 'POST',
	url: ajaxUrl,
	data: {
		'action' : 'my_ajax_val',
		'name' : 'Tom',
		'nonce': '<?php echo wp_create_nonce( 'my-ajax-nonce-val' ); ?>'
	},
	success: function( response ) {
		console.log( '成功しました：' + response );
	}
});

POST通信しているので、$_POST['name']といった形で受け取ることが可能です。ちなみに、同様の形でいくつでも変数は渡すことができます。

function my_wp_ajax_val() {

	$nonce = $_REQUEST['nonce'];
	$name = isset( $_POST['name'] ) ? $_POST['name'] : '名無し';
  if ( wp_verify_nonce( $nonce, 'my-ajax-nonce-val' ) ) {
    echo 'わたしの名前は「' . $name . '」です。';
  }
  die();
}
add_action( 'wp_ajax_my_ajax_val', 'my_wp_ajax_val' );
add_action( 'wp_ajax_nopriv_my_ajax_val', 'my_wp_ajax_val' );

とてもシンプルな処理ですが、わたしの名前は「xxx」です。という返答をしています。