WordPressの投稿一覧ページに、jQueryプラグイン「Infinite Scroll」を使って無限スクロールを実装する方法をご紹介いたします。
無限スクロールというのは、スクロールしていくと次々に要素が読み込まれていくアレです。本来であれば、ナビゲーションから次のページへ移動して過去の投稿を表示するところが、スクロールするだけで読み込んでくれるようになります。表示するコンテンツがなくなるまで読み込み続けるので、無限に続くような印象から無限スクロールと呼ばれています。
プラグインなしでWordPressの投稿一覧に無限スクロールを実装する方法
まずは、jQueryプラグイン「Infinite Scroll」をCDNから読み込みます。jQuery依存なのでjQuery本体の読み込みも必要です。
1 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script> |
GitHubからファイルをダウンロードして自サーバーに設置してもOKです。GitHubでは、以下のファイルを読み込むように説明されていますが、読み込むファイルはどちらでも大丈夫です。
1 | <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> |
続いて、投稿一覧のナビゲーション部分のクラスやIDを確認しておきましょう。今回実装した環境では、ざっくりと以下のような構造になっていました。
1 2 3 4 5 6 7 | <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を実行します。
01 02 03 04 05 06 07 08 09 10 11 12 13 | <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プラグインを使わなくても結構簡単に実装可能です。
サイトに無限スクロールを導入したい時は、ぜひご活用いただければと思います。