WordPressにはPaginationを実装するためのプラグインもあります。
WP-pagenaviなどはその代表的なものですね。
でも自分でカスタマイズしたページネーションを設置したい場合は、プラグインなしで実装する方がいいでしょう。プラグインをカスタマイズできるのなら話は別ですが。
まあ、なんでもかんでもプラグインに頼るとドンドンサイトが重くなりますので、プラグイン使わないにこしたことはないのです。
一番簡単な方法は、functions.php（テーマのための関数）に以下のコードを加えること。
function navi() {
[PR]global $wp_query;
$max_page = $wp_query->max_num_pages;
$nump=6;if($max_page > 1) echo ‘<div class=”navigation”><span class=”pages”>Pages:</span>’;
if ($max_page!=1) {
$paged = intval(get_query_var(‘paged’));
if(empty($paged) || $paged == 0) $paged = 1;if($paged!=1)echo ‘<a href=”‘.get_pagenum_link($paged-1).'” class=”prev” title=”Previous”>«</a>’;
if($paged!=1) echo ‘<a href=”‘.get_pagenum_link(1).'”>01</a>’;
else echo ‘<span class=”current”>01</span>’;if($paged-$nump>1) $start=$paged-$nump; else $start=2;
if($paged+$nump<$max_page) $end=$paged+$nump; else $end=$max_page-1;if($start>2) echo ” … “;
for ($i=$start;$i<=$end;$i++) {
$zero = ”;
if($i < ’10’) $zero = ‘0’;
if($paged!=$i) echo ‘<a href=”‘.get_pagenum_link($i).'”>’.$zero.$i.'</a>’;
else echo ‘<span class=”current”>’.$zero.$i.'</span>’;
}if($end<$max_page-1) echo ” … “;
if($paged!=$max_page) echo ‘<a href=”‘.get_pagenum_link($paged+1).'” class=”next” title=”Next”>»</a>’;
if($paged!=$max_page) echo ‘<a href=”‘.get_pagenum_link($max_page).'” class=”last” title=”Last”>»»</a>’;
else echo ‘<span class=”current”>’.$max_page.'</span>’;
}if($max_page > 1) echo ‘</div>’;
}
そして、ページネーションを表示させたい箇所に以下のタグを挿入。
僕は検索結果のsearch.phpとか、カテゴリーやタグ一括表示のためのarchive.phpとかに入れてます。あとトップページも。
home.phpがないテーマをつかっているので、index.phpに挿入してます。
<?php navi(); ?>
ページネーションのデザインも凝りたい人は、スタイルシートもいじってください。
僕のテーマのはこんなです。お好みでカラーや、ホバーエフェクトの効果などを設定してください。
.navigation {
background: url(i/smalldot.gif) repeat-x;
padding: 15px 0 0;
}
.navigation a {
display: inline-block;
width: 20px;
margin: 0 2px 0 0;
border: 1px solid #C01D36;
color: #C01D36;
text-decoration: none;
text-align: center;
}
.navigation a:hover {
border: 1px solid #4A4A4A;
color: #4A4A4A;
background: #EEE;
}
.navigation span {
display: inline-block;
width: 20px;
margin: 0 2px 0 0;
text-align: center;
}
.navigation span.pages {
margin-right: 10px;
width: auto;
}
.navigation span.current {
border: 1px solid #4A4A4A;
background: #888;
color: #FFF;
}
.navigation.first {
background: none;
padding: 0;
}
.navigation.com a {
margin: 0 -2px 0 0;
}
.navigation.com span.dots {
margin: 0 -4px 0 0;
}
.navigation.com span.current {
margin: 0 -2px 0 0;
}