はてなブログでinfinite scrollを導入するのでR

WordPressでinfinite scroll(無限スクロール)を導入するには、プラグインでできるのでR。

しかし、

はてなブログは、はてなブログというシステムなので、infinite scrollが導入できていなかったのでR。

しかし、

ここの方の記事と、ここの方の記事で、infinite scrollが導入できたのでR。

おふたりはオートページャーと呼んでいるのでR。そのコードは、

こちらの方が、

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
	$("#main").append('<div id="loadelement" data-loading="false"></div>');
	$(window).on('scroll', function () {
		var loadElem = $("#loadelement")[0];
		var target = $(loadElem).offset().top - $(document).scrollTop() - $(window).height();
		if (target < 10 && loadElem.dataset.loading != "true") {
			loadElem.dataset.loading = true;
			$(loadElem).text("読み込み中");
			var nexturl = $('.pager-next a:not([data-loaded="done"])[rel="next"]')[0];
			if (typeof (nexturl) === 'undefined') {
				$(loadElem).before('<div>続きはありません</div>');
				$(loadElem).text("");
				return;
			}
			nexturl.dataset.loaded = "done";
			$.ajax({
				url: nexturl.href,
				type: 'GET',
				dataType: 'html',
			})
				.done(function (data) {
					$(loadElem).before('<div>次のページを読み込みました</div>');
					$(loadElem).before($('#main', $(data)).html());
					loadElem.dataset.loading = false;
					$(loadElem).text("");
					Hatena.Locale.setupTimestampUpdater(); 
					FB.XFBML.parse(); 
					gapi.plusone.go(); 
					twttr.widgets.load(); 
				})
				.fail(function (data) {
					//loadElem.dataset.loading = true;
				});
		}
	});
});
</script>

で、こちらの方は、それを小改編した

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<script>
$(function () {
	$("#main").append('<div id="loadelement" data-loading="false"></div>');
	$(window).on('scroll', function () {
		var loadElem = $("#loadelement")[0];
		var target = $(loadElem).offset().top - $(document).scrollTop() - $(window).height();
		if (target < 10 && loadElem.dataset.loading != "true") {
			loadElem.dataset.loading = true;
			$(loadElem).text("読み込み中");
			var nexturl = $('.pager-next a:not([data-loaded="done"])[rel="next"]')[0];
      $('.page_loaded').hide();
			if (typeof (nexturl) === 'undefined') {
				$(loadElem).before('<div>続きはありません</div>');
				$(loadElem).text("");
				return;
			}
			nexturl.dataset.loaded = "done";
      $('div.autopagerize_insert_before').hide(); 
			$.ajax({
				url: nexturl.href,
				type: 'GET',
				dataType: 'html',
			})
				.done(function (data) {
					$(loadElem).before('<div class="page_loaded">次のページを読み込みました</div>');
					$(loadElem).before($('#main', $(data)).html());
					loadElem.dataset.loading = false;
					$(loadElem).text("");
					Hatena.Locale.setupTimestampUpdater(); 
					FB.XFBML.parse(); 
					gapi.plusone.go(); 
					twttr.widgets.load(); 
				})
				.fail(function (data) {
					//loadElem.dataset.loading = true;
				});
		}
	});
});
</script>

なのでR。ちなみに、挿入かしょは、「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」なのでR。

ただし、

このままでは記事のページでも、次のページを読み込んでしまうのでR。

そこで、これをさらに、小改良したのでR。

<script>
$(function () {
if(document.body.classList.contains('page-index')){
	$("#main").append('<div id="loadelement" data-loading="false"></div>');
	$(window).on('scroll', function () {
		var loadElem = $("#loadelement")[0];
		var target = $(loadElem).offset().top - $(document).scrollTop() - $(window).height();
		if (target < 10 && loadElem.dataset.loading != "true") {
			loadElem.dataset.loading = true;
			$(loadElem).html("<div class='center'><img src='ぐるぐるのGIFのURL.gif' /></div>");
			var nexturl = $('.pager-next a:not([data-loaded="done"])[rel="next"]')[0];
      $('.page_loaded').hide();
			if (typeof (nexturl) === 'undefined') {
				$(loadElem).before('<div>続きはありません</div>');
				$(loadElem).text("");
				return;
			}
			nexturl.dataset.loaded = "done";
      $('div.autopagerize_insert_before').hide(); 
			$.ajax({
				url: nexturl.href,
				type: 'GET',
				dataType: 'html',
			})
				.done(function (data) {
					$(loadElem).before('');
					$(loadElem).before($('#main', $(data)).html());
					loadElem.dataset.loading = false;
					$(loadElem).text("");
					Hatena.Locale.setupTimestampUpdater();
					FB.XFBML.parse(); 
					gapi.plusone.go(); 
					twttr.widgets.load(); 
				})
				.fail(function (data) {
					//loadElem.dataset.loading = true;
				});
		}
	});
}
});
</script>

とすると、表の記事一覧にだけオートページャーが適用されて、読み込みもぐるぐるGIFできたのでR。

ただし、

これが効くのは、document.body.classList.contains(‘page-index’)とあるように、page-indexのページだけなので、そこは注意がいるのでR。

ちなみに、page-indexの「次のページ」という表記が一瞬出るので、これを小改良して、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインcss」に、

.page-index .pager .pager-next :before {
  content: "オートで、"; 
}

とすれば、「次のページ」の表記が、「オートで、次のページ」となるのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。




月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。