ページネーション（ページャー）の追加方法

ホームの記事の一覧で、前の記事に移動するリンクは「その他の投稿」となっています。

ちょっとそっけないというか、分かりにくいですよね？

これを以下のようなページネーション（ページャー）に変更する方法を解説します。

ページネーションjavascript

先ず、javascriptを作成くださった方のブログをご覧ください。

参考ブログ様

Bloggerテンプレート自作カスタム【Blogger自作ページネーション】

上記ブログのコードを使って、上記ブログ通りにやればページネーションを表示させることができます。

一応、当ブログでも解説していきますね。

HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。

HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。

ページネーションを追加するHTML編集

HTML編集画面で</body>を検索します。

その直ぐ上の部分にコードを挿入します。

当ブログで導入しているコードは以下になります。

長いですが、コピペすれば当ブログと同じページネーションが作成できます。

ただ色については変更した方が良いです。

CSSの部分にコメントアウトで日本語の説明も加えているので、変更を加える時の参考にしてみてください。

<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
/*<![CDATA[*/
const maxResults=10; /*投稿記事の一覧の表示数*/
const dispPage=3;
const queryMaxResults=maxResults*10; /*投稿記事の一覧の表示数*/
const textQuery=getUrlParam('q');
const textLabel=location.pathname.split('/search/label/')[1]||'';
const start=parseInt(getUrlParam('start'))||0;
let sumcnt=parseInt(getUrlParam('sumcnt'))||0;
if(start>sumcnt) sumcnt=start+maxResults;
document.addEventListener('DOMContentLoaded',setIndexPager);
function setIndexPager(){
if(textQuery){
setIndexPagerQuery();
return;
}
if(sumcnt>0){
setHtmlPager();
return;
}
let feedUrl='/feeds/posts/summary';
if(textLabel) feedUrl+='/-/'+textLabel;
feedUrl+='?alt=json&max-results=1';
fetch(feedUrl)
.then(response=>response.json())
.then(json=>{
sumcnt=parseInt(json.feed.openSearch$totalResults.$t)||0;
setHtmlPager();
return;
})
.catch(error=>console.log(error));
}
function setIndexPagerQuery(){
if(sumcnt>0&&(sumcnt%queryMaxResults)!=0){
setHtmlPager();
return;
}
let feedUrl='/feeds/posts/summary?alt=json&q='+textQuery+'&max-results=1&start-index='+(sumcnt+queryMaxResults+1);
fetch(feedUrl)
.then(response=>response.json())
.then(json=>{
let totalResults=parseInt(json.feed.openSearch$totalResults.$t)||0;
if(totalResults==1){
sumcnt+=queryMaxResults;
setHtmlPager();
return;
}
feedUrl='/feeds/posts/summary?alt=json&q='+textQuery+'&max-results='+(queryMaxResults-maxResults+1)+'&start-index='+(sumcnt+1);
fetch(feedUrl)
.then(response=>response.json())
.then(json=>{
let totalResults=parseInt(json.feed.openSearch$totalResults.$t)||0;
sumcnt+=totalResults;
setHtmlPager();
})
.catch(error=>console.log(error));
})
.catch(error=>console.log(error));
}
function setHtmlPager(){
let pagerobj=document.getElementById('blog-pager');
if(!pagerobj) return;
let currentPage=start/maxResults+1;
let totalPage=Math.ceil(sumcnt/maxResults);
let html='';
for(let i=1;i<=totalPage;i++){
if(i==currentPage){
html+='<span id="pager-current">'+i+'</span>';
}else if(i==1){
html+='<a href="#" class="pager-a" onclick="return pager('+(currentPage-1)+')"><</a>';
html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
}else if(i==totalPage){
html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
html+='<a href="#" class="pager-a" onclick="return pager('+(currentPage+1)+')">></a>';
}else if(Math.abs(i-currentPage)<dispPage){
html+='<a href="#" class="pager-a" onclick="return pager('+i+')">'+i+'</a>';
}else if(Math.abs(i-currentPage)==dispPage){
html+='‥‥';
}
}
pagerobj.innerHTML=html;
}
function pager(targetPage){
if(textQuery){
location.href='/search?q='+textQuery+'&max-results='+maxResults+'&by-date=true&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
}else if(targetPage==1&&textLabel){
location.href=location.pathname;
}else if(targetPage==1){
location.href='/';
}else{
let feedUrl='/feeds/posts/summary';
if(textLabel) feedUrl+='/-/'+textLabel;
feedUrl+='?alt=json&max-results=1&start-index='+(targetPage-1)*maxResults;
fetch(feedUrl)
.then(response=>response.json())
.then(json=>{
let pubDate=json.feed.entry[0].published.$t;
pubDate=encodeURIComponent(pubDate.substring(0,19)+pubDate.substring(23,29));
let url='/search';
if(textLabel) url+='/label/'+textLabel;
location.href=url+'?updated-max='+pubDate+'&max-results='+maxResults+'&start='+(targetPage-1)*maxResults+'&sumcnt='+sumcnt;
})
.catch(error=>console.log(error));
}
return false;
}
function getUrlParam(key){
let searchlist=location.search.substring(1).split('&');
for(let i=0;i<searchlist.length;i++) if(searchlist[i].split('=')[0]==key) return decodeURI(searchlist[i].split('=')[1]);
return '';
}
/*]]>*/
</script>
</b:if>
<style>
#pager-current,.pager-a{
display:inline-block;
padding:1em 1em;
margin:0 .2em 1.5em;
border-radius:.5em; /*丸角*/
}
#pager-current{
color:inherit; /*現ページ文字色*/
background:rgba(255,255,255,0.1); /*現ページ背景*/
font-weight: bold; /*太文字*/
}
.pager-a{
color:inherit; /*別ページ文字色*/
background:#263238; /*別ページ背景*/
border:0px solid #999; /*別ページ枠線*/
}

.pager-a:hover{

box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2); /*別ページホバー影*/

}

</style>

これでページネーションが表示されます。

ただこのままだと少し気になる点があるので、次項で確認しましょう。

「その他の投稿」をコメントアウト

ページネーションが表示されるようにはなりましたが、ページネーションの部分に元の「その他の投稿」の文字がチラ見えすることがあります。

少し気になりますし、表示速度も遅くなってしまうので該当のコードをコメントアウトで無効にします。

HTML編集画面右上のウィジットに移動を選択します。

そこから投稿ウィジットを選択します。

Emporioの場合は【Blog1】になります。

【Blog1】を選択してから<data:messages.morePosts/>で検索します。

（全体で同じコードが２つありますが、Blog1内にある方になります。）

このコードをコメントアウトで無効にします。

<data:messages.morePosts/>

　　↓↓↓

これで「その他の投稿」の文字が表示されることなく、スムーズにページネーションが表示されるようになります！

検索結果やラベル表示のページネーションを正常に表示する方法

ページネーションは検索結果やラベル表示でも有効です。

ただBloggerの初期設定だと検索結果やラベル表示は20件表示されることから、表示が上手くいかなくなります。

例えば投稿記事の一覧の表示件数が10件で、ページネーションの指定も10件だとします。

検索結果を表示すると1ページ目の表示は1-20件、2ページ目の表示は11-30件、3ページ目の表示は21-40件……というように記事が重複して表示されてしまいます。

以上のことから、下記の件数は揃える必要があります。

投稿記事の一覧の表示件数
検索結果の表示件数
ラベル一覧の表示件数
ページネーションの指定件数

検索結果とラベルの表示件数の変更は以下の記事で解説しています。

参考記事

検索結果とラベルの表示件数変更方法

少し手間ですが、これでページネーションが正常に表示されるようになります！

Bloggerでブロガーになろう

このブログを検索