ワードプレス(WP)のページ送りナビゲーションを番号表示に変更する

標準のWPでは、一画面で収まらない記事を「前のページ」「次のページ」リンクでナビゲーションします。 これを検索エンジンのようにページ番号表示にして、使い勝手を向上させたいと思います。

以下のプラグインで実現できます。

WP-PageNavi

プラグインをインストール後に、現行のナビゲーションが記述されているテンプレートを編集します。 私の場合は loop.php に記述されていました。 元のページ送りのリンクを削除して、<?php wp_pagenavi(); ?>を一行加えます。

<div id="nav-below" class="navigation">
    <?php wp_pagenavi(); ?>
</div><!-- #nav-below -->

サンプル

これだけで番号表示に切り替わります。 デザインはCSSでコントロールします。CSSのサンプルと表示例です。

/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
    clear: both;
    margin: 20px 0 30px 0;
}

.wp-pagenavi a, .wp-pagenavi span {
    font-size: 14px;
    color: #666;
    border: 1px solid #bbb;
    padding: 3px 9px;
    margin: 0 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    color: #743399;
    border: 1px solid #743399;
}

.wp-pagenavi span.current {
    font-size: 18px;
    font-weight: bold;
    padding: 2px 10px;
    color: white;
    background-color: #743399;
    text-decoration: none;
}

 

広告