2016/08/16

WordPressにプラグイン無しで無限スクロールを実装する方法

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

WordPress

• Tweet
• LINE
• Read Later