番号付きページャーの設置

｜2024/05/09 ｜37
アイキャッチ
番号付きページャー

記事一覧ページの前後記事リンクを番号ページャーに置き換えるカスタマイズを紹介します。

こちらの Mr Blogger Tricks さんでで紹介されいるウィジェットを少し改造したものを導入します。

ファビコンMr Blogger Tricks
サムネイル
How To Add Next & Previous Numbered Pagination in Blogger
Blogger platform provides its users with a traditional set of blog elements. like Older / Newer or Previous / Next navigation to browse through the index.
https://mrbloggertricks.blogspot.com/2015/09/how-to-add-next-previous-numbered.html

コードの設置

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

以下のコードを、テーマのHTML編集ページにて </body> の上にコピペします。

<!--番号ページャー-->
<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
//<![CDATA[
const postperpage=10; //設定している1ページ当たりの表示件数に合わせて下さい
const numshowpage=5; //表示ボタン数
const upPageWord="<"; //次のページアイコン
const downPageWord=">"; //前のページアイコン

const home_page="/";let nopage,jenis,nomerhal,lblname1,urlactivepage=location.href;function loophalaman(a){let e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span class='showpageOf'>Page "+nomerhal+" of "+maksimal+"</span>";const s=parseInt(nomerhal)-1;for(nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+'">'+upPageWord+"</a></span>":"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>'),mulai>2&&(e+=" … "),f=mulai;f<=akhir;f++)nomerhal==f?e+='<span class="showpagePoint">'+f+"</span>":1==f?e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>':e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+f+');return false">'+f+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+f+');return false">'+f+"</a></span>";akhir<maksimal-1&&(e+="…"),akhir<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+"</a></span>");const n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");const t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager");for(h=0;h<t.length;h++)t[h].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function hitungtotaldata(a){const e=a.feed;b=parseInt(e.openSearch$totalResults.$t,10),loophalaman(b)}function halamanblogger(){const a=urlactivepage;if(-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?")):a.substring(a.indexOf("/search/label/")+14,a.length)),-1==a.indexOf("?q=")&&-1==a.indexOf(".html"))if(-1==a.indexOf("/search/label/")){jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata"),document.body.appendChild(a)}else{jenis="label",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?alt=json-in-script&callback=hitungtotaldata&max-results=1"),document.body.appendChild(a)}}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function finddatepost(a){post=a.feed.entry[0];const e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);d=encodeURI(e).replace("+","%2B"),c="page"==jenis?"/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage:"/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage,location.href=c}halamanblogger();
//]]>
</script>
 
<style>
.showpageNum a,
.showpage a,
.showpagePoint {
  font-family: arial;
  line-height: 1em;
  padding: .5em .7em;
  margin: 0 3px 5px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
}
.showpageNum a,
.showpage a {
  text-decoration:none;
  color: #333!important;
  background: #fff;
}
.showpagePoint {
  color: #fff!important;
  background: #6495ed;
}
.showpageNum a:hover,
.showpage a:hover {
  color: #fff!important;
  background: #6495ed;
}
.showpageOf {
  display: none;
}
</style>
</b:if>

各オプションについて

postperpage

この数値を、設定 → 投稿 →「メインページに掲載する投稿数の上限」の数値と同じにしてください。

設定

numshowpage

この数値は、表示中のページを含めたこの範囲のボタンの数のようです。但し偶数に設定した場合はそれ+1表示されるみたいで、全20ページで「5」に設定して⑤ページ目を開くとこのようになりますが、「4」でも同じ表示になりました。ちなみに当ブログでは「3」に設定しています。

番号ページャー説明

upPageWord / downPageWord

「<」「>」のような記号の代わりに「次へ」「前へ」などの文字列や FontAwesome のアイコンも使用できます。

FontAwesome を使用する場合は予め以下のコードを </head> の上に設置。(未導入の場合)

<link href='//use.fontawesome.com/releases/v5.15.4/css/all.css' rel='stylesheet' type='text/css'/>

オプションの所を以下のように変更します。

必ず //<![CDATA[ をオプションの下側に移動させてください。こうしておかないと2ページ目以降で「次ページアイコン」が2つ表示されてしまうバグが発生してしまいます。

<script>
postperpage=10; //設定している1ページ当たりの表示件数に合わせて下さい
numshowpage=5; //表示ボタン数
upPageWord=&quot;<i class='fas fa-angle-left'/>&quot;; //次のページアイコン
downPageWord=&quot;<i class='fas fa-angle-right'/>&quot;; //前のページアイコン

//<![CDATA[
(コード)
//]]>
</script>

ラベルページでの表示不具合対処方法

より有用な別の対処法を追記しました。詳しくは↓の追記を御覧ください

ファビコンBlogger Labo
サムネイル
【Blogger】番号付きページナビを導入して、ラベルページに適応されない場合の対処法【Vaster2】
Blogger（Vaster2）に番号付きページナビを導入して、ラベルページに適応されない場合の対処法についてまとめています。
https://blogger-learning-rab.blogspot.com/2018/03/bloggervaster2.html

実はラベルページで上手く表示されないという問題があったのですが、こちらの記事で解説されている手順で QooQ でも改善出来ました。尚、Vaster2 や QooQ 等の旧バージョンでは有効ですが、新バージョンのテーマでは適用できないようです。

具体的な手順はHTML編集で以下のコードを全て書き替えるだけです。

expr:href='data:label.url'
↓↓
expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'

書き換え後の数値「10」は先述の記事表示数と同じにして下さい。

2021/05/11 追記: ラベルページでの表示不具合に関する別の有用な対処法の紹介

こちらの「Google Blogger 問題解決」さんの記事に、SEO対策もされた別の有用な対処法が紹介されていました。

ファビコンBloggerテンプレート自作カスタム
サムネイル
Google Blogger のラベルの一覧の表示件数をurlを変更せずに変更する方法
Google Blogger のラベルをクリックすると、何もしないと20件一覧表示されます。URLを変更せずに件数を指定する方法です。以前は ?max-results=10 や &max-results=10 を付け加えていましたが、問題があるので直接プログラムを変更します。 ...
https://googlebloggertrouble.blogspot.com/2019/04/listmax-results.html

QooQ での変更手順

参考までに QooQ テーマでの変更手順を書いておきます。

①まず、↑の対処法で max-results タグを追加されている場合は、全て削除して元の状態に戻します。
②あとは HTML 編集にて <div id='list'> を探し、以下の様に変更するだけでOKです。

        <div id='list'>
          <b:loop values='data:posts' var='post'>
            <b:include data='post' name='post'/>
         </b:loop>
        </div>
↓↓
        <div id='list'>
          <b:loop values='data:posts' var='post' index='pi'>
            <b:if cond='data:blog.pageType == &quot;archive&quot; or data:pi lt 10'>
              <b:include data='post' name='post'/>
            </b:if>
         </b:loop>
        </div>

変更後の数字 10 は、設定 → 投稿 →「メインページに掲載する投稿数の上限」の数値と同じにしてください。