【WordPress】ページネーションをAjaxで非同期読み込みにする方法

WordPressで投稿一覧などを表示する際、通常のページネーションはページの再読み込みが発生します。しかし、ユーザー体験を向上させたい場合、Ajaxを使って非同期で次ページの投稿を読み込む方法が効果的です。本記事では、Ajaxによるページネーションの実装手順を詳しく解説します。

Ajaxページネーションの概要とメリット
HTML構造と初期ループの準備
JavaScriptによるAjax処理の追加
functions.phpでAjax用のスクリプトを読み込む
注意点：URLの履歴とSEO
まとめ

Ajaxページネーションの概要とメリット

Ajaxページネーションとは、ユーザーが「次へ」などのページリンクをクリックしたときに、画面全体を再読み込みするのではなく、一部だけ（投稿一覧など）を非同期で読み込む仕組みです。

これにより、

ページ遷移がスムーズになる
サイト全体の読み込み負荷を軽減できる
UIがモダンに感じられる

HTML構造と初期ループの準備

まず、投稿一覧とページネーションを含む基本構造を作成します。

<div id="ajax-post-list">
  <?php
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => 5,
  );
  $query = new WP_Query($args);

  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      echo '<article><h2>' . get_the_title() . '</h2></article>';
    endwhile;

    echo '<div class="pagination">';
    echo paginate_links(array(
      'total' => $query->max_num_pages,
      'current' => $paged,
      'format' => '?paged=%#%',
      'prev_text' => '« 前へ',
      'next_text' => '次へ »',
    ));
    echo '</div>';
  endif;
  wp_reset_postdata();
  ?>
</div>

JavaScriptによるAjax処理の追加

次に、クリックイベントをフックしてAjax通信を行うJavaScriptを設置します。

jQuery(document).ready(function ($) {
  $(document).on('click', '.pagination a', function (e) {
    e.preventDefault();
    const link = $(this).attr('href');

    $('#ajax-post-list').append('<div class="loading">読み込み中...</div>');

    $.ajax({
      url: link,
      type: 'GET',
      success: function (res) {
        const newPosts = $(res).find('#ajax-post-list').html();
        $('#ajax-post-list').html(newPosts);
      },
    });
  });
});

functions.phpでAjax用のスクリプトを読み込む

先ほどのJavaScriptは、テーマのfunctions.phpで読み込むように設定します。

function enqueue_ajax_pagination_scripts() {
  wp_enqueue_script('ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_pagination_scripts');