WordPress（ワードプレス）で非同期通信（AJAX）を実装する方法

ホームページでは「いいね」や「お気に入り登録」など、ボタンを押した瞬間に画面が更新される機能を見かけることがあります。
これらは多くの場合、ページ全体を再読み込みするのではなく、JavaScriptからサーバーへ通信を行う「非同期通信（AJAX）」によって実現されています。
当サイトでも過去にAJAXについて紹介したことはありますが、今回はWordPress標準の「admin-ajax.php」を利用し、投稿に「いいね」を付ける機能を例に実装方法をご紹介します。

ページを再読み込みせず「いいね」機能を作る

非同期通信（AJAX）の流れ

今回の処理を簡単に説明すると、次のような流れになります。

• ボタンをクリック
• JavaScript(jQuery)
• admin-ajax.php
• PHPでデータベース更新
• PHPがJSON形式で結果を返す
• JavaScriptで画面を書き換える

WordPressでは、この一連の流れを比較的簡単に実装できます。

一般的な非同期通信は下記を参照ください

ボタンを設置する

まずはショートコードでボタンを表示します。
ショートコードに[like_button]を記載するだけでボタンが設置できます

PHP（functions.php）

function sample_like_button(){

	global $post;
	
	$count = get_post_meta($post->ID, 'like_count', true);
	
	if(empty($count)){
		$count = 0;
	}

	$html = '<input type="hidden" id="post_id" value="'.esc_attr($post->ID).'">';
	$html .= '<button id="like-btn">いいね</button>';
	$html .= '<span id="like-count">'.esc_html($count).'</span>';

	return $html;

}

add_shortcode('like_button', 'sample_like_button'); //ショートコードの名称とそれを実行する関数の定義

JavaScriptからAJAXを送信する

jQuery（sample-like.js）

jQuery(function($){

	$('#like-btn').on('click', function(){

		const $btn = $(this);
		if ($btn.prop('disabled')) return; // 通信中ならスキップ
		$btn.prop('disabled', true); // ボタンを無効化

		$.ajax({
			type: 'POST',
			url: sample_ajax.ajaxurl,
			data: {
				action : 'sample_like',
				_ajax_nonce : sample_ajax.nonce,
				post_id : $('#post_id').val()
			}
		}).done(function(response){

			$('#like-count').text(response.count);

		}).fail( function( error ) {

			console.warn('失敗:', error.status, error.statusText);

		}).always(function(){

			$btn.prop('disabled', false); // 成功・失敗に関わらずボタンを元に戻す
		});
	});

});

JavaScriptへURLを渡す

WordPressでは、admin-ajax.php のURLをJavaScriptへ直接記述するのではなく、PHPから渡すのが一般的です。wp_add_inline_script() を利用することで、PHPで取得したURLやnonceをJavaScript側へ安全に渡すことができます。

PHP（functions.php）

function sample_enqueue(){

	wp_enqueue_script(
		'sample-js',
		plugin_dir_url(__FILE__).'sample-like.js', //jsのファイルパス
		array('jquery'),
		null,
		true
	);

	wp_add_inline_script(
		'sample-js',
		'const sample_ajax = '.json_encode(array(
			'ajaxurl'=>admin_url('admin-ajax.php'),
			'nonce'=>wp_create_nonce('sample_nonce')

		)),
		'before'
	);

}

add_action('wp_enqueue_scripts','sample_enqueue');

PHPでAJAXを受信する

JavaScriptから送信されたデータは、WordPress側で受け取ります。

PHP（functions.php）

function sample_like_ajax() {

	check_ajax_referer('sample_nonce');

	if (isset($_POST['post_id'])) {
		$post_id = intval($_POST['post_id']);
	} else {
		$post_id = 0;
	}
	
	$count = get_post_meta($post_id,'like_count',true);

	if(empty($count)){
		$count = 0;
	}

	$count++;

	update_post_meta($post_id,'like_count',$count);

	wp_send_json(array('count' => $count));

}
 
// 上記で定義した AJAX ハンドラを AJAX アクションに登録
add_action('wp_ajax_sample_like', 'sample_like_ajax'); //ワードプレスのログインユーザーが対象となる場合
add_action('wp_ajax_nopriv_sample_like', 'sample_like_ajax'); //ワードプレスの非ログインユーザーが対象となる場合

任意の文字列について

コード内には sample_like や sample_nonce など、自由に名前を付けられる文字列がいくつか登場します。
これらは好きな名前に変更できますが、関連する箇所では必ず同じ文字列を使用する必要があります。

任意の文字列	記載箇所	説明
sample_ajax	const sample_ajax= {…}	JavaScriptへ渡す変数名です。スクリプト内で参照する名前と一致させます。
sample_ajax	sample_ajax.ajaxurl	JavaScript内 上記で定義した変数名と同じものを使用します。
sample_ajax	sample_ajax.nonce	JavaScript内 nonceを取得する変数名です。PHP側で渡したキー名と一致させます。
sample_like	action: ‘sample_like’	JavaScript内 AJAXで呼び出すアクション名を指定します。
sample_like	add_action(‘wp_ajax_sample_like’, ‘sample_like_ajax’);	ログインユーザー用のフックです。JavaScriptのactionと同じ文字列にします。
sample_like	add_action(‘wp_ajax_nopriv_sample_like’, ‘sample_like_ajax’);	非ログインユーザー用のフックです。こちらも同じ文字列にします。
sample-js	wp_enqueue_script(‘sample-js’, …)	JavaScriptファイルをWordPressへ登録する際のハンドル名（識別子）です。
sample-js	wp_add_inline_script(‘sample-js’, …)	インラインスクリプトをどのJavaScriptファイルに関連付けるかを指定します。wp_enqueue_script()と同じ文字列を指定します。
sample_nonce	wp_create_nonce(‘sample_nonce’)	nonceを生成する際の識別名です。
sample_nonce	check_ajax_referer(‘sample_nonce’)	nonceを検証する際の識別名です。生成時と同じ文字列にします。

今回は理解しやすさを優先し、テーマの functions.php に実装しています。
実際の案件では、再利用性や保守性を考慮してプラグインとして実装するケースもプラグインとして実装するケースも少なくありません。

また、今回の内容は「いいね」機能を例にしていますが、考え方はお気に入り登録や閲覧数の更新、問い合わせフォームの確認処理など、さまざまな非同期処理に応用できます。

一度AJAXの基本的な仕組みを理解しておけば、WordPressで実装できる機能の幅が大きく広がるでしょう。

• WordPressのAjaxで非同期処理を実装する方法を徹底解説(サンプルコード付き)