【WordPress】Ajaxを使用する方法

2025.01.29

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 というファイルを作成し、以下のように記述します。

ajax.js：ボタンクリックでAjaxリクエストを送信
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）
        nonce: ajax_object.nonce // セキュリティ対策のnonce
      },
      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 を読み込みます。

NG：子テーマ環境で404・nonceも渡していない
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');
// 子テーマ環境ではURLが親テーマを指してしまいajax.jsが404になる。nonceも渡していない
get_template_directory_uri() は親テーマのURLを返す
get_template_directory_uri()は親テーマのディレクトリURLを返す関数です。子テーマ環境でajax.jsを子テーマ側に置くと、URLが親テーマを指してしまいスクリプトが404になります。子テーマのURLを正しく取得するにはget_stylesheet_directory_uri()を使います。あわせて、後述のAjaxハンドラーで検証するnonceもここで生成してJavaScript側に渡しておきます。
OK：子テーマに対応しnonceも渡す
function my_enqueue_scripts() {
  wp_enqueue_script('my-ajax-script', get_stylesheet_directory_uri() . '/js/ajax.js', array('jquery'), null, true);
  wp_localize_script('my-ajax-script', 'ajax_object', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce'   => wp_create_nonce('my_ajax_nonce'), // Ajaxハンドラー側で検証するnonce
  ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

このwp_localize_script()を使うことで、admin-ajax.php のURLを ajax_object.ajaxurl として、nonceをajax_object.nonceとしてJavaScript側に渡せます。

Ajaxリクエストを受け取るPHPの実装

functions.php に、Ajaxリクエストを処理する関数を追加します。

NG：投稿ステータス未確認で誰でも下書き・非公開投稿を閲覧できる
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'); // 未ログインユーザー向け
// get_post()は投稿ステータスをチェックしないため、post_idを総当たりされると
// 下書き・非公開投稿の内容まで誰でも閲覧できてしまう
get_post()は投稿ステータスをチェックしない
get_post($post_id)は、投稿が下書き・非公開・ゴミ箱のいずれであっても、IDが存在すればそのまま投稿オブジェクトを返します。上記のコードはwp_ajax_nopriv_も登録しているため、ログインしていない第三者がpost_idを1から順に送信するだけで、公開前の下書きや非公開投稿のタイトル・本文を読めてしまいます。投稿IDが連番であることを考えると、実害のある情報漏洩です。get_post_status($post_id) === 'publish'で公開済みかどうかを必ず確認し、あわせてnonceで外部からの不正なリクエストも防ぎます。
OK：投稿ステータス確認とnonce検証を追加
function my_ajax_handler() {
  // nonceを検証（不正なリクエストを拒否）
  check_ajax_referer('my_ajax_nonce', 'nonce');

  $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;

  // 公開済みの投稿かどうかを必ず確認する
  if ($post_id && get_post_status($post_id) === 'publish') {
    $post = get_post($post_id);
    echo '<h2>' . esc_html($post->post_title) . '</h2>';
    echo '<p>' . esc_html($post->post_content) . '</p>';
  } 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）に以下のボタンを追加します。

index.php / single.php：Ajaxを実行するボタン
<button class="my-button" data-id="123">投稿を取得</button>
<div class="result"></div>

ボタンをクリックすると、投稿ID 123 のデータが取得され、.result に表示されます。

Ajaxの動作を確認する

上記のコードを適用した後、ページを開いてボタンをクリックすると、該当する投稿のタイトルと本文が表示されるはずです。コンソールを開いて console.log の出力を確認することで、Ajaxのリクエスト状況を確認できます。

JSON形式でのレスポンスを返す方法

もしJSON形式でレスポンスを返したい場合は、wp_send_json() を使用します。

functions.php：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 を取得し、処理を行うことができます。wp_send_json_success()・wp_send_json_error()を使うと、成功・失敗の判定用のキーが自動付与されたうえでwp_die()も自動的に呼ばれるため、さらに便利です。

関連記事

よくある質問（FAQ）

QWordPressのAjax処理でwp_ajax_とwp_ajax_nopriv_の違いは？
Awp_ajax_フックはログイン済みユーザーのAjaxリクエストを処理します。wp_ajax_nopriv_フックは未ログインユーザーも含む全リクエストを処理します。両方追加することでログイン状態に関係なく動作しますが、その分、投稿ステータスの確認やnonce検証を怠ると誰でもアクセスできてしまう点に注意してください。
QAjax処理の最後にwp_die()が必要な理由は？
Awp_die()を呼ばないと余分な出力（0など）が付加されてJSONパースエラーになる場合があります。wp_send_json_success()・wp_send_json_error()を使うと自動的にwp_die()が呼ばれるため便利です。
QAjaxリクエストにWordPressのnonceを使うセキュリティ対策は？
Awp_create_nonce()でnonceを生成してJavaScriptに渡し、Ajaxハンドラー側でcheck_ajax_referer()で検証します。これにより外部からの不正なAjaxリクエストを防止できます。あわせて、投稿など特定のデータを返すハンドラーでは、投稿ステータスや閲覧権限のチェックも必ず行ってください。

まとめ

WordPressでAjaxを利用する際の基本的な流れは以下の通りです。

  1. JavaScriptでAjaxリクエストを送信
  2. functions.phpでAjaxを受け取る処理を作成
  3. wp_ajax_アクション名を定義
  4. 必要ならwp_ajax_nopriv_アクション名も追加（未ログインユーザー用）
  5. nonce検証と、返すデータの公開状態・閲覧権限のチェックを必ず実装する
  6. Ajaxの動作を確認し、必要に応じてカスタマイズ

この手順を押さえておけば、WordPressのテーマやプラグインで動的なデータ処理が可能になります。特にwp_ajax_nopriv_を使う場合は、誰でもリクエストできることを前提に、返すデータの範囲を必ず絞り込んでください。