静的ページ用ページ分割プラグイン:PageBute

今回はプラグインを使い、アーカイブページを分割してみる。そうするとページが短くなりコンパクトになる。見た目はもちろんすっきりしてユーザビリティも向上するし、ページ数を表示させることでボリューム感は維持できる。また、ページ数が増加するのでSEO的にもかなり有利になることだろう。

静的ページ用ページ分割プラグイン:PageBute

アーカイブページの分割には、Paginateプラグインが思い浮かぶますがサイトをＰＨＰ化する必要があり、それなりのスキルが必要だと感じていたのは事実です。

しかし、このプラグインは簡単に静的なアーカイブ分割ができます。

まず、分割したいテンプレートに以下のコードを追加します。

<h1><$MTGetVar name="page_title"$></h1>
<MTPageContents count="5">←追加部分
			<MTEntries>
				<$MTEntryTrackbackData$>
				<$MTInclude module="ブログ記事の概要"$>
<$MTPageSeparator$>←追加部分
</MTEntries>
</MTPageContents>←この行以下追加部分
<div class="content-nav">
<ul>
<MTIfPageBefore>
<li><$MTPageBefore delim="前に戻る"$></li>
</MTIfPageBefore>
<$MTPageLists delim="" link_start="<li>" link_close="</li>"$>
<MTIfPageNext>
<li><$MTPageNext delim="次に進む"$></i>
</MTIfPageNext>
</ul>
</div>

<MTPageContents count="5"></MTPageContents>
区切りたい部分（Entriesなど）を囲むタグです。
このタグに囲まれた部分は、countで指定した件数ごとに区切られて表示されます。
この場合は5件で区切っています。

次にCSSファイルに以下を追加します。

.content-nav ul li {
list-style-type : none;
font-size:80%;
display:inline;
background-color:#FFFFFF;
}

.content-nav ul li a {
text-decoration:none;
border:1px solid #ccc;
padding:1px 7px;
color:#506000;
}

.content-nav ul li a:hover {
color:#506000;
border:1px solid #9a0;
}

.content-nav ul li a:visited {
color:#506000;
}

.content-nav ul span.current_page {
padding:1px 5px;
color:#000;
}

MovableTypeの「設定」メニューから「ブログ記事の表示数」を「99」にすることも忘れずに！！