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

WordPressのカテゴリーページなどの記事のアーカイブページでは、最大表示件数（デフォルトでは10件）を超えると「次のページ」や「ページネーション」で、さらに過去の記事を遡ることが出来ます。

（管理画面の「設定 → 表示設定」で確認・変更ができます）

過去の記事はURLも変わり、ブラウザの履歴にも残ります。

ゴリさん

そのカテゴリーの過去記事を見たいんだけど、いちいちページ遷移してデータを読み込むから若干イラつくわ～…

記事情報だけが欲しいのに、サイドバーやヘッダー・フッターなどのデータも毎回読み込むから表示も遅い。

そこで本稿で紹介したいのは「Infinite Scroll」です。

これを実装すれば、ページ遷移せずに過去の記事を読み込むことが出来るので、過去の記事をサクサクっと呼び出せるようになります。

コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメです。

デモページはこちら
Infinite Scrollのデモページ

アーカイブページのHTML要素を確認

archive.php、category.php、taxonomy.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“と指定しておきます。

この２つの要素は、後述するJSの設定で必要なので控えておきます。

今使っているテーマで指定してあるclass名やid名をそのまま利用してもOKです。

※classやidを書き換えちゃうと、デザインが崩れるので注意です

実装イメージとしては、次のページにある記事（class=post）を、”container”の最後尾に次々と挿入していくカタチになります。

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

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

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

次のコードをコピペします。

<span class="next_posts_link">
    <?php next_posts_link(); ?>
</span>

するとこのように出力されます。

<span class="next_posts_link">
    <a href="http://example.com/category/abc/page/2/">次ページへ »</a>
</span>

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

もっと見るボタンとステータス表示を設置

次のページの記事を呼び出すボタンと、現在のステータスを表示する為のブロックを追加します。

次のコードを何も変更せずそのままコピペします。
classやstyle属性は変更しないでください。
文言だったらお好みで変更してもOKです。

<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であらかじめ非表示にしておきます。

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

<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の設定をしていきます～！

infinite scrollの設定

infinite scroll公式サイトから最新版をダウンロードもしくはCDNから読み込みます。

https://infinite-scroll.com

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

続けて実行JSを追加。
上の読み込みよりも下の行に、次のコードをコピペします。

<script>
var infScroll = new InfiniteScroll( '.container', { // 記事を挿入していく要素を指定
    append: '.post',             // 各記事の要素
    path: '.next_posts_link a',  // 次のページへのリンク要素を指定
    hideNav: '.next_posts_link', // 指定要素を非表示にする（ここは無くてもOK）
    button: '.view-more-button', // 記事を読み込むトリガーとなる要素を指定
    scrollThreshold: false,      // スクロールで読み込む：falseで機能停止（デフォルトはtrue）
    status: '.page-load-status', // ステータス部分の要素を指定
    history: 'false'             // falseで履歴に残さない
});
</script>

オプションの詳細はこちら（英語）

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

無限スクロールの注意点

scrollThresholdをtrue、またはこの行自体を削除すると、スクロールによって自動で次の記事が読み込まれます。
次の記事がある限り、延々と記事が読み込まれ続けるので、読み込まれる位置よりも下の部分になかなか辿り着かなくなります。

次のページが存在しない場合への対応

記事数が少ない場合、またはアーカイブの最後尾では「もっと見る」ボタンは不要です。
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/