WordPressでAjaxを利用すると、ページをリロードせずにデータの取得や送信が可能になります。本記事では、WordPressでAjaxを実装する方法を解説します。
WordPressでAjaxを利用する仕組み
WordPressのAjaxは、admin-ajax.php を介してサーバーにリクエストを送信し、サーバー側で処理を行った後に結果を返す仕組みです。WordPressのAjaxを利用するには、以下の要素が必要です。
- JavaScript（jQuery）を使用してAjaxリクエストを送信
- functions.php にAjaxを受け取る処理を記述
- wp_ajax_アクション名 や wp_ajax_nopriv_アクション名 を使用してリクエストを処理
Ajaxリクエストを送信するJavaScriptの実装
まず、ajax.js というファイルを作成し、以下のように記述します。
jQuery(document).ready(function ($) {
$('.my-button').on('click', function () {
$.ajax({
url: ajax_object.ajaxurl, // WordPressのAjax URL
type: 'POST',
data: {
action: 'my_ajax_action', // PHP側で定義するアクション名
post_id: $(this).data('id') // 送信するデータ（例: 投稿ID）
},
beforeSend: function () {
console.log('リクエスト送信中...');
},
success: function (response) {
console.log('成功:', response);
$('.result').html(response);
},
error: function (xhr, status, error) {
console.log('エラー:', error);
}
});
});
});このスクリプトは、.my-button をクリックすると、admin-ajax.php にリクエストを送り、結果を .result に表示します。
JavaScriptをWordPressに登録
次に、functions.php に以下のコードを追加し、ajax.js を読み込みます。
function my_enqueue_scripts() {
wp_enqueue_script('my-ajax-script', get_template_directory_uri() . '/js/ajax.js', array('jquery'), null, true);
wp_localize_script('my-ajax-script', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');この wp_localize_script() を使うことで、admin-ajax.php のURLを ajax_object.ajaxurl としてJavaScript側に渡せます。
Ajaxリクエストを受け取るPHPの実装
functions.php に、Ajaxリクエストを処理する関数を追加します。
function my_ajax_handler() {
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
if ($post_id) {
$post = get_post($post_id);
if ($post) {
echo '<h2>' . esc_html($post->post_title) . '</h2>';
echo '<p>' . esc_html($post->post_content) . '</p>';
} else {
echo '投稿が見つかりません。';
}
} else {
echo '無効なリクエストです。';
}
wp_die();
}
add_action('wp_ajax_my_ajax_action', 'my_ajax_handler'); // ログイン中のユーザー向け
add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_handler'); // 未ログインユーザー向けここでは、リクエストされた投稿IDに基づいて投稿のタイトルと内容を取得し、レスポンスとして返します。
Ajaxリクエストを実行するボタンの設置
テンプレートファイル（例: index.php や single.php）に以下のボタンを追加します。
<button class="my-button" data-id="123">投稿を取得</button>
<div class="result"></div>ボタンをクリックすると、投稿ID 123 のデータが取得され、.result に表示されます。
Ajaxの動作を確認する
上記のコードを適用した後、ページを開いてボタンをクリックすると、該当する投稿のタイトルと本文が表示されるはずです。コンソールを開いて console.log の出力を確認することで、Ajaxのリクエスト状況を確認できます。
JSON形式でのレスポンスを返す方法
もしJSON形式でレスポンスを返したい場合は、wp_send_json() を使用します。
function my_ajax_json_handler() {
$response = array('message' => '成功', 'status' => 200);
wp_send_json($response);
}
add_action('wp_ajax_my_ajax_json', 'my_ajax_json_handler');
add_action('wp_ajax_nopriv_my_ajax_json', 'my_ajax_json_handler');JavaScript側で response.message を取得し、処理を行うことができます。
まとめ
WordPressでAjaxを利用する際の基本的な流れは以下の通りです。
- JavaScriptでAjaxリクエストを送信
- functions.phpでAjaxを受け取る処理を作成
- wp_ajax_アクション名を定義
- 必要ならwp_ajax_nopriv_アクション名も追加（未ログインユーザー用）
- Ajaxの動作を確認し、必要に応じてカスタマイズ
この手順を押さえておけば、WordPressのテーマやプラグインで動的なデータ処理が可能になります。
