リストページに掲載する件数を分割してくれるPageButeプラグイン。
当サイトでは記事数が多い「カテゴリ別記事リスト」ページで活用している。
上の例では5ページ目を閲覧中。
テンプレート
リスト記述箇所にタグを追加。
- <mt:PageContents> ～ </mt:PageContents> で挟む
- 閉じタグ </mt:Entries> の前に <mt:PageSeparator> を挿入
<mt:PageContents> の「count=」で1ページに表示する件数を、「navi_count=」はナビゲーション部分の移動ページを幾つ表示するかの指定。「navi_count="5"」にすると、上画像の通り、閲覧中の5ページ目の前後を含めて「3」「4」「5」「6」「7」の五つが表示される。
テンプレートの基本形はこんな感じ。
<ul> <mt:PageContents count="30" navi_count="5"> <mt:Entries> <li><a href="<mt:EntryPermalink>"><mt:EntryTitle></a></li> <mt:PageSeparator> </mt:Entries> </mt:PageContents> </ul>
ナビゲーション部分のテンプレート。
- <mt:Pagination> ～ <mt:Pagination> で挟む
- ページURLは <mt:PaginationLink> タグ、他に前後ページ用タグもあり
- ページ番号は <mt:PaginationLink> タグに「element="number"」を付けると出力される
当サイトで使用しているタグ。
<mt:Pagination> <mt:PaginationHeader> <nav class="navi navi-page"> </mt:PaginationHeader> <mt:IfPaginationFirst><a href="<mt:PaginationFirst>"><div class="navi-entry">« top</div></a></mt:IfPaginationFirst> <mt:IfPaginationPrev><a href="<mt:PaginationPrev>"><div class="navi-entry">« prev</div></a></mt:IfPaginationPrev> <mt:IfPaginationCurrent> <a class="current"><div><mt:PaginationLink element="number"></div></a><mt:Else> <a href="<mt:PaginationLink>"><div><mt:PaginationLink element="number"></div></a></mt:IfPaginationCurrent> <mt:IfPaginationNext><a href="<mt:PaginationNext>"><div class="navi-entry">next »</div></a></mt:IfPaginationNext> <mt:ifPaginationLast><a href="<mt:PaginationLast>"><div class="navi-entry">last »</div></a></mt:ifPaginationLast> <mt:PaginationFooter> </nav> </mt:PaginationFooter> </mt:Pagination>
スタイルシート
参考までに、ページナビゲーション部分のスタイル。表示中のページ番号に class「current」を割り当てて、目立つように背景色を設定。
.navi{
display: flex;
flex-wrap: wrap;
margin: 15px 0;
}
.navi a{
flex: 1;
margin: 5px;
padding: 5px 10px;
border: solid 1px #cccccc;
border-radius: 5px;
max-width: 100%;
}
.navi-entry{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.navi-page{
text-align: center;
}
.current{
color: #999999;
background: #f5f5f5;
}
テンプレート ページタイトル
ブラウザで表示されるページタイトルが、記事リストの1ページ目も2ページ以降も同じになってしまう。
ページ番号が出力されるよう、<head> ～ </head> 間にある<title>タグ部分に追記。
<mt:IfPageBefore> page <mt:PageCount></mt:IfPageBefore>
テンプレートはこんな感じ。
<title><mt:ArchiveTitle encode_html="1"><mt:IfPageBefore> page <mt:PageCount></mt:IfPageBefore></title>
テンプレート 正規URL（CanonicalURL）
<head> ～ </head> 間にある <mt:CanonicalURL> が、これまた1ページ目も2ページ以降も同じになってしまう。2ページ目は「index_2.php」となるのだが、PageButeプラグインには付与する機能が無い。
<link rel="canonical" href="<mt:CanonicalURL>">
別途配布されているプラグインに頼る。
このプラグインは拡張子「html」にしか対応していないため、「php」にしている場合は修正が必要。「lib/PageButeCanonicalChanger/CMS.pm」ファイルを開く。
13行目の「html」を「php」に変更。プラグインをサーバーに送った後は再構築するだけで、正規URLが反映される。
$$output =~ s/(<link rel="canonical" href="[^"]+)"/$1index_$page.php"/ if $page ne 1;
以上、サイトのテンプレートを入れ替えた際、これらの記述まで誤って消してしまったので、今後の自分のためにも情報をまとめて記録してみた次第。