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

こちらの記事もどうぞ