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

ページの分割には、スカイアークシステム : WEB Technology Integratorで公開されている静的ページ用ページ分割プラグイン：PageButeがあります。

テンプレートは以下のとおりです。

<MTPageContents count="10">
<MTEntries lastn="999">
<div id="entry-<$MTEntryID$>" class="contents_box">
<h3><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>に移動します"><$MTEntryTitle encode_html="1"$></a></h3>
<div class="contents_comment">
<MTIfNonEmpty tag="EntryBody">
<div class="asset-body">
<$MTEntryBody$>
</div>
</MTIfNonEmpty>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="read_more"><a href="<$MTEntryPermalink$>#more" title="<$MTEntryTitle encode_html="1"$>の続きに移動します">続きを読む</a></p>
</MTIfNonEmpty>
<MTEntryIfTagged>
<dl class="entry-tags">
<dt>タグ：</dt> 
<dd>
<ul>
<MTEntryTags>
<li><a href="<$MTTagSearchLink$>" rel="tag" title="タグに<$MTTagName$>が設定されている記事の一覧ページに移動します"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</dd>
</dl>
</MTEntryIfTagged>
</div>
<div class="entry_footer">
<abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x（%a）"$></abbr>
<MTUnless name="hide_counts" eq="1">
<MTIfPingsActive> | <a href="<$MTEntryPermalink$>#trackbacks" title="<$MTEntryTitle encode_html="1"$>のトラックバックに移動します">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</MTUnless>
<MTIfNonEmpty tag="EntryCategory">| カテゴリ: <MTEntryCategories glue=","><a href="<$MTCategoryArchiveLink$>" title="カテゴリが<$MTCategoryLabel$>の記事一覧に移動します"><$MTCategoryLabel$></a></MTEntryCategories></MTIfNonEmpty>
<$MTInclude module="ソーシャルブックマーク"$>
</div>
</div>
<p class="to_top"><a href="#my_body" title="このページの先頭に戻ります">ページ先頭に戻る</a></p>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
 
<div class="content-nav">
<ul>
<MTIfPageBefore><li class="before_page"><$MTPageBefore delim="前の5件"$></li></MTIfPageBefore>
<$MTPageLists link_start="<li>" link_close="</li>" delim="" class_name=""$>
<MTIfPageNext><li class="next_page"><$MTPageNext delim="次の5件"$></li></MTIfPageNext>
</ul>
</div>

ポイントとしては、

<MTEntries lastn="999">

ここに何も指定していないと、ブログの設定の記事数が適用されますが、デフォルトの10件では何も表示されなかったので、lastenモデファイアで999としました。

Ajax（JavaScript）だとモバイルデバイス（例えばDocomoのM1000などスマートフォン）などで表示できないケースがあったので、変更しました。サイドバーなどではインタラクティブな表示ができなくてもよかったのですが、メインページだけはアスセサビリティーを確保したかったので、純粋に静的ページ分割に変更したわけです。

2008年11月25日追記

2008年11月21日にバージョンアップしPageBute 3.2.1となっていました。あわせてスタイルの指定をするためソースをいじってみました。

変更前その1（189行目）

for (my $i = $lists->{min_page}; $i <= $lists->{max_page}; $i++) {
	$page_lists .= $i == $lists->{min_page} ? '' : $delim;
	$page_lists .= $pb->{link_start};
	$page_lists .= $i == $page_count
		? "<span class=\"current_page\">$page_count</span>"
		: &_create_link($i, $site_url . $filename, $file_ext, $i, 'link_page');
	$page_lists .= $pb->{link_close};
}

変更後その1

for (my $i = $lists->{min_page}; $i <= $lists->{max_page}; $i++) {
	$page_lists .= $i == $lists->{min_page} ? '' : $delim;
	$page_lists .= $pb->{link_start};
	$page_lists .= $i == $page_count
		? "<span class=\"current\" title=\"$page_countページを表示しています\">$page_count</span>"
		: &_create_link($i, $site_url . $filename, $file_ext, $i, 'link_page');
	$page_lists .= $pb->{link_close};
}

変更前その2（293行目）

sub _create_link {
	my ($page, $file, $extension, $name, $class_name) = @_;
	my $url = $file . ( $page == 1 ? '' : "_${page}" ) . ".${extension}";
	$url =~ s|\\|\/|g; # for windows
	return "<a href=\"$url\" class=\"$class_name\">$name</a>";
}

変更後その2

sub _create_link {
	my ($page, $file, $extension, $name, $class_name) = @_;
	my $url = $file . ( $page == 1 ? '' : "_${page}" ) . ".${extension}";
	$url =~ s|\\|\/|g; # for windows
	return "<a href=\"$url\" class=\"$class_name\" title=\"$nameページに移動します\">$name</a>";
}

で、CSSを検索結果のテンプレートと共通化し、

.content-nav {
	text-align: center;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.content-nav ul li {
	list-style-type :none;
	display: inline;
	background-color: #ffffff;
	color: #3c3c3c;
	font-size: 1.24em;
	margin-right: 2px;
}
.content-nav ul li a {
	border: 1px solid #690;
	padding: 2px 4px;
	background-color: #ffffff;
	color: #3c3c3c;
}
.content-nav ul li a:hover {
	background-color: #ffffff;
	color: #3c3c3c;
	border: 1px solid #9a0;
}
.content-nav ul li a:visited {
	background-color: #ffffff;
	color: #3c3c3c;
}
.content-nav ul li span.current {
	padding: 4px 4px;
	font-weight: bold;
	background: #fff0de;
	color: #690;
}
.content-nav ul li.current {
	padding: 4px 4px;
	font-weight: bold;
	background: #fff0de;
	color: #690;
}
.content-nav ul li.before_page {
	background: #fff0de url(../images/pagenavi_ico_rwd.gif) no-repeat top left;
	padding-left: 12px;
}
.content-nav ul li.next_page {
	background: #fff0de url(../images/pagenavi_ico_fwd.gif) no-repeat top right;
	padding-right: 12px;
}
.content-nav ul li.before_page a,
.content-nav ul li.next_page a {
	border: none;
	background: #fff0de;
	color: #3c3c3c;
}

としています。