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>
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。