「wp-pagenavi」プラグインのインストールとCSSのカスタマイズ


インストールは通常通り「/wp-content/plugins」にアップロード。カスタマイズは以下のように。
「/wp-content/plugins/wp-pagenavi」の「pagenavi-css.css」を開いて編集。
またはテーマファイルのCSSに記述

例) 配置の中央揃え

.wp-pagenavi { text-align: center;}

追記) 2011/5/30

プラグイン「WP-Page Navi」のCSSデザイン サンプル

画像上のCSS・・CSS3で角丸(※IEには対応していません)

/* ---------------------------------------------------
 PLUGIN WP-Page Navi 角丸
---------------------------------------------------- */
.navigation {
	font-size: 12px;
	line-height: 20px;
	padding:15px 0;
	clear: both;
}
.navigation a {
	float: left;
	text-decoration: none;
	color: #fff;
	background-color: #666;
	padding: 2px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.navigation a:hover {
	background-color: #333;
}
.wp-pagenavi {
	text-align: center;
}
.wp-pagenavi a {
	font-weight: bold;
	float: none;
}
.wp-pagenavi .current {
	font-weight: bold;
	color: #fff;
	background-color: #5593ea;
	padding: 3px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.wp-pagenavi span.extend {
	text-decoration: none;
	color: #fff;
	background-color: #888;
	padding: 2px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

画像下のCSS

/* ---------------------------------------------------
 PLUGIN WP-Page Navi
---------------------------------------------------- */
.navigation { padding: 15px; text-align:center;}

.wp-pagenavi { font-weight: normal;}
.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi a:visited {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi a:hover {
	border: 1px solid #0090db;
	color: #fff;
	background-color: #2f97cc;
}

.wp-pagenavi a:active {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi span.pages {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	color: #666;
	border: 1px solid #aaa;
	background-color: #e7e8e3;
}

.wp-pagenavi span.current {
	padding: 1px 5px 1px 5px;
	margin: 3px 4px;
	border: 1px solid #aaa;
	color: #fff;
	background-color: #2f97cc;
}

.wp-pagenavi span.extend {
	padding: 1px 5px 1px 5px;
	margin: 3px 4px;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

おすすめ本:いま一番わかりやすい WordPress日本語版でブログサイト構築入門

関連記事

3 コメント» 「wp-pagenavi」プラグインのインストールとCSSのカスタマイズ

  1. […] WP-PageNavi 番号付きのページナビゲーションを表示してくれるプラグイン。 今使ってるテーマは最初からこのプラグインに対応しているため導入。 プラグインを使わなくても同じことを実現してくれるハックがあるので、テーマを変えたら多分外します。 配置を中央揃えにするためpagenavi-css.cssを修正しています。 […]

  2. […] 参考にさせていただいたサイト 「wppagenavi」プラグインのインストールとCSSのカスタマイズ ★ワードプレスのプラグインのメモ by みみみん★   […]

  3. […] ◆「wppagenavi」プラグインのインストールとCSSのカスタマイズ|カメぞうのメモ書き […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*