次のページの記事を無限に読み込む「Infinite Scroll」の実装方法【WordPress】

WordPressのカテゴリーページは、記事が表示しきれなくなると「次のページへ」のリンクや「ページネーション」をたどると、過去の記事を見つけることができますよね。
デフォルト設定では、1ページにつき記事数は10件です。
(管理画面の「設定 → 表示設定」で変更できます)
ページ遷移するので、ブラウザの履歴にも残ります。
https://example.com/category/wordpress/page/3/
https://example.com/category/wordpress/page/4/
…

カテゴリー内で古い記事をさかのぼって見ていきたいんだが、いちいちページ全部を読み込むから表示が遅くてイラつくわ~
記事の一覧だけが必要なのに、よけいなデータも読み込むのでその分遅いし、スマホなら通信量も掛かります。
普通のままでは、古い記事をさかのぼっていくハードルが少しだけ高い気がしますよね。
そこで「Infinite Scroll」を使えば、ページ遷移せずに過去の記事を読み込むことが出来ます。
過去の記事をサクサクっと呼び出せるので、時間をかけずにカテゴリーの記事を見てもらえますね。
コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメ!
それでは早速、カテゴリーページの無限スクロール実装方法をご紹介します!
目次
Infinite Scrollの実装方法
archive.php、category.phpなどのテンプレートファイルを編集します。
テーマによっては、tag.phpなどテンプレート階層ファイルは他にもあるかもしれません。
必要に応じて、実装したいページに同じ変更を加えてください。
念の為、ファイルをコピーして「category_backup.php」など名前を変えてバックアップしておきましょう。
下記HTMLは、記事一覧の一例です。
<section class="container"> <article class="post">...</article> <article class="post">...</article> <article class="post">...</article> </section>
各記事の要素には、あらかじめclassを指定しておきます。
ここでは”post“と指定して進めていきます。
各記事を囲んでいる要素のclassには”container“と指定しています。
この”container“内に「次のページの記事」が挿入されていくように実装します。
実際に実装するには、Wordpressのテーマごとに既に指定されているclassやidを利用してOKです。
「次のページ」リンクのclassを確認
ページネーションの「次のページ」リンクに指定されているclass名を確認します。
classの確認は、Chromeなら簡単にできます。
ページネーションのあるページをChromeで表示させて、キーボードの「F12」を押します。
画面の下に別枠が表示されますね?これはChromeの「デベロッパーツール」です。
デベロッパーツールを開いたら、左上にあるアイコンをマウスでクリックします。

デベロッパーツールが開いている状態
このアイコンですね。
エレメント選択モードになるので、調べたい要素までマウスカーソルをあわせましょう。
すると、該当する部分のソースコードがハイライトされます。
Chromeのデベロッパーツールは、WEB制作の作業にとても便利な機能です。
他にも色々な機能がたくさんありますが、ここではこれだけ覚えておけばOKです。
WordPressのテーマによっては、ページネーションのソースは異なる場合があります。
ページネーションに「次のページ」リンクが無い場合は、自分で追加する必要があります。
ページネーションを独自に実装するなら、こちらの記事も参考にどうぞ!
新たに「次のページ」リンクを設置する
WordPressのテンプレートタグ「next_posts_link」で「次のページ」リンクを設置します。
リンク付きの「次ページへ »」というテキストが出力されます。
<!-- next_posts_linkの出力例 --> <a href="http://example.com/category/wordpress/page/2/">次ページへ »</a>
後でこのリンクをJSで指定する為、classを指定したspan
で囲っておきます。
<span class="next_posts_link"> <?php next_posts_link(); ?> </span>
ボタンとステータス表示ブロックを設置
次のページの記事を呼び出すボタンと、現在のステータスを表示するブロックを追加します。
そのままコピペしてください!テキストはお好みで変更可能です。
<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-request
、.infinite-scroll-last
、.infinite-scroll-error
は、それぞれ「ステータスを表す機能」の為、「Infinite Scroll」側でデフォルト指定しているclassです。
.page-load-status
のブロックはdisplay:none
であらかじめ非表示にしておきます。
一旦ソースを全部まとめるとHTML構造はこのようになります。
<section class="container"> <article class="post">...</article> <article class="post">...</article> <article class="post">...</article> </section> <span class="next_posts_link"> <?php next_posts_link(); ?> </span> <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>

続けて、Javascriptの設定をしていきますよ!
JavaScriptプラグインの読み込み・実行
公式サイトへ行き、最新版をダウンロードするかCDNで読み込みます。
https://infinite-scroll.com
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
続けて実行スクリプトを追加します。
上記プラグイン読み込みの次の行にコピペします。
<script> var infScroll = new InfiniteScroll( '.container', { // 記事を追加するブロックのclassを指定 append: '.post', // 記事ブロックを指定 path: '.next_posts_link a', // 次のページリンクを指定 hideNav: '.next_posts_link', // 次のページリンクを非表示にする button: '.view-more-button', // 次のページの記事ブロックを読み込むボタンを指定 scrollThreshold: false, // スクロールで自動的に読み込まれる動作を解除 status: '.page-load-status', // ステータスのブロックを指定 history: 'false' // ブラウザのアドレスを変更しない }); </script>
無限スクロールの注意点
scrollThresholdをtrueにする、またはこの行自体を削除すると、スクロールによって自動的に次の記事が読み込まれます。
記事が自動で読み込まれていくため、いつまでもフッターにたどり着けなくなります。
自動で読み込ませる場合には、この点に注意して設定してください。
ここまで出来たら、変更したテンプレートファイルをアップして確認してみましょう。
「もっと見る」ボタンを押すと、次のページの記事がページ遷移無しで追加されたら成功です!
1ページしかない場合への対応
記事が少なくページネーションが1ページだったり、読み込んでいき最後のページまで到達すれば「もっと見る」ボタンは不要です。
Infinite(無限)といっても、記事は有限ですので最後は空になりますよね。
その場合、PHPで少々ごにょごにょっと「条件分岐」させて、ボタンとステータスを非表示にします。
<?php global $paged; if( empty( $paged ) ) $paged = 1; global $wp_query; $pages = $wp_query -> max_num_pages; if( !$pages ) { $pages = 1; } // 1ページしかない or 最後のページでは出力しない条件分岐をさせる if( $pages != 1 && $paged < $pages ) { ?> <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> <?php } // 閉じるのを忘れずに! ?>
これで「もっと見る」が必要ない時には表示されません。
参考サイト:
https://firstlayout.net/install-infinite-scroll-in-wordpress/