WP-PageNaviをオリジナルCSSで設定
Warning: Attempt to read property "title" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 229
Warning: Attempt to read property "description" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 235
たぶんWordPress使っている人はほとんど使っていると思われるプラグインWP-PageNavi。今更だが必須プラグインなので一応書いておく。デフォルトのナビゲーションと置き換える形で使う。一覧表示とかのナビゲーションを便利にしてくれる。
インストールしたら利用方法により設定は必要だが、自分のスタイルシートで設定するなら「ページナビゲーション」＞「設定」＞「pagenavi-css.css を使用」を「いいえ」にしておくこと。
あとは表示させたいページに以下を記載するだけ。
<?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?>スタイルシート基本形。どうせサイトのテーマカラーに合わせた指定をすると思うのでサンプル作るのやめた。これだけメモしてあれば応用が効く。以下設定はこのサイトのもの。使うフォントによっても雰囲気は大きく変わる気がする。
.wp-pagenavi a, .wp-pagenavi span {/*全体に関連する指定*/
color: #fff;/*ページ番号のフォントの色*/
background-color: #666664;/*ページ番号の背景色*/
border: solid 1px #666664;/*ボーダ色*/
padding: 5px 5px;/*枠内間隔指定する*/
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;/*ホーバー時の変化ゆっくり始まりゆっくり終わる*/
text-align: center;/*ページ番号の文字位置*/
text-decoration:none;/*リンク下線なし*/
}
.wp-pagenavi a:hover{/*ホバー時の指定*/
color: #666664;/*ページ番号のフォントの色*/
background-color: #F2F2ED;/*ページ番号の背景色*/
border: solid 1px #666664;/*ボーダ色*/
}
.wp-pagenavi span.current{/*現在ページの指定*/
color: #666664;/*ページ番号のフォントの色*/
background-color: #F2F2ED;/*ページ番号の背景色*/
border: solid 1px #666664;/*ボーダ色*/
font-weight: bold;/*文字太さ*/
}NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。