WordPressにプラグイン無しで無限スクロールを実装する方法
プラグインなしでWordPressに無限スクロールを実装する方法です。WordPressの無限スクロールプラグインは数多くありますが、プラグイン依存するとコンフリクト起きたり、アップデートが面倒だったりするので手動で実装することをオススメします。
» デモ
» ダウンロード(Github)
Infinite Scrollをヘッダーで読み込み
<!-- infinite scroll -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
無限スクロール用のナビを設置する
<div class="pagenavi">
<?php posts_nav_link(); ?>
</div>
Infinite Scrollを下記のように実行する
<script type="text/javascript">
jQuery(function($){
$('#read-more').infinitescroll({
navSelector : ".pagenavi", // ナビゲーション要素を指定
nextSelector : ".pagenavi a", // ナビゲーションの「次へ」の要素を指定
itemSelector : ".each-post" // 表示させる要素を指定
});
});
</script>
補足:オプションを設定したい場合
<script type="text/javascript">
jQuery(function($){
$('#read-more').infinitescroll({
loading: {
finishedMsg: "<span class='finished_message'>リストの最後に到達しました。</span>",
msgText: "<span class='message_text'>ロード中です・・・</span>" //最後の項目の後にはカンマを付けない
},
navSelector : ".pagenavi", // ナビゲーション要素を指定
nextSelector : ".pagenavi a", // ナビゲーションの「次へ」の要素を指定
itemSelector : ".each-post" // 表示させる要素を指定
});
});
</script>