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。
広告
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─
この記事をシェアできます。