WordPress: WP-PageNavi導入

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

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

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

設置方法

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

動作設定

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

WP_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;
}

テーマファイルの編集

最後にページナビゲーションを表示したい場所に、以下のコードを追加してください。

wp_pagenavi();

修正したファイルはindex.php、archive.php、category.php、search.php、tag.phpで、主コンテンツの上下にページナビゲーションを表示するようにしました。

あとは実動作を確認しつつ、見た目の表示を修正してみてください。