【WordPress】Ajaxを使ってカテゴリーごとの記事一覧をリアルタイムで切り替える方法

WordPressでは、通常のカテゴリーページではページ遷移が必要ですが、ユーザー体験を向上させるためにページ遷移なしでカテゴリーごとの記事一覧を切り替えたいというニーズがあります。

この記事では、Ajax（非同期通信）を使って、カテゴリーごとの記事一覧をリアルタイムで切り替える方法を紹介します。フロントエンドはJavaScript（jQuery）、バックエンドはWordPressのAjax APIを使って実装します。

実装の流れ
ステップ1 HTMLのカテゴリーボタン（例）
ステップ2 jQueryでAjaxリクエスト送信
ステップ3 functions.php にAjax処理を追加
ステップ4 JavaScript用に ajaxurl を渡す
Ajax + WordPress 関連記事
まとめ

実装の流れ

カテゴリーボタンやセレクトボックスのHTMLを作成
jQueryでクリック時にAjaxリクエストを送信
PHP側でカテゴリに応じた記事一覧を返す処理を作成
結果を受け取ってDOMに差し替え

ステップ1 HTMLのカテゴリーボタン（例）

<div id="category-buttons">
  <button class="category-btn" data-cat="1">お知らせ</button>
  <button class="category-btn" data-cat="2">ブログ</button>
</div>

<div id="post-list">
  <!-- Ajaxで記事一覧がここに表示される -->
</div>

ステップ2 jQueryでAjaxリクエスト送信

jQuery(document).ready(function ($) {
  $('.category-btn').on('click', function () {
    const catId = $(this).data('cat');

    $.ajax({
      url: ajax_object.ajaxurl, // ローカル変数で定義される
      type: 'POST',
      data: {
        action: 'get_posts_by_category',
        category_id: catId,
      },
      beforeSend: function () {
        $('#post-list').html('<p>読み込み中...</p>');
      },
      success: function (response) {
        $('#post-list').html(response);
      },
      error: function () {
        $('#post-list').html('<p>エラーが発生しました。</p>');
      },
    });
  });
});

※ ajax_object.ajaxurl はローカルスクリプトで設定する必要があります（後述）。

ステップ3 functions.php にAjax処理を追加

add_action('wp_ajax_get_posts_by_category', 'get_posts_by_category');
add_action('wp_ajax_nopriv_get_posts_by_category', 'get_posts_by_category');

function get_posts_by_category() {
  $cat_id = intval($_POST['category_id']);

  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'cat' => $cat_id,
  );

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<article>';
      echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
      echo '</article>';
    }
  } else {
    echo '<p>記事が見つかりませんでした。</p>';
  }

  wp_die();
}

ステップ4 JavaScript用に ajaxurl を渡す

function enqueue_category_ajax_script() {
  wp_enqueue_script('category-ajax', get_template_directory_uri() . '/js/category-ajax.js', array('jquery'), null, true);

  wp_localize_script('category-ajax', 'ajax_object', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
  ));
}
add_action('wp_enqueue_scripts', 'enqueue_category_ajax_script');