Yuriko.Net 個別記事

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 にクエリー文字列を含むかどうかを判別させるようにました。パーマリンク構造がスラッシュで終わっていない場合にも対応しています。

トラックバック・コメント »

  1. ゆりこさん、ありがとうございます。

    しかし、いただいたコードの前後をどう記述していいのか初心者のため、
    わからなくなってしまいました。。

    もしよろしければ教えてください。

    ナビゾウからのコメント

上に戻る

※スパム対策プラグインの影響により、すぐにトラックバックが反映されない場合があります。お手数ですが、半日ほど待ってみてください。

コメント返信

※発言の責任を明確にするため「名無し」「通りすがり」「匿名希望」等の匿名は不可とします。捨てハンドルでもいいので必ず名乗ってください。
XHTML (使えるタグ): <a href="" title="" ktai=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> .
※スパム対策プラグインの影響により、すぐにコメント内容が表示されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る