WP-PageNaviを使わずナビゲーション表示

WordPressの通常のページナビゲーションは「« Previous Page　Next Page » 」と表示されるだけで、今見ているページがエントリー全体の何ページ目で、あとどのくらいのエントリーがあるのかが直感的に把握できません。
そこで、ユーザビリティ・アクセシビリティの向上という点で人気のあるのが『WP-PageNavi』というプラグインです。

Example:

Pages (17): [1] 2 3 4 » ... Last »

今回はプラグインを使わずに直感的にわかりやすいページナビゲーションを表示させる方法です。

WP-PageNavi を使わずにナビゲーション表示

PageNaviの表示方法

下記のコードを使用中のテーマ内のfunctions.phpに書き加えます。

[php]
<?php
function bmPageNav() {
global $wp_rewrite;
global $wp_query;
global $paged;

$paginate_base = get_pagenum_link(1);

if(($wp_query->max_num_pages) > 1):
if (strpos($paginate_base, ‘?’) || ! $wp_rewrite->using_permalinks()) {
$paginate_format = ”;
$paginate_base = add_query_arg(‘paged’, ‘%#%’);
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == ‘/’ ? ” : ‘/’) .
user_trailingslashit(‘page/%#%/’, ‘paged’);;
$paginate_base .= ‘%_%’;
}
$result = paginate_links( array(
‘base’ => $paginate_base,
‘format’ => $paginate_format,
‘total’ => $wp_query->max_num_pages,
‘mid_size’ => 5,
‘current’ => ($paged ? $paged : 1),
));
echo ‘<p class="pageNav">’."\n".$result."\n</p>\n";
endif;
}
?>
[/php]

下記のコードをページナビゲーションを表示させたいテンプレートに書いて呼び出します。

[php]
<?php bmPageNav(); ?>
[/php]

以下は、CSSでのスタイリング例。

[css]
.pageNav {
color: #2583ad;
background:white;
margin: 1em auto;
line-height:2em;
text-align:center;
}

a.page-numbers, .pageNav .current {
color: #00019b;
padding: 2px .4em;
border:solid 1px #ccc;
text-decoration:none;
font-size:smaller;
}

a.page-numbers:hover {
color:white;
background: #328ab2;
}

.pageNav .current {
color: white;
background: #328ab2;
border-color: #328ab2;
font-weight:bold:
}

.pageNav .next, .pageNav .prev {
border:0 none;
background:transparent;
text-decoration:underline;
font-size:smaller;
font-weight:bold;
}
[/css]

プラグインを必要最小限にしたい方にオススメです。