WordPress: WP-PageNavi導入

2009.6.12WordPress

WordPressのページ表示画面で、前後のページ番号を含んだリンクナビゲーションを実現してくれるプラグイン「WP-PageNavi」を導入したよ。導入にあたり「[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン – WordPress 研究室」を参考にさせてもらいました。

実際の動作イメージはこんな感じ。ちょっとGoogleっぽいでしょ？

設置は簡単だったけど、好みの見た目にするためのCSS設定がタイヘンでした。バックアップとしてメモを置いておくね。

設置方法

「PHP « Programming « Portfolio | lesterchan.net」からプラグインをダウンロードして、プラグインフォルダに入れて有効化せよ。いつもと一緒だね。

動作設定

管理画面の「設定」→「PageNavi」を良い感じに設定します。細かな設定を書き写すのが面倒なのでキャプチャ画像を張っておきます。ページ番号総数を消して、「最初のページ」「最後のページ」「次へ」「前へ」の表示を変えて、ページの表示数を９にして、ページ数が多くても大ジャンプしないようにしたのかな。

表示設定

プラグインをインストールしたフォルダにある「pagenavi-css.css」を編集すると、見た目を変更することが出来ます。

最終的にはこんな感じ。表示位置を調整して、文字を大きくして、下線を引いて、色を変えて、間隔を詰めて、extend表示を非表示にしてあります。初期値とは大きく異なる箇所が多いので、参考程度にどうぞ。

.wp-pagenavi {
	padding: 0 2em ;
	font-size:118%;
	background-color:#FFE4E1;
	line-height: 2em ;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:visited {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi a:hover {
	border-bottom: 1px solid #F4A460;
	background-color:#F4F43D;
}
.wp-pagenavi a:active {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	text-decoration: none;
	border-bottom: 1px solid #F4A460;
}
.wp-pagenavi span.pages {
	padding: 2px 2px 2px 2px;
	margin: 2px 2px 2px 2px;
}
.wp-pagenavi span.current {
	padding: 2px 2px 2px 2px;
	margin: 2px;
	font-weight: bold;
}
.wp-pagenavi span.extend {
	display:none;
}