【WordPress】Ajaxを使った無限スクロールを実現する方法

WordPressのブログやメディアサイトで、ページネーションではなく無限スクロールを導入すると、ユーザーの体験が向上します。この記事では、Ajaxを使って無限スクロールを実現する方法を具体的に解説します。

JavaScriptでAjaxリクエストを送信

無限スクロールを実現するJavaScriptを用意します。jQueryを使用して、スクロール時に次の記事を非同期で取得します。

jQuery(document).ready(function ($) {
  let currentPage = 1; // 現在のページ
  const maxPage = parseInt(ajax_object.max_page); // 最大ページ数
  const ajaxUrl = ajax_object.ajax_url; // Ajax URL

  // 無限スクロール
  $(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
      if (currentPage < maxPage) {
        currentPage++;
        $.ajax({
          url: ajaxUrl,
          method: 'POST',
          data: {
            action: 'load_more_posts',
            page: currentPage,
          },
          beforeSend: function () {
            $('#loading-icon').show(); // ローディングアイコンを表示
          },
          success: function (response) {
            if (response) {
              $('#post-container').append(response); // 記事を追加
              $('#loading-icon').hide(); // ローディングアイコンを非表示
            } else {
              $('#loading-icon').hide();
            }
          },
        });
      }
    }
  });
});

上記コードでは、スクロール位置がページ下部に近づいたとき、次の記事を取得して表示します。

PHPで記事データを返す

functions.php に以下のコードを追加して、Ajaxリクエストを受け取り、記事データを返す処理を作成します。

function load_more_posts() {
  $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

  $query_args = array(
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => $paged,
  );
  $query = new WP_Query($query_args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '
';
      echo '
' . esc_html(get_the_title()) . '
';
      echo '
' . esc_html(get_the_excerpt()) . '
';
      echo '
';
    }
  }
  wp_reset_postdata();
  wp_die();
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

このコードは、指定されたページ番号に基づいて記事データを取得し、HTML形式で返します。

Ajax用のデータを渡す

functions.php に以下のスクリプトを追加して、フロントエンドに必要なデータを渡します。

function enqueue_infinite_scroll_scripts() {
  wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), null, true);

  wp_localize_script('infinite-scroll', 'ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'max_page' => ceil(wp_count_posts()->publish / 5), // 最大ページ数
  ));
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_scripts');

これにより、ajax_object 変数を通じて ajax_url と max_page をJavaScriptに渡します。

HTMLで投稿リストを表示

記事リストを表示するHTMLを用意します。

<div id="post-container">
  <?php
  $query = new WP_Query(array(
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => 1,
  ));
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      ?>
      <article class="post">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
      </article>
      <?php
    }
    wp_reset_postdata();
  }
  ?>
</div>
<div id="loading-icon" style="display: none;">
  <p>読み込み中...</p>
</div>

このコードでは、最初の5件の記事を表示し、Ajaxで読み込んだ記事を #post-container に追加します。

スタイルの調整

ローディングアイコンのデザインを追加します。

#loading-icon {
  text-align: center;
  margin: 20px 0;
  font-size: 14px;
  color: #555;
}

まとめ

WordPressでAjaxを使った無限スクロールを実装することで、ユーザー体験を向上させることができます。この方法はシンプルながら柔軟性が高く、カスタマイズも容易です。