WordPressの投稿一覧を無限スクロール化できるJavaScriptプラグイン「Infinite Scroll」

Infinite Scrollは次のページのコンテンツを読み込んで、無限スクロールを実現するJavaScriptプラグインです。デモページも用意されています。

Infinite Scrollを使って、WordPressの投稿一覧を無限スクロール化する方法をご紹介いたします。

スポンサードリンク

Infinite ScrollでWordPressの投稿一覧を無限スクロールにする方法

ステップ1. JavaScriptファイルのダウンロードと読み込み

Infinite Scrollの公式サイトからinfinite-scroll.pkgd.min.jsをダウンロードします。

ファイルをサーバーに設置したら、投稿一覧ページでinfinite-scroll.pkgd.min.jsを読み込みます。
※infinite-blog.jsはInfinite Scrollのオプションなどを指定するファイルです。後述します。

function my_enqueue_scripts() {
  if (is_home() || is_category() || is_tag()) {
    wp_enqueue_script('infinite-scroll-js', get_theme_file_uri('/assets/js/lib/infinite-scroll.pkgd.min.js'), array('jquery'), filemtime(get_theme_file_path('/assets/js/lib/infinite-scroll.pkgd.min.js')), true);
  }
  if (is_home() || is_category() || is_tag()) {
    wp_enqueue_script('infinite-blog-js', get_theme_file_uri('/assets/js/infinite-blog.js'), array('jquery'), filemtime(get_theme_file_path('/assets/js/infinite-blog.js')), true);
  }
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

ステップ2. 投稿一覧に次のページへのリンクを設置

投稿一覧ページに次のページへのリンクを設置します。

<div class="next-posts-link">
  <?php next_posts_link(); ?>
</div>

ステップ3. Infinite Scrollのオプションを指定

最後にステップ1で読み込みを追加した、infinite-blog.jsに以下のようなコードを記述します。クラス名などは適宜変更してください。

var infScroll = new InfiniteScroll( '.post__container', { //記事を挿入していく要素
  append: '.post__item', //各投稿の要素
  path: '.next-posts-link a', //次のページへのリンク
  hideNav: '.next-posts-link', //次のページへのリンクを非表示
  button: '.view-more-button', //記事を読み込むトリガーとなる要素を指定(ボタン押下で読み込む場合)
  scrollThreshold: true, //スクロールで読み込む(デフォルトはtrue)
  status: '.page-load-status', //ステータス部分の要素
  history: 'false' //履歴を残すかどうか(デフォルトはfalse)
});

ボタンクリックで次の投稿を読み込むようにする場合は、投稿一覧ページで下記のようにボタンや読み込み中、記事がない場合の表示などを調整します。

<button class="view-more-button" type="button">もっと見る</button>
<div class="page-load-status" style="display:none;">
  <div class="infinite-scroll-request">読み込み中</div>
  <p class="infinite-scroll-last">投稿がない場合</p>
  <p class="infinite-scroll-error">読み込むページがない場合(エラー)</p>
</div>

あとがき

実際にInfinite Scroll導入してみると、簡単に投稿一覧を無限スクロール化できます。

商用利用する場合はライセンスの購入が必要になりますので、詳しくは公式サイトをご参照ください。

WordPressの投稿一覧を無限スクロール化できるJavaScriptプラグイン「Infinite Scroll」