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

2016/06/29

paging-on-movable-type01

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

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

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

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」プラグインのサイトを参照してください。またアーカイブページに対して分割する方法も、同様の手順で実装が可能です。

minecraft-kuda-shaders01
2016/12/03

Minecraft 低スペックパソコンで使える影 MOD の代表格 KUDA SHADERS の導入方法

odaiba-gundam-last-day01
2016/12/02

お台場のガンダムいつまで見られるか?!ダイバーシティーからの撤去が決まる

new-year-2017
2016/12/01

一人用おせち料理のすすめ【2017】人気店のおせちが通販で手に入ります

jayfi-touch-h1-ja-22-01
2016/11/30

イヤホンからの乗り換えにおすすめ Jayfi Touch H1 はスマホの通話機能を持つ低音重視のワイヤレス Bluetooth ヘッドホン【レビュー】

android-smartphone-case01
2016/11/30

Android 用スマホケースはどこで売っている?店に行っても売ってない場合どうすれば良いか

remove-crc-sha-from-context-menu01
2016/11/29

ファイルを右クリックすると表示される CRC SHA を消す方法

rakusuru01
2016/11/29

ラクスルで初めてのポスター発注!時間は掛かるが料金は安い!

file-archiver-7-zip01
2016/11/29

ZIP より圧縮率の高いアーカイバー 7-Zip を今更ながら紹介する

install-minecraft-mod-optifine01
2016/11/29

Minecraft 軽量化 MOD OptiFine の導入方法 【1.11対応済み】

minecraft02
2016/11/28

Minecraft のビデオ設定を変更して軽くすれば低スペックパソコンでも十分に遊べる

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑