MTのページ分割プラグイン PageBute導入

MovableType インターネット
リストページに掲載する件数を分割してくれるPageButeプラグイン。 静的ペー...

リストページに掲載する件数を分割してくれるPageButeプラグイン。

当サイトでは記事数が多い「カテゴリ別記事リスト」ページで活用している。

00931.png

上の例では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」ファイルを開く。

00932.png

13行目の「html」を「php」に変更。プラグインをサーバーに送った後は再構築するだけで、正規URLが反映される。

$$output =~ s/(<link rel="canonical" href="[^"]+)"/$1index_$page.php"/ if $page ne 1;

以上、サイトのテンプレートを入れ替えた際、これらの記述まで誤って消してしまったので、今後の自分のためにも情報をまとめて記録してみた次第。

posted on June 6, 2021
-

related entries