2008年7月26日の投稿

WP-PageNavi を使わずにナビゲーション表示

複数ページをいっぺんに飛べるナビゲーションを実現するプラグインとして WP-PageNavi は人気があります。しかし、このプラグインは、WordPress のバージョンに応じて使用するバージョンが異なっていて、ちょっと使いにくい面があります。

実は、WordPress の標準機能として、こういうナビゲーションを実現するテンプレートタグが存在します。管理パネルなどで使用されています。そこで、テーマでこのテンプレートタグを使えば、WP-PageNavi を使うことなく同等の機能が実現可能です。([追記: 2008-08-06] 根本的に変更しました)

<div class="tablenav"><?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
	$paginate_format = '';
	$paginate_base = add_query_arg('paged', '%#%');
} else {
	$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') . 
	user_trailingslashit('page/%#%/', 'paged');;
	$paginate_base .= '%_%';
}
echo paginate_links( array(
	'base' => $paginate_base,
	'format' => $paginate_format,
	'total' => $wp_query->max_num_pages,
	'mid_size' => 5,
	'current' => ($paged ? $paged : 1),
)); ?></div>

<div class="tablenav"><?php echo paginate_links( array(
	'base' => trailingslashit(get_pagenum_link(1)) . '%_%',
	'format' => user_trailingslashit('page/%#%/', 'paged'),
	'total' => $wp_query->max_num_pages,
	'mid_size' => 3,
	'current' => ($paged ? $paged : 1),
)); ?></div>

base, format の部分は、パーマリンク設定によって変更が必要です。標準のパーマリンクの場合は以下のようにしてください。←新しいコードは両方対応です。

'base' => add_query_arg( 'paged', '%#%' ),
'format' => '',

これだけだと見た目がいまいちなので、style.css に以下の記述を入れてください。なお、当サイトでは違う色にしています。

.tablenav {
	color: #2583ad;
	background:white;
	margin: 1em auto;
	line-height:2em;
	text-align:center;
}

a.page-numbers, .tablenav .current {
	color: #00019b;
	padding: 2px .4em;
	border:solid 1px #ccc;
	text-decoration:none;
	font-size:smaller;
}

a.page-numbers:hover {
	color:white;
	background: #328ab2;
}

.tablenav .current {
	color: white;
	background: #328ab2;
	border-color: #328ab2;
	font-weight:bold:
}

.tablenav .next, .tablenav .prev {
	border:0 none;
	background:transparent;
	text-decoration:underline;
	font-size:smaller;
	font-weight:bold;
}

これで、ほぼ WP-PageNavi と同等の表示になりました。というか、WordPress のデフォルトテーマがこうなっていてもいいと思うんですが……。

[追記] WP-PageNavi は、旅行記で以前ちょろっと使っていましたが、「最初へ」が「前へ」より左にあったり、「最後へ」が「次へ」よりも右にあるのが嫌だったので改造していました (「前へ」を「最初へ」よりも左に持っていく等)。論理的には不自然ですが、「一番左／右にあるものをクリックすれば、1ページずつの移動になる」わけで、直感的であり使いさすさは上だと思います。paginate_links() はまさにそういうナビゲーションを吐き出すので、「よくできている」と思います。みなさんも、ぜひお試しください。

[追記 2008-07-27] パーマリンク構造がスラッシュで終わってない場合 (/%year%/%monthnum%/%day%/%postname%.html のような場合) は不具合が出てしまうため、対策したコードに変更しました (掲載したコードは変更ずみです)。厳密には「1ページ目」へのリンクにスラッシュが残ってしまいますが、WordPress 2.3 以降では自動的にスラッシュなしにリダイレクトされるため Not Found にはなりません。これを回避するにはちょっとコードの改良が必要っぽいです。

[追記 2008-08-06] パーマリンク構造を設定していても、検索などクエリー文字列を使った URL だと動作が変でした。このため、URL にクエリー文字列を含むかどうかを判別させるようにました。パーマリンク構造がスラッシュで終わっていない場合にも対応しています。

コメントを見る (96件) | 上に戻る