WordPressでページを分割するには「WP-PageNavi」というプラグインが大変便利で非常に有名なんですが、デフォルトのCSSが個人的にイケてないので書き換えていました。
ただ、プラグインがバージョンアップする度に書き直すのが面倒[*1] なので、ちょっとググってみたら別にプラグイン使わなくても出来るんですね…という話です。
まぁたいした話じゃないんですけど、これの気に入ったところは「前ページへ」とか「次ページへ」のリンクが一番外側に来ているという点ですね。
これは感覚的な問題で、どうでもいいっちゃあどうでもいい。
でも個人的には非常に重要なこと何じゃないかと思うんです。
というわけでちょっとだけ弄ったのでメモ。
以下のコードを表示したいところに挿入します。
<div class="pagenavi">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(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 .= '%_%';
}
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 5,
'current' => ($paged ? $paged : 1),
)); ?>
<!-- pagenavi --></div>
上のエントリーではページナビ全体のクラス名が「tablenav」となっていますが、私は上のように「pagenavi」に書き換え。
この辺は別に文章化するまでもないくらいどうでもいいことですけど一応念のため。
次にCSSで見た目を変更します。
span.current {
font-weight: bold;
padding: 2px 6px;
border: 1px solid #d9d9d9;
background: url('image/grey-gloss.png') repeat-x center center;
}
a.page-numbers {
padding: 2px 6px;
border: 1px solid #d9d9d9;
background: url('image/white-gloss.png') repeat-x center center;
}
a.page-numbers:link, a.page-numbers:visited {
color: #666666;
text-decoration: none;
}
a.page-numbers:hover, a.page-numbers:active {
color: #000000;
text-decoration: underline;
background-color: #d9d9d9;
}
できあがり。
- バックアップは？とか言わない方向でw [↑]
