WP-PageNavi を使わずにナビゲーション表示 備忘録 : そば どっと びず

そば どっと びず

そば どっと びずの新着記事
↓ 一度使ったら手放せません ^^; とにかく動作が軽くて安心!オススメです ↓
USBメモリウイルスの感染にご注意を!

別のブログ(そばを楽しもう♪)でページナビを実装するプラグインを使おうとしましたが、
Yuriko.Net さんの記事でWP-PageNavi を使わずにナビゲーション表示する方法を
紹介されていたので、その備忘録。

ナビゲーションを表示したいところ(index.phpとか)に以下を記述

<div class="tablenav"><?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),
)); ?></div>

見た目を整えるために使っているテーマのstyle.css に以下を追加

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

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

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

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

.tablenav .next, .tablenav .prev {
    border:0 none;
    background:transparent;
    text-decoration:underline;
    font-size:smaller;
    font-weight:bold;
}

スタイルは適宜、テーマの色とかに合わせてカスタムで良いと思います。

これで、ほぼ WP-PageNavi と同等の表示になりました。

実際に使っているので動作も問題ありません。→ そばを楽しもう♪

追記 2010 10/29

コリスさんでWordPressにプラグイン無しでページネーションを設置する方法が紹介されてました。

「function.php」に追加する方法です。

posted by そば富泉

Categories: wordpress

コメントをどうぞ