wordpressページに数字のナビゲーションを付ける
よくwordpressのテーマを使うと 記事の次へとか前の記事へとかって
＜＜previous とか <<olderpost とかナビが付いてますよね
デフォルトだと 次のページへとか味気ないものに。
上の画像の様なナビゲーションを付けられるプラグインが
PAGE NAVIというやつです 下のサイトからダウンロードしてください。
http://lesterchan.net/portfolio/programming/php/#wp-pagenavi
使い方
１：ダウンロードし解凍したらプラグインにアップして有効化
２：下のソースをPAGENAVIを表示させたい部分に記述
[php]<?php if(function_exists(‘wp_pagenavi’)) {
wp_pagenavi();
} else {
vicuna_paging_link(‘next_label=Newer Entries&prev_label=Older Entries&indent=2’);
} ?>
[/php]
基本は アーカイブphpの現在のページナビが記述されているところを変更してあげればOKです。
あとはお好みでCSSでカスタマイズしましょう。
ちなみに私の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]
CSSを書いたら ソースを囲むのを忘れないように。
