WP-PageNaviタグの投稿

2008-08-06
晴れ

WP-PageNavi を使わずにナビゲーション表示 (改良版)

ゆりこ による 17:07:47 の投稿
カテゴリー: WordPressハック,更新履歴
タグ: ,

ナビゲーションのサンプル画像

先月下旬に、「WP-PageNavi を使わずにナビゲーション表示」というテクニックを公開しましたが、パーマリンクを使っていても検索などクエリー文字列を使う URL の場合 (http://example.com/?s=検索文字列 など)、不具合が起きることが分かりました。

そこで、全面的に変更したものに差し替えます (元記事も新しいコードに入れ換えてあります)。ここまで長くなると、関数化した上でテーマの functions.php に切り出して、index.php 等からはその関数を呼び出す方がいいですね。

<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>
2008-07-26
晴れ

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

ゆりこ による 00:35:21 の投稿
カテゴリー: WordPressハック
タグ: ,

ナビゲーションのサンプル画像

複数ページをいっぺんに飛べるナビゲーションを実現するプラグインとして 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 サンプル画像

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

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

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