TwentyEleven、TwentyTwelveでWP-PageNaviの設置方法

本記事で紹介する方法でTwentyEleven、TwentyTwelveいずれも正常動作を確認しました。

TwentyElevenでWP-PageNaviの設置にいつも手間取るので、備忘録。
特にFunctions.phpいじってると、突然真っ白になるので、怖い思いする。
やる前に必ずFunctions.phpのBackupとっておきましょう。

Pluginをインストールして有効化したら、Functions.phpの以下のコードを

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>

を

 <?php wp_pagenavi(); ?>

に変更する。
とりあえず、上記でWP-PageNaviは機能する。。。。少なくともこのサイトではうまくいきました。（TOPページにて確認してみてください。）
個人的に大きな勘違いをしていたのだが、単一記事のページでPageNaviは機能しない。
基本的に、カテゴリや投稿年月などArchiveページでPageNaviは表示される。
TOPページを固定ページにしていたら、当然PageNaviは働かない。
無理やり単一記事ページに<?php wp_pagenavi(); ?>を入れて、表示することもできますが、
単一記事なだけに１しか表示されません。（当たり前）
Topページに一記事だけを全文表示させてPagenaviを機能させれば、見た目は単一記事でPagenaviが働いているようには見えます。
管理画面の設定＞表示設定から1ページに表示する最大投稿数を1件にすれば実現できます。
ちなみに当サイトではPagenavi-css.cssを編集して見た目をカスタマイズしてます。
コードは以下のとおりです。

.wp-pagenavi {
	clear: both;
	font-size: 16px;
}
.wp-pagenavi a, .wp-pagenavi span {
	float: left;
	display: block;
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 3px 5px;
	margin: 2px;
	min-width: 24px;
	height: 24px;
	text-align: center;
	text-decoration: none;
	border: 1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 1px 1px 1px #777;
	-moz-box-shadow: 1px 1px 1px #777;
	box-shadow: 1px 1px 1px #777;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}
.wp-pagenavi span.current {
	font-weight: bold;
	background: #719CFF;
	color: #fff;
}

ご参考に。

追記

ちょっとフラットなデザインに変えてみたので、今は変更しております。(2013/06/21)
[ad]