WordPress: プラグインを使わずにページナビゲーションを表示する

Hinemosu,plug-in,WordPress

当ブログ「Hinemosu」の下部に設置しているページナビゲーション表示の見た目を変更しました。

2012-09-04_1049

これまではWP-PageNaviを使っていましたが、変更後はWordPress標準のテンプレートタグのみでページナビゲーションを実現しています。

と言っても、自分でコードを書いたワケではなく、「Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示」で紹介されているコードを、ほぼそのまま拝借しています。

WordPress標準のテンプレートタグのみでページナビゲーションを行うには、下記コードをテンプレートファイルの表示位置に貼り付けてください。

<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' => 4,
        'current' => ($paged ? $paged : 1),
    )); ?>
</div>

ページナビゲーション表示の見た目はCSSで調整します。

.tablenav {color: #2583ad;margin: 1em auto;line-height:2em;text-align:center;font-size: 120%;}
a.page-numbers, .tablenav .current {color: #00019b;padding: 2px .4em;border:solid 1px #ccc;text-decoration:none;}
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-weight:bold;}

実際の見た目や動作、使用感を知りたいときは「Hinemosuトップページ」の最下部にあるページナビゲーション表示を確認してみてください。

そんな感じで！