プラグイン名 WP-PageNavi
定番のページ番号を追加するプラグインです。
インストール手順
プラグイン > 新規追加 > WP-PageNavi > プラグインを検索 > いますぐインストール > プラグインを有効化
設定
設定 > PageNavi
pagenavi-css.css を使用にチェックを入れると、wp-content/plugins/wp-pagenavi/pagenavi-css.cssが適用されます。このスタイルシートを編集してページナビのデザインをすることができます。
チェックを外して、メインのスタイルシートにpagenavi-css.cssの中身をコピーして編集してもOKです。
表示するページ数、省略表示するページ数、省略ページを以下の倍数で表示は、記事の量にもよるので、ある程度サイトが完成するまでは、デフォルトのままでいいと思います。
ページナビ(デモ)
↑のスタイルは↓こんな感じ、シャドウとホバータイムはおまけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.wp-pagenavi { clear: both; line-height: 3em; } .wp-pagenavi a { padding-top: 5px; padding-right: 9px; padding-bottom: 5px; padding-left: 9px; margin-left: 3px; background-color: #999; color: #FFF; } .wp-pagenavi a:hover{ background-color: #666; } .wp-pagenavi .pages { margin-right: 10px; border: 1px solid #999; color: #666; padding-top: 4px; padding-right: 5px; padding-bottom: 4px; padding-left: 5px; } .wp-pagenavi .current { padding-top: 5px; padding-right: 9px; padding-bottom: 5px; padding-left: 9px; background-color: #666; color: #FFF; } .wp-pagenavi .extend { display: none; } /* 角丸 2px */ .wp-pagenavi a, .wp-pagenavi .pages, .wp-pagenavi span.current { border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } /* ボックスシャドウ */ .wp-pagenavi a:hover { -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; } /* ホバータイム */ .wp-pagenavi a { -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } |
コメントを残す