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

Tweet

インストールは通常通り「/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日本語版でブログサイト構築入門

関連記事

• Ktai Styleのthemes（テーマ）monolithのカスタマイズ
• カスタム投稿タイプとカスタムタクソノミーの追加・・WordPress
• アーカイブのタイトル一覧表示「Custom Posts Per Page」
• カスタム投稿タイプでもAddQuicktagを使えるように
• WordPressプラグイン「Timthumb Vulnerability Scanner」でTimThumbの脆弱性への対応