Movable TypeでFC2ブログやJUGEMのようなページ送り（ページング）を実装する方法

Movable TypeのインデックスページをFC2ブログやJUGEMのように、特定のエントリー数毎にページ送りできる方法を探していたのですが「MTPaginate」と言うプラグインを導入することにより、インデックスページだけでなく月別やカテゴリーのアーカイブページも分割してページング処理を実装できることがわかりました。今回はその方法を紹介します。

※ 導入環境はMovable Type 4.21、MTPaginate 1.28で確認しています。

導入前の注意点

このプラグインはPHPが動作するサーバ上でないと正常に処理ができません。PHPが動く環境かどうか確認の上、実装するようにしてください。インデックスのファイル名は「index.php」としておいた方がいいと思います。拡張子がHTMLのままでもPHPは動きますが一応。

STEP1: MTPaginateプラグインの導入

まず「MTPaginate」をダウンロードしてzipファイルを解凍してください。（サイトの上の方にあるDownloadから落としてください。ちなみに商用利用はライセンス料として$20かかるので注意してください。個人利用は無償です。）解凍したフォルダにある「mt-static」フォルダをそのままMovable Typeのルートフォルダに移動し上書きしてください。（画像ファイルが入ってるだけ。）続いて「plugins」フォルダも同様に移動して、それぞれサーバにアップロードしてください。これでプラグインの導入は完了です。

STEP2: テンプレートへの反映

このテンプレートを使うと「1 | 2 | 3 | 4 | 5」のようにページ番号リンクを振る事もできるのですが、今回はまずページ送りの実装方法から説明します。早速ですがインデックスのファイルに実装したソースをご覧ください。

<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries lastn="500">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>

<div class="pageset">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>">« 前のページ</a>
</MTPaginateIfPreviousPage_>
| <a href="<$MTBlogURL$>">トップ</a> |
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">次のページ »</a>
</MTPaginateIfNextPage_>
</div>
</MTPaginate>

設定値としてインデックスページでページ分割対象とするエントリーを500件(3行目)とし、1ページ辺りのエントリー数を5件(2行目)としています。もしPHPが使えない場合、インデックスページに500件のエントリーが表示されることになるので大変なことになってしまいます。(PHPを利用することで500件のエントリーを?page=XXのパラメータにより出力対象を変えると言うのが、このプラグインの仕組みです。)

もし500件以上エントリーがある場合は「MTEntries」タグの「lastn」属性値を増やしてあげればいいのですが、エントリー数が多い場合に全体的なパフォーマンスにどのような影響があるかは調べていないのでご了承ください。もし上限を設けるならそのエントリー数までページング処理を行う事が可能になります。

STEP3: 再構築

インデックスページの再構築を行えば、実装は完成です。あとはスタイルシートを反映するのみ。

STEP4: スタイルシートの設定

リンクのスタイルは元々使っているアンカータグの設定のまま使用しています。あとはセンタリング等の設定を行う為に加えたdivタグの「pageset」クラス（名前は何でもいいです。）のスタイルを反映するのみ。ついでにアンカータグのソースも貼り付けておきます。

.pageset { margin:10px; text-align:center; }

a         { outline-style : none; text-decoration:none; }
a:link,
a:visited { color: #ff77aa; }
a:hover   { color: #ffccdd; }

スタイルシートのファイルの再構築を行ったらこれで完了です。

(おまけ) 「1 | 2 | 3 | 4 | 5」のようなページリンクを設定する方法

一応動作確認はしてあります。設定したエントリー数に応じて、ページ番号が表示されます。ただし100ページあったら、1から100まで全て表示してしまいます。もしページの途中を「・・・」のような表示に変えるには、プラグインの既存のタグでは実装できませんのでご注意ください。

■ HTMLソース
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries lastn="500">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>

<MTPaginateIfMultiplePages>
<div class="pageset">
<$MTPaginateNavigator separator="<span>|</span>" $>
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>

上記ではセパレータを「|」で設定しています。（他の文字でもOK。）spanタグはスタイルシートを反映させるために入れているので、不要な方はspanタグは取り除いてください。

■ CSSソース
.pageset { margin:10px 0; text-align:center; font-weight:bold; }
.pageset a,
.pageset span{ font-weight:normal; }

a         { outline-style : none; text-decoration:none;}
a:link,
a:visited { color: #ff77aa; }
a:hover   { color: #ffccdd; }

あとは全ページ分を一気に表示させたり、最初のページや最後のページにリンクする方法もあるようですが、その設定方法は「MTPaginate」プラグインのサイトを参照してください。またアーカイブページに対して分割する方法も、同様の手順で実装が可能です。