WordPressの投稿一覧に無限スクロールを実装する方法

WordPressの投稿一覧ページに、jQueryプラグイン「Infinite Scroll」を使って無限スクロールを実装する方法をご紹介いたします。

無限スクロールというのは、スクロールしていくと次々に要素が読み込まれていくアレです。本来であれば、ナビゲーションから次のページへ移動して過去の投稿を表示するところが、スクロールするだけで読み込んでくれるようになります。表示するコンテンツがなくなるまで読み込み続けるので、無限に続くような印象から無限スクロールと呼ばれています。

スポンサードリンク

プラグインなしでWordPressの投稿一覧に無限スクロールを実装する方法

まずは、jQueryプラグイン「Infinite Scroll」をCDNから読み込みます。jQuery依存なのでjQuery本体の読み込みも必要です。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>

GitHubからファイルをダウンロードして自サーバーに設置してもOKです。GitHubでは、以下のファイルを読み込むように説明されていますが、読み込むファイルはどちらでも大丈夫です。

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

続いて、投稿一覧のナビゲーション部分のクラスやIDを確認しておきましょう。今回実装した環境では、ざっくりと以下のような構造になっていました。


<div class="news-list-wrapper">
  <div class="news-list">記事</div>

  <div class="archives-nav">
    <a href="" class="next">次へ</a>
  </div>
</div>

.news-list内にタイトルや投稿日などが表示され、ナビゲーションは.archives-navで内包されています。

最後に、Infinite Scrollを実行します。


<script>
jQuery(function($){
  $('.news-list-wrapper').infinitescroll({
    loading: {
      finishedMsg: "<div class='list-finished-message'>一覧の最後に到達しました</div>", //最後まで到達した時のメッセージ
      msgText: "<div class='list-load-message'>ロード中です･･･</div>" //ロード中のメッセージ
    },
    navSelector : ".archives-nav", //ナビゲーションのクラスもしくはID
    nextSelector : ".archives-nav a.next", //ナビゲーションの「次へ」のクラスもしくはID
    itemSelector : ".news-list" //表示させる投稿のクラスもしくはID
  });
});
</script>

読み込まれた要素が表示される領域を「$(‘.news-list-wrapper’).infinitescroll({」の部分で指定し、ナビゲーションのクラス(もしくはID)や表示させる投稿のクラス(もしくはID)等を指定していきます。

その他オプションについての詳細は、GitHubの説明をご参照ください。

あとがき

以前、「Infinite-Scroll」という同じ名前のWordPressプラグインをご紹介しましたが、WordPressプラグインを使わなくても結構簡単に実装可能です。

サイトに無限スクロールを導入したい時は、ぜひご活用いただければと思います。

WordPressの投稿一覧に無限スクロールを実装する方法