湘南在住。国立音楽大学卒業 / 96年生まれの2児母。ピアノ講師とWEB制作のお仕事をしています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。
ブログや記事を読んでいるとアーカイブページに出てくるページネーション。ワードプレスの実装ではほとんどがページネーションでの実装でしたが、デザインカンプにページネーションではなく「load more」と書かれたボタンのデザインをいただいたことがあります。
嫌な予感。ページネーションなら簡単だけど、load moreって…いわゆる「無限スクロール」？ですね？？ということでググるの大好きなんでもググっちゃうことワタクシ調べてみました。
※無限スクロールとは、画面をスクロールすると自動でコンテンツが出てくる機能のこと。ページの切り替えを行わずにコンテンツを読むことができる。
目次
Infinite Scrollで無限スクロールの実装
参考にさせていただいたのはこの記事です！
infinite scroll公式サイトからCDNの読み込み
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>JavaScriptにコードを追加
var infScroll = new InfiniteScroll( '.p-news__items', { // 記事を挿入していく要素を指定
append: '.p-news__item', // 各記事の要素
path: '.p-news__btn a', // 次のページへのリンク要素を指定
hideNav: '.p-news__btn', // 指定要素を非表示にする（ここは無くてもOK）
button: '.view-more-button', // 記事を読み込むトリガーとなる要素を指定
scrollThreshold: false, // スクロールで読み込む：falseで機能停止（デフォルトはtrue）
status: '.page-load-status', // ステータス部分の要素を指定
history: 'false' // falseで履歴に残さない
});htmlのコード
<div class="p-news__btn">
<?php the_post_navigation(); ?>
</div>
<button class="view-more-button" type="button">Load more</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>デザインなどは適宜cssで調節してみてください！
参考にさせていただいた記事では「次のページ」のテンプレートタグがnext_posts_linkになっていました。next_posts_linkで作るとどうしても挙動がおかしくなってしまうのでよく考えてみたのですが、あれ。next_posts_linkってそういえば使ったことがない！「次のページ」は the_post_navigation を普段使っていることに気が付きました。これで実装してみるとあら不思議〜すんなりいい感じの動きをしてくれました！
こちらの記事の最終更新日が2019年だったでの、バージョンが古いテンプレートタグだったのかなと予想しています。（next_posts_linkで調べてみると古い記事ばかり出てくるので）
なにはともあれ実装完了！参考になれば嬉しいです！
お疲れ様でした☕️