WP-PageNaviの設定＆カスタマイズ

【よく使用する設定】
・ 総ページ数用テキスト　空欄
　・ 現在のページ用テキスト　%PAGE_NUMBER%
　・ ページ用テキスト　%PAGE_NUMBER%
　・ 最初のページ用テキスト　空欄
　・ 最後のページ用テキスト　空欄
　・ 前のページ用テキスト　< 　・ 次のページ用テキスト　>
　・「前へ…」用テキスト　空欄
　・「次へ…」用テキスト　空欄
　
　ページナビゲーション設定
　・pagenavi-css.css を使用 　No
　・Page Navigation スタイル 通常
　・常にページナビゲーションを表示　No
　・表示するページ数　5
　・省略表示するページ数　3
　・省略ページを以下の倍数で表示　10

【デザイン変更】
◯出力されるhtml

<!--pagenavi-->
<div class='wp-pagenavi'>
<span class='pages'>5 / 10</span>
<a class="first" href="#">« 先頭</a>
<a class="previouspostslink" rel="prev" href="#">«</a>
<a class="page smaller" href="#">3</a>
<a class="page smaller" href="#">4</a>
<span class='current'>5</span>
<a class="page larger" href="#">6</a>
<a class="page larger" href="#">7</a>
<a class="nextpostslink" rel="next" href="#">»</a>
<a class="last" href="#">最後 »</a>
</div>
<!--/pagenavi-->

◯変更用スタイルシート

.wp-pagenavi a, .wp-pagenavi span {
  color:#999;
  background-color:#FFF;
  border:solid 1px #999;
  padding: 8px 15px;
  margin:0 2px;
  white-space: nowrap;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.wp-pagenavi a:hover{
  color:#FFF;
  background-color:#999;
  border-color:#999;
}
.wp-pagenavi span.current{
  color:#FFF;
  background-color:#333;
  border-color:#333;
  font-weight: bold;
}

参考サイト

WebClips_Design

【WordPress】ページナビゲーションを簡単に設置できるWP-PageNavi

http://design.webclips.jp/wordpress-plugin-pagenavi/