2016/08/16

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>

WordPress