Movable Typeでページ分割とページ送り(ページング)を実装する方法

2008/10/08

Movable Type のインデックスページをFC2ブログJUGEM のように、特定のエントリー数毎にページ送りできる方法を探していたのですが、丁度良いプラグインを見つけたので、今回はそのプラグインを利用したページングの実装方法について、紹介させていただきます。

paging-on-movable-type01

ページングを実装するプラグイン MTPaginate

MT Extensions: MTPaginate 1.28

このプラグインを利用することで、インデックスページだけでなく月別やカテゴリーのアーカイブページも分割してページング処理を実装できることがわかりました。

MTPaginate を導入する手順

導入前の注意点

このプラグインは PHP が動作するサーバ上でないと正常に処理ができません。PHP が動く環境かどうか確認の上、実装するようにしてください。 (Movable Type は基本的に cgi で動いています。設定によっては PHP 環境が必要になります。)

また、インデックスのファイル名は「index.php」としておいた方が良いでしょう。拡張子が HTML のままでも PHP は動きますが「.htaccess」を変更したり、アクセス数が多い場合はサーバに負荷が掛かるので、あまりオススメできません。

なお導入環境は、Movable Type 4.21、MTPaginate 1.28 で確認を行っています。

STEP1: MTPaginateプラグインの導入

まず「MTPaginate」をダウンロードして zip ファイルを解凍してください。(サイトの上の方にある Download から落としてください。なお、商用利用はライセンス料として $20 かかるので注意してください。個人利用は無償です。)

解凍したフォルダにある「mt-static」フォルダをそのまま Movable Type のルートフォルダに移動し上書きしてください。(画像ファイルが入ってるだけ。)続いて「plugins」フォルダも同様に移動して、それぞれサーバにアップロードしてください。これでプラグインの導入は完了です。

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

MTPaginate を使うと「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件のエントリーを URL パラメータ [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 」のようなページリンクの設定方法

以下、動作確認済みです。設定したエントリー数に応じて、ページ番号が表示されます。ただし 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」プラグインのサイトを参照してください。またアーカイブページに対して分割する方法も、同様の手順で実装が可能です。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプでフレンドを登録する方法は3つ!フレンドコードを表示して友達に教えてあげよう!

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!