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

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();
            }
          },
        });
      }
    }
  });
});
// 読み込み中フラグが無いため、scrollイベントの多重発火で複数ページ分のリクエストが同時に飛ぶ

jQuery(document).ready(function ($) {
  let currentPage = 1; // 現在のページ
  let isLoading = false; // 読み込み中フラグ
  const maxPage = parseInt(ajax_object.max_page); // 最大ページ数
  const ajaxUrl = ajax_object.ajax_url; // Ajax URL

  // 無限スクロール
  $(window).on('scroll', function () {
    if (isLoading) return; // 読み込み中は何もしない

    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
      if (currentPage < maxPage) {
        isLoading = true;
        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); // 記事を追加
            }
          },
          complete: function () {
            // 成功・失敗にかかわらず必ず後始末する
            $('#loading-icon').hide();
            isLoading = false;
          },
        });
      }
    }
  });
});

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 '<article class="post">';
      echo '<h2><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></h2>';
      echo '<p>' . esc_html(get_the_excerpt()) . '</p>';
      echo '</article>';
    }
  }
  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');

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');
// 子テーマ環境ではURLが親テーマを指してしまい infinite-scroll.js が404になる

function enqueue_infinite_scroll_scripts() {
  wp_enqueue_script('infinite-scroll', get_stylesheet_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');

<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>

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