WordPressでページナビゲーションを表示するプラグイン「WP-PageNavi」
ページナビゲーションのインターフェイスをカスタマイズできるプラグインをご紹介します。
「WP-PageNavi」を使えばページナビゲーションをカスタマイズすることができます。
![]()
インストールは管理画面のプラグイン > 新規追加から「WP-PageNavi」で検索、インストールします。
概観のテーマ編集からindex.phpでナビゲーションを表示したい位置に下記コードを入れます。
設定はこんな感じにしてみました。
(クリックで拡大↓)
デザインはスタイルシートで変更できます。
このサイトではこんな感じにしてみました。
.wp-pagenavi{text-align: center; margin-top:50px;}
.wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #e4e4e4;
color: #333;
background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
border: 1px solid #ddd;
background-color: #999;
color:#fff;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
font-size:85%;
}
.wp-pagenavi span.current {
background-color:#999;
border:1px solid #999;
color:#FFFFFF;
font-weight:bold;
margin:2px;
padding:2px 4px;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #e4e4e4;
color: #333;
background-color: #FFFFFF;
}
以上です!
» WP-PageNavi
