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

2018年9月15日 2018年11月27日 Wordpressカスタマイズ /

WordPressのカテゴリーページは、記事が表示しきれなくなると「次のページへ」のリンクや「ページネーション」をたどると、過去の記事を見つけることができますよね。
デフォルト設定では、1ページにつき記事数は10件です。
(管理画面の「設定 → 表示設定」で変更できます)

ページ遷移するので、ブラウザの履歴にも残ります。

https://example.com/category/wordpress/page/2/
https://example.com/category/wordpress/page/3/
https://example.com/category/wordpress/page/4/
ゴリさんゴリさん

カテゴリー内で古い記事をさかのぼって見ていきたいんだが、いちいちページ全部を読み込むから表示が遅くてイラつくわ~

記事の一覧だけが必要なのに、よけいなデータも読み込むのでその分遅いし、スマホなら通信量も掛かります。
普通のままでは、古い記事をさかのぼっていくハードルが少しだけ高い気がしますよね。

そこで「Infinite Scroll」を使えば、ページ遷移せずに過去の記事を読み込むことが出来ます
過去の記事をサクサクっと呼び出せるので、時間をかけずにカテゴリーの記事を見てもらえますね。

Infinite Scroll の DEMO

コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメ!
それでは早速、カテゴリーページの無限スクロール実装方法をご紹介します!

Infinite Scrollの実装方法

archive.phpcategory.phpなどのテンプレートファイルを編集します。
テーマによっては、tag.phpなどテンプレート階層ファイルは他にもあるかもしれません。
必要に応じて、実装したいページに同じ変更を加えてください。
念の為、ファイルをコピーして「category_backup.php」など名前を変えてバックアップしておきましょう。

下記HTMLは、記事一覧の一例です。

各記事の要素には、あらかじめclassを指定しておきます。
ここでは”post“と指定して進めていきます。

各記事を囲んでいる要素のclassには”container“と指定しています。
この”container“内に「次のページの記事」が挿入されていくように実装します。

実際に実装するには、Wordpressのテーマごとに既に指定されているclassやidを利用してOKです。

「次のページ」リンクのclassを確認

ページネーションの「次のページ」リンクに指定されているclass名を確認します。

classの確認は、Chromeなら簡単にできます。
ページネーションのあるページをChromeで表示させて、キーボードの「F12」を押します。

画面の下に別枠が表示されますね?これはChromeの「デベロッパーツール」です。
デベロッパーツールを開いたら、左上にあるアイコンをマウスでクリックします。

デベロッパーツール

デベロッパーツールが開いている状態

このアイコンですね。

エレメント選択モードになるので、調べたい要素までマウスカーソルをあわせましょう。
すると、該当する部分のソースコードがハイライトされます

デベロッパーツールでソースコードを確認する

Chromeのデベロッパーツールは、WEB制作の作業にとても便利な機能です。
他にも色々な機能がたくさんありますが、ここではこれだけ覚えておけばOKです。

WordPressのテーマによっては、ページネーションのソースは異なる場合があります。
ページネーションに「次のページ」リンクが無い場合は、自分で追加する必要があります。

ページネーションを独自に実装するなら、こちらの記事も参考にどうぞ!

コピペでOK!WordPressでページネーションを実装する【WordPressカスタマイズ】

新たに「次のページ」リンクを設置する

WordPressのテンプレートタグ「next_posts_link」で「次のページ」リンクを設置します。
リンク付きの「次ページへ »」というテキストが出力されます。

後でこのリンクをJSで指定する為、classを指定したspanで囲っておきます。

参考:
テンプレートタグ/next posts link 

ボタンとステータス表示ブロックを設置

次のページの記事を呼び出すボタンと、現在のステータスを表示するブロックを追加します。
そのままコピペしてください!テキストはお好みで変更可能です。

.infinite-scroll-request.infinite-scroll-last.infinite-scroll-errorは、それぞれ「ステータスを表す機能」の為、「Infinite Scroll」側でデフォルト指定しているclassです。

.page-load-statusのブロックはdisplay:noneであらかじめ非表示にしておきます。

 

一旦ソースを全部まとめるとHTML構造はこのようになります。

フク先生フク先生

続けて、Javascriptの設定をしていきますよ!

JavaScriptプラグインの読み込み・実行

公式サイトへ行き、最新版をダウンロードするかCDNで読み込みます。
https://infinite-scroll.com

続けて実行スクリプトを追加します。
上記プラグイン読み込みの次の行にコピペします。

オプションの詳細はこちら(英語)

無限スクロールの注意点

scrollThresholdをtrueにする、またはこの行自体を削除すると、スクロールによって自動的に次の記事が読み込まれます。
記事が自動で読み込まれていくため、いつまでもフッターにたどり着けなくなります。
自動で読み込ませる場合には、この点に注意して設定してください。

 

ここまで出来たら、変更したテンプレートファイルをアップして確認してみましょう。
「もっと見る」ボタンを押すと、次のページの記事がページ遷移無しで追加されたら成功です!

1ページしかない場合への対応

記事が少なくページネーションが1ページだったり、読み込んでいき最後のページまで到達すれば「もっと見る」ボタンは不要です。
Infinite(無限)といっても、記事は有限ですので最後は空になりますよね。

その場合、PHPで少々ごにょごにょっと「条件分岐」させて、ボタンとステータスを非表示にします。

これで「もっと見る」が必要ない時には表示されません。

参考サイト:
https://firstlayout.net/install-infinite-scroll-in-wordpress/

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?