【WordPress】「もっと見る」ボタンで読み込む無限スクロールを設置するよ！

こんにちは！
今回は無限スクロールの王道JSプラグイン、「Infinite Scroll」を
WordPressの記事一覧で設置します。

先日実際に設置した際、読み込む要素のサイズやらをjQueryで制御していたため、
「もっと見る」ボタンで表示された要素は崩れてしまっていました。
解決策としては、要素の処理を読み込み後に行うと綺麗に表示されます。

当たり前ですが、本家サイトが一番丁寧に解説しているので一読すると良いですよ。

ちなみにInfinite ScrollはAjax（非同期通信）で要素を読み込みます。
Ajaxのことを知りたい方は、下記の記事がめちゃめちゃ分かりやすく解説してくれています。
Ajaxとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

それではやっていきましょう。

HTML

<div class="postWrap">
	<?php if(have_posts()): while(have_posts()):the_post(); ?>
	 <div class="post"></div>
	 <div class="post"></div>
	 <div class="post"></div>
	<?php endwhile; endif; ?>
</div>

JSのリンクを設置

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

ダウンロードでも↓

圧縮してるやつ： infinite-scroll.pkgd.min.js
してないやつ：infinite-scroll.pkgd.js

ページネーションを作る

要素を取り込むタイミングは、自動で「次ページ」がクリックされた時です。
クリックされると次ページの要素が取り込まれます。
そのために、まずは基本的なページネーションを作っていきます。

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '<< 前へ',
        'next_text' => '次へ >>',
    )); ?>
</div>

「もっと見る」ボタンを作る

要素を読み込むタイミングとなる「もっと見る」ボタンを作ります。
ページが1ページのみだったり一番最後のページの時はこのボタンは表示されないようにします。

CSSは各自書いてください。

<?php
// 現在のページ数
global $paged;
if( empty( $paged ) ) $paged = 1;
    
// 全ページ数
global $wp_query;
$pages = $wp_query -> max_num_pages;
if( !$pages ) {
    $pages = 1;
}
// ページが1ページのみ＆最後のページでは表示しない
if( $pages != 1 && $paged < $pages ) {
    echo ' 
    <div class="moreButton"><button id="more-button" type="button">もっと見る</button></div>
    <div class="scroller-status">
        <div class="infinite-scroll-request">読み込み中</div>
        <p class="infinite-scroll-last">これ以上は記事がありません</p>
        <p class="infinite-scroll-error">読み込むページはありません</p>
    </div>
    ';
}			
 ?>

Javascriptを設置

<script>
var infScroll = new InfiniteScroll( '.postWrap', { //大枠のセレクタ
    append: '.post', //読み込むボックスたちのセレクタ
    path: '.pagination .next', //次ページへ飛ぶための「次へ」ボタンのセレクタ
    hideNav: '.pagination', //ページネーションのセレクタ
    button: '.moreButton', //「もっと見る」ボタンのセレクタ
    scrollThreshold: false, //自動で次のページを読み込まないようにする
    status: '.scroller-status', // ステータスのセレクタ
    history: 'false', //読み込み後のURLを変更しない
});
infScroll.on( 'append', function( response, path, items ) {
	//読み込み後に何かしたい場合はここに書く
});
</script>

scrollThreshold
trueにすると「もっと見る」ボタンがなくても要素をどんどん読み込んでくれます。
history
trueにすると要素を読み込んだ時にURLが変わります。
「mamenari.com/works」→「mamenari.com/works/2/」

終わりに

そもそも無限スクロールって本当にいいの？という問題はあります。
が、要素がどんどん読み込まれてゆくことで、ユーザーは気を散らすことがなく閲覧に没頭できます。
なによりスマートですよね！

それでは！