wordpressページに数字のナビゲーションを付ける

pagenavi

よくwordpressのテーマを使うと 記事の次へとか前の記事へとかって

<<previous とか <<olderpost とかナビが付いてますよね

デフォルトだと 次のページへとか味気ないものに。

上の画像の様なナビゲーションを付けられるプラグインが

PAGE NAVIというやつです 下のサイトからダウンロードしてください。

http://lesterchan.net/portfolio/programming/php/#wp-pagenavi

 

使い方

1:ダウンロードし解凍したらプラグインにアップして有効化

2:下のソースをPAGENAVIを表示させたい部分に記述

<?php if(function_exists('wp_pagenavi')) {
wp_pagenavi();
} else {
vicuna_paging_link('next_label=Newer Entries&prev_label=Older Entries&indent=2');
} ?>

基本は アーカイブphpの現在のページナビが記述されているところを変更してあげればOKです。

あとはお好みでCSSでカスタマイズしましょう。
ちなみに私のCSS記述は

div.wp-pagenavi {
    margin: 1.5em 30px;
    color: #555;
    font-size: 100%;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi a:link {
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    border: 1px solid #0198ca;
    color: #0198ca;
}
.wp-pagenavi a:visited {
    border: 1px solid #8f9da6;
    color: #8f9da6;
}
.wp-pagenavi a:hover {
    text-decoration: underline;
    border: 1px solid #00b8fd;
    color: #00b8fd;
}
.wp-pagenavi a:active {
    border: 1px solid #00b8fd;
    color: #00b8fd;
}
.wp-pagenavi span.pages, .wp-pagenavi span.current, .wp-pagenavi span.extend {
    padding: 0.5em 1em;
    margin: 0.25em;
    border: 1px solid #ddd;
}
.wp-pagenavi span.current {
    font-weight: bold;
}

CSSを書いたら ソースを囲むのを忘れないように。