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

Example:

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

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

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

PageNaviの表示方法

下記のコードを使用中のテーマ内のfunctions.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 bmPageNav(); ?>

以下は、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;
}

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

Bookmark & Share

2 Responses to “WP-PageNaviを使わずナビゲーション表示”

  1. you2u より:

    WP-PageNaviを使わずナビゲーション表示。 http://bit.ly/cRGM1i

  2. […] プラグインを増やしたくないという人はWordpressのテンプレートタグを追加する方法もあります。 詳細の以下のページに載っています。 ・WP-PageNavi を使わずにナビゲーション表示 ・WordPressにプラグイン無しでページネーションを設置する方法 ・WP-PageNaviを使わずナビゲーション表示 […]

Leave a Reply

  • Categories