Movable Type でページ分割の方法

動作が重くなった私のブログへの対策、第二弾です。

今回はソフト的な対策をやってみました。

記事数が増えてくると、表示されるページ数が増えてきます。

特にカテゴリーページは、100ページを超えるジャンルがあると表示が遅くなって閲覧者の方に迷惑が掛かります。

私のブログでも一番記事数の多い「ハーレーツーリング」カテゴリーでは168もの記事があり、また「スイス旅行」カテゴリーでは記事数は14ですが、一つの記事に写真が60～80枚もあるため全部で1000枚以上になり、また地図表示も行っているのでこれらをすべて一度に表示するとかなり重たくなってしまいます。

メインページについては、Movable Type の「設定」ページの「表示に関する初期設定」で表示数を指定出来ますが、その前後へ移動するナビゲーターがありません。

カテゴリーページにいたっては、表示ページの制限すらする事が出来ません。

プロバイダ系のブログでは、あらかじめページを分割して表示してくれる機能があるものが多いですが、Movable Type ではその機能がついていません。

ブログ自体をPHP化すると対応出来るようですが、それはそれで手間も掛かるし、使えるプラグインに制約が出てしまう等の問題点もあります。

そんな時に便利なのが、今回紹介するプラグイン、「PageBute」です。

私のブログで今回のプラグインを使って、「メインページとカテゴリーアーカイブを分割して表示する」ように設定してみました。

すでにいろんなサイトで紹介されている機能追加ですが、テンプレートの設定方法がわかりにくかったので、自分のための備忘録として残しておきます。

使用する環境ですが、ブログソフトとしてのMovable Type の最新版はVer５が提供されていますが、私のブログでは未だにVer3.38を使っています。

今のバージョンでカスタマイズに慣れているので他のバージョンにアップする予定は今のところありません。

■まずは、プラグインを導入します。

スカイアークシステムのサイトから、PageButeプラグインをダウンロードします。

いくつかあるバージョンの中から、私は「PageBute バージョン3.4.0」をダウンロードして使わせてもらっていますが、MT3.38でもうまく動作しています。

インストール方法は、ダウンロードして解凍した「PageBute.pl」ファイルをMovable Typeの「plugins」ディレクトリにアップロードするだけです。

■次にテンプレートを設定します。

基本的な流れは、
<MTEntries> の直前に <MTPageContents count=”5″> を追記します。
（※　”5″の数字は分割表示したいページ数です）

そして、</MTEntries> の直前に <$MTPageSeparator$> を、直後に </MTPageContents> を追記します。

さらにページ移動の表示をさせたいところに、

【例１】
Page：<MTIfPageBefore><span><$MTPageBefore delim=”<<前の5件 “$></span></MTIfPageBefore>
<$MTPageLists delim=” < “$>
<MTIfPageNext><span><$MTPageNext delim=” 次の5件>>”$></span></MTIfPageNext>

あるいは、

【例２】
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の３件　＜＜　”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=”　＞＞　古い日付の３件”$></span></MTIfPageNext>

と記述します。

上の二つの例はどちらを使っても構いませんが、その表示例は下記のようになります。

【例１】

【例２】

となります。

次に掲載するのが、実際に私のブログで使っているテンプレートの記述例です。

まずは「メインページ」の記述です。

赤字の部分が追加したところです。

　　（前　略）

<div id=”beta”>
<div id=”beta-inner” class=”pkg”>

<div align=”center”>
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の３件　＜＜　”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=”　＞＞　古い日付の３件”$></span></MTIfPageNext>
</div>
<br>

<MTPageContents count=”3″>

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class=”date-header”><$MTEntryDate format=”%x”$></h2></MTDateHeader>
<div class=”entry” id=”entry-<$MTEntryID$>”>
<h3 class=”entry-header”><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a></h3>
<div class=”entry-content”>
<div class=”entry-body”>
<$MTEntryBody$>

　　　　 <div align=”right”>
　　　 　<p style=”font-size : smaller;color : blue;”>ブログランキングに参加しています。<br>
　　　 　１日１回のクリックがはげみになります。<br>
　　　 　<a href=”http://bike.blogmura.com/harley/”>
　　　 　<img src=”http://www.blogmura.com/img/www88_31_femgreen_2.gif” width=”88″ height=”31″ border=”0″ alt=”にほんブログ村 バイクブログ ハーレーダビッドソンへ” /></a></p>
　　 　</div>

<MTIfNonEmpty tag=”EntryMore” convert_breaks=”0″>
<p class=”entry-more-link”>
<a href=”<$MTEntryPermalink$>#more”>続きを読む “<$MTEntryTitle$>” »</a>
</p>
</MTIfNonEmpty>

<MTEntryIfTagged>
<div class=”entry-tags”>
<h4 class=”entry-tags-header”>タグ:</h4>
<ul class=”entry-tags-list”>
<MTEntryTags>
<li class=”entry-tag”><a href=”<$MTTagSearchLink$>” rel=”tag”><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTEntryIfTagged>

</div>
</div>

<p class=”entry-footer”>
<span class=”post-footers”>
<MTIfNonEmpty tag=”EntryAuthorDisplayName”>
投稿者: <$MTEntryAuthorLink show_email=”0″$> 日時: <$MTEntryDate format=”%x %X”$>
<MTElse>
日時: <$MTEntryDate format=”%x %X”$>
</MTElse>
</MTIfNonEmpty>
</span>

<span class=”separator”>|</span> <a class=”permalink” href=”<$MTEntryPermalink$>”>パーマリンク</a>
<MTIfCommentsActive>| <a href=”<$MTEntryPermalink$>#comments”>コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href=”<$MTEntryPermalink$>#trackback”>トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>

</div>

<$MTPageSeparator$>

</MTEntries>

</MTPageContents>

<div align=”center”>
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の３件　＜＜　”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=”　＞＞古い日付の３件”$></span></MTIfPageNext>
</div>
<br>

</div>
</div>

<div id=”gamma”>
<div id=”gamma-inner” class=”pkg”>

　　（後　略）

メインページは、一度に表示する記事数は３個にして、記事より上と一番下の二ヶ所に他ページへの移動ナビゲーションを表示するようにしました。

次は「カテゴリーページ」の記述例です。

基本的に追加する内容は同じです。

　　（前　略）

<div id=”alpha”>
<div id=”alpha-inner” class=”pkg”>

<p class=”content-nav”>
<a href=”<$MTBlogURL$>”>メイン</a>
</p>

<h2 id=”archive-title”><$MTArchiveTitle$> アーカイブ</h2>

<MTPageContents count=”3″>

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class=”date-header”><$MTEntryDate format=”%x”$></h2></MTDateHeader>
<a id=”a<$MTEntryID pad=”1″$>”></a>
<div class=”entry” id=”entry-<$MTEntryID$>”>
<h3 class=”entry-header”><$MTEntryTitle$></h3>
<div class=”entry-content”>
<MTIfNonEmpty tag=”EntryBody”>
<div class=”entry-body”>
<$MTEntryBody$>
</div>
</MTIfNonEmpty>

<MTIfNonEmpty tag=”EntryMore” convert_breaks=”0″>
<p class=”entry-more-link”>
<a href=”<$MTEntryPermalink$>#more”>続きを読む “<$MTEntryTitle$>” »</a>
</p>
</MTIfNonEmpty>

</div>

　　 <div align=”right”>
　　 <p style=”font-size : smaller;color : blue;”>ブログランキングに参加しています。<br>
　　１日１回のクリックがはげみになります。<br>
　　 <a href=”http://bike.blogmura.com/harley/”>
　　 <img src=”http://www.blogmura.com/img/www88_31_femgreen_2.gif” width=”88″ height=”31″ border=”0″ alt=”にほんブログ村 バイクブログ ハーレーダビッドソンへ” /></a></p>
　　 </div>

<p class=”entry-footer”>
<span class=”post-footers”>
<MTIfNonEmpty tag=”EntryAuthorDisplayName”>
投稿者: <$MTEntryAuthorLink show_email=”0″$> 日時: <$MTEntryDate format=”%x %X”$>
<MTElse>
日時: <$MTEntryDate format=”%x %X”$>
</MTElse>
</MTIfNonEmpty>
</span>

<span class=”separator”>|</span> <a class=”permalink” href=”<$MTEntryPermalink$>”>パーマリンク</a>
<MTIfCommentsActive>| <a href=”<$MTEntryPermalink$>#comments”>コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href=”<$MTEntryPermalink$>#trackback”>トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>
</div>

<$MTPageSeparator$>

</MTEntries>

</MTPageContents>

<div align=”center”>
Page：<MTIfPageBefore><span><$MTPageBefore delim=”<<前の３件 “$></span></MTIfPageBefore>
<$MTPageLists delim=” < “$>
<MTIfPageNext><span><$MTPageNext delim=” 次の３件>>”$></span></MTIfPageNext>
</div>

</div>
</div>

<div id=”beta”>
<div id=”beta-inner” class=”pkg”>

　　（後　略）

カテゴリーページは、表示記事は３個、ナビゲーションは一番下にだけ表示させてます。

■次に、大事な設定があります。

Movable Type の「設定」ページの「表示に関する初期設定」で表示数を「0」か、「999」などの数値に変更しておきます。

これは、PageButeの表示記事数設定よりも、上記のシステム上の「表示に関する初期設定」の方が優先されるためです。

■デザインを変える

私のブログのページ分割の表示では、ページ毎に□で囲み、マウスオーバーしたページは、白抜き数字で表示しています。

こういったデザインにするには、テンプレートを書く時に、

<div align=”center”>

の下に、

<p class=”pagelist”>

と記述します。

さらにスタイルシートの「css」ファイルに、

p.pagelist {
font-size:12px;
clear:both;
padding-top:10px;
text-align:center;
}

p.pagelist a{
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#fff;
color:#0066cc;
}

p.pagelist a:hover{
text-decoration:none;
padding:4px;
background:#0066cc;
color:#fff;
}

p.pagelist b{
font-weight:bold;
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#0066cc;
color:#fff;
}

と書いておきます。

ここまでの設定をすれば完了です。

設定後の実際の動作状況は、このブログのメインページとカテゴリーアーカイブページで確認してみてください。

これで長くなりがちなメインページやカテゴリーページを、任意の記事数毎に分割し、自由に前や後ろのページに移動する事が出来るようになります。