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

2018年9月15日 2018年9月15日

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が苦手な人でもカンタンに実装できるので初心者にもオススメ！
それでは早速、カテゴリーページの無限スクロール実装方法をご紹介します！

1 Infinite Scrollの実装方法
2 1ページしかない場合への対応

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>

</section>

各記事の要素には、あらかじめ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」で「次のページ」リンクを設置します。
リンク付きの「次ページへ »」というテキストが出力されます。

<!-- next_posts_linkの出力例 -->
<a href="http://example.com/category/wordpress/page/2/">次ページへ »</a>

1 2	<!-- 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>

<?php next_posts_link(); ?>

</span>

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

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

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

<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>

<button class="view-more-button" type="button">もっと見る</button>

<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>

</section>

<?php next_posts_link(); ?>

</span>

<button class="view-more-button" type="button">もっと見る</button>

<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>

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 } // 閉じるのを忘れずに！
?>