Infinite Scrollは次のページのコンテンツを読み込んで、無限スクロールを実現するJavaScriptプラグインです。デモページも用意されています。
Infinite Scrollを使って、WordPressの投稿一覧を無限スクロール化する方法をご紹介いたします。
Infinite ScrollでWordPressの投稿一覧を無限スクロールにする方法
ステップ1. JavaScriptファイルのダウンロードと読み込み
Infinite Scrollの公式サイトからinfinite-scroll.pkgd.min.jsをダウンロードします。
ファイルをサーバーに設置したら、投稿一覧ページでinfinite-scroll.pkgd.min.jsを読み込みます。
※infinite-blog.jsはInfinite Scrollのオプションなどを指定するファイルです。後述します。
function my_enqueue_scripts() {
if (is_home() || is_category() || is_tag()) {
wp_enqueue_script('infinite-scroll-js', get_theme_file_uri('/assets/js/lib/infinite-scroll.pkgd.min.js'), array('jquery'), filemtime(get_theme_file_path('/assets/js/lib/infinite-scroll.pkgd.min.js')), true);
}
if (is_home() || is_category() || is_tag()) {
wp_enqueue_script('infinite-blog-js', get_theme_file_uri('/assets/js/infinite-blog.js'), array('jquery'), filemtime(get_theme_file_path('/assets/js/infinite-blog.js')), true);
}
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');ステップ2. 投稿一覧に次のページへのリンクを設置
投稿一覧ページに次のページへのリンクを設置します。
<div class="next-posts-link">
<?php next_posts_link(); ?>
</div>ステップ3. Infinite Scrollのオプションを指定
最後にステップ1で読み込みを追加した、infinite-blog.jsに以下のようなコードを記述します。クラス名などは適宜変更してください。
var infScroll = new InfiniteScroll( '.post__container', { //記事を挿入していく要素
append: '.post__item', //各投稿の要素
path: '.next-posts-link a', //次のページへのリンク
hideNav: '.next-posts-link', //次のページへのリンクを非表示
button: '.view-more-button', //記事を読み込むトリガーとなる要素を指定(ボタン押下で読み込む場合)
scrollThreshold: true, //スクロールで読み込む(デフォルトはtrue)
status: '.page-load-status', //ステータス部分の要素
history: 'false' //履歴を残すかどうか(デフォルトはfalse)
});ボタンクリックで次の投稿を読み込むようにする場合は、投稿一覧ページで下記のようにボタンや読み込み中、記事がない場合の表示などを調整します。
<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導入してみると、簡単に投稿一覧を無限スクロール化できます。
商用利用する場合はライセンスの購入が必要になりますので、詳しくは公式サイトをご参照ください。