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

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/