WordPressでAJAX通信する方法

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通信内の、dataactionにて実行させる関数名を指定し、セキュリティ的な観点からnonceの指定を行って検証を行います。

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

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

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

functions.phpコピー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']といった形で受け取ることが可能です。ちなみに、同様の形でいくつでも変数は渡すことができます。

functions.phpコピー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」です。という返答をしています。

おわり

WordPressでAjax通信する方法でした!functions.phpでの扱い方次第では、WordPressの記事の取得もJavaScriptだけで完結できたりもします

WordPressでありながら、SPI(Single Page Application)風なリッチな作りにできたりするので使えるようになると楽しいですよ!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事