goodpageロゴ

無限スクロールを1番簡単にwordpressで実装する方法

無限スクロールを1番簡単にwordpressで実装する方法

投稿日:2024.02.27
最終更新日:2024.03.18
湘南在住。国立音楽大学卒業 / 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 と the_post_navigation

参考にさせていただいた記事では「次のページ」のテンプレートタグがnext_posts_linkになっていました。next_posts_linkで作るとどうしても挙動がおかしくなってしまうのでよく考えてみたのですが、あれ。next_posts_linkってそういえば使ったことがない!「次のページ」は the_post_navigation を普段使っていることに気が付きました。これで実装してみるとあら不思議〜すんなりいい感じの動きをしてくれました!

こちらの記事の最終更新日が2019年だったでの、バージョンが古いテンプレートタグだったのかなと予想しています。(next_posts_linkで調べてみると古い記事ばかり出てくるので)

なにはともあれ実装完了!参考になれば嬉しいです!

お疲れ様でした☕️

Contact

お問い合わせ

お見積もりやご相談は無料ですので
お気軽にお問い合わせください!

お問い合わせフォーム