前回PageButeプラグインの導入を穏便に済ませほくほくしてたのですが、今回の作業は実はこれだけでは終わりません。

PageButeプラグインの初期の状態では、マークアップが適切に行われておらず、CSSによるスタイルづけもしっかりと行えないのです。というわけで今回はpagebute.plを弄って適切なHTMLマークアップを施し、CSSでスタイル付けにチャレンジ！

今回のカスタマイズは

PageButeプラグインのページャーをちゃんとマークアップする [MT,プラグイン] - BlurBlue-Note
Movable Type 備忘録 - PageBute プラグインをカスタマイズ

以上の2本の記事を参考にしました。

先ずはpagebute.plを編集します。

1)169行目の記述をコメントアウトします

$page_lists .= $i == $lists->{min_page} ? '' : $delim;

↓

# $page_lists .= $i == $lists->{min_page} ? '' : $delim;

2)170行目の記述を以下のように変更。

$page_lists .= $i == $page_count ? $page_count : &_create_link($i, $site_url . $filename, $file_ext, $i);

↓

$page_lists .= $i == $page_count ? '<li><span class="current">'.$page_count.'</span></li>' : &_create_link($i, $site_url . $filename, $file_ext, $i);

3)そして次の行(171行目)に以下の記述を追加します

$page_lists .= "n";

4)最後に249行目の記述を

return "<a href="${url}">$name</a>";

↓

return "<li><a href="${url}">$name</a></li>";

と変更します。

参考にした記事2本と違う部分は、挿入してやるspan要素に"current"のクラス名をつけてやったことです（それだけかい！）

この改造によって、ページ送りの箇所は以下のようにマークアップされます。div要素はデフォルトテンプレートのもの(本来はアーカイブへのリンクを内包する要素)を流用しています

<div class="content-nav"> 
<ul>
 
<li><a href="http://tadateto.net/index.html">前に戻る</a></li>
 
<li><a href="http://tadateto.net/index.html">1</a></li>
<li><span class="current">2</span></li>
<li><a href="http://tadateto.net/index_3.html">3</a></li>
<li><a href="http://tadateto.net/index_4.html">4</a></li>
<li><a href="http://tadateto.net/index_5.html">5</a></li>
<li><a href="http://tadateto.net/index_6.html">6</a></li>
<li><a href="http://tadateto.net/index_7.html">7</a></li>
<li><a href="http://tadateto.net/index_8.html">8</a></li>
<li><a href="http://tadateto.net/index_9.html">9</a></li>
<li><a href="http://tadateto.net/index_10.html">10</a></li>
 
<li><a href="http://tadateto.net/index_3.html">次に進む</a></li>

</ul> 
</div>

最後におもむろにCSSでスタイルを定義してやります。ページ送りのスタイルは海外の有名サイトでデザインが好きなところ3箇所を参考にしました。

Flickr

Delicious

Digg

そして「ただてと」に設置されたページ送りのスタイルはこちら

現在位置を示すページの数字をボーダーで囲むかとか背景色を設定して文字色は反転させようかとか、迷ったんですけどね、一番地味な感じにしてみました。参考までに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 {
padding:1px 4px;
color:#000;
}

従来の静的ページの構成のまま、ページ送りを実現できるこのPagebuteプラグイン、みなさんも是非！