- サイトデザイン工事中です。ご意見をお寄せください。
- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
ダイナミックハイライト
この項目「ダイナミックハイライト」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。
この画像は、訪問者がメニュー"DOCS" のページを閲覧していることを示します。
メニューを見ると、黒っぽい太線が表示されているので、"DOCS" のページ、すなわちこのサイトのドキュメントセクションのページを閲覧していることが分かりやすくなっています。
この記事では、現在表示されているページをダイナミックハイライトするナビゲーションメニューの作り方を解説します。もっとも、必要な作業の大部分を行ってくれるプラグインを利用することもできます。
目次 |
概要
ダイナミックハイライトナビゲーションを実行するためのコンポーネントがいくつかあります。主なものは以下のとおりです。
- 現在いる所をハイライトする。
- マウスポインタのある所をハイライトする。
- ナビゲーションのサブメニューを表示し、パンくずリストを表示する。(今のところ、この記事では扱っていません)
ダイナミックハイライトナビゲーションを実現する方法には、javascript, flash, PHP と組合せた HTML と CSS 等があります。CSS/PHP を用いる方法以外については、他の記事を参照してください。
基本的なナビゲーションリスト
基本的なナビゲーションリストは、以下のようなものです。
<ul id="navigation"> <li><a href="#">Page One</a></li> <li id="current"><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> <li><a href="#">Page Four</a></li> </ul>
このページのスタイルシートには、ID が "current" のリストアイテムに他と異なるスタイルを指定する CSS が書かれていることでしょう。
静的 HTML ページならこれで良いのですが、動的ページを扱う場合は少しややこしくなります。おそらくこのメニューはサイドバーの中にあり、サイドバーはいろんな所から呼び出されているでしょう。当然ですが、上の記述では、どのページを閲覧しているときも同じアイテムがハイライトされます。これではちっとも嬉しくありません。
コードを動的にする
PHP を利用すると、閲覧しているページに応じて適切なハイライト効果を追加することができます。WordPress の is_ functions と併用すると、どのページを閲覧しているか動的に調べ、その結果に従ってコードを書き換えることができます。
これには 2 つの方法があります。1 つの方法は、現在のページ番号と等しい変数 ($current) を必要とします。また、メインの CSS ドキュメントに全て記述するのではなく、CSS の一部分を各ページに記述する必要があります。もう 1 つの方法は、多少ややこしい PHP を使いますが、CSS ドキュメントを一ヶ所にまとめたままで利用できます。
方法1: 各ページに CSS
まず、リストから id="current" を取り除き、リストアイテムのそれぞれに一意の id を付与します。
<ul id="navigation"> <li id="one"><a href="#">Page One</a></li> <li id="two"><a href="#">Page Two</a></li> <li id="three"><a href="#">Page Three</a></li> <li id="four"><a href="#">Page Four</a></li> </ul>
次に、PHP スクリプトを挿入します。
どのページが閲覧されているか調べてその結果で変数を定義する条件文を書きます。
<?php
if ( is_page('Page One') ) { $current = 'one'; }
elseif ( is_page('Page Two') ) { $current = 'two'; }
elseif ( is_page('Page Three') ) { $current = 'three'; }
elseif ( is_page('Page Four') ) { $current = 'four'; }
?>
このコードでは、現在のページのタイトルを調べる is_page(); 関数を使用しています。タイトルが "Page One" なら、変数 $current に値 "one" が付与され、タイトルが "Page Two" なら、変数 $current に値 "two" が付与され、、、となります。このコードは、WordPress テンプレートの header.php ファイルの <head></head> タグ間に記述します。
このコードに対応する、<head></head> の値に従って適切なリストアイテムにハイライトする CSS を書く必要があります。CSS ファイルに動的コンテンツを記述することはできないので、CSS ファイルに書くわけにはいきません。そのため、CSS ファイルからリストアイテムをハイライトする記述を切り取り、動的コンテンツが動作するページに貼り付けます。
ハイライトするアイテムの背景を黄色にする単純なハイライトがしたいとしましょう。CSS は以下のようになります。
#current {
background-color: yellow;
}
</style>
CSS ファイルからこの部分を切り取り、ページのヘッダー部分のインライン CSS ブロックに貼り付けます。
<style type="text/css">
#current {
background-color: yellow;
}
</style>
WordPress テンプレートでは、このコードは header.php ファイルの <head></head> タグ間に記述します。
そしてこれを動的にする必要があります。#current セレクタを PHP コードに変更します。
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
この PHP コードは $current の値を表示するので、CSS が完成し、適切なアイテムをハイライトすることができます。
方法2: CSS は一ヶ所に
この方法の場合も、リストから id="current" を取り除きます。しかし今回はリストアイテムそれぞれに一意の id を付与する必要はありません。PHP に、次の 2 つのことをまかせれば楽ちんです。現在閲覧しているページを決めること。そのアイテムを目立たせる ID "current" を表示すること。
試しにやってみましょう。以下のようなナビゲーションがあります。
<ul id="navigation"> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> <li><a href="#">Page Four</a></li> </ul>
非常にシンプルです。各行の開始タグ <li> を編集するだけです。残りの部分は (今のところは) そのままで構いません。
いくつか if 文を記述します。PHP に、訪問者がどのページを閲覧しているかを決めさせ、適切な場所に "current" を挿入させるためです。上の <li> を以下のようにします。
<li<?php
if (is_home())
{
echo " id=\"current\"";
}
?>><a href="#">Page One</a></li>
</li>
6 行目の連続する大なり記号は、意図したものです。開始タグ <li> に if 文が割り込んでいて、6 行目の 2 つ目の記号が 1 行目のタグを閉じます。
各リストにアイテムが 1 つであることを忘れないでください。ナビゲーションの全アイテムにこれと同様のことを行う必要があるでしょう。嬉しいことに、テンプレートを使用していれば、header.php テンプレートで行うだけで良いのです。
訪問者がホームページを閲覧している場合、WordPress が生成する HTML コードは以下のようになります。
<li id="current"><a href="#">Page One</a></li>
他のページでは、以下のようになります。
<li><a href="#">Page One</a></li>
このリンクのスタイルを設定すると、訪問者がホームページを閲覧しているときに、ナビゲーションアイテムを目立たせることができます。
header.php ドキュメントに記載する、訪問者がどのページを閲覧しているか分かりやすくする例を以下に示します。
<ul id="menu">
<!-- ホームページで "current" を表示する -->
<li<?php
if (is_home())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- アーカイブページ (全ての月とカテゴリー)、カテゴリー 10 以外の個別記事 で "current" を表示する -->
<li<?php
if (is_page('Archive') || is_single() && !in_category('10'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/archive">Archive</a>
</li>
<!-- カテゴリー 10 Design の全ての記事で "current" を表示する(!is_single() は is_single() の間違い？) -->
<li<?php
if (is_category('Design') || in_category('10') && !is_single())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/category/design">Design</a>
</li>
<!-- About ページで "current" を表示する -->
<li<?php
if (is_page('About'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/about">About</a>
</li>
</ul>
サイトで適切な ID を用意しておくと、訪問者が検索エンジンから来た場合でも、自分がどこにいるかいつでも知ることができます。
is_ functions を使用すると、WordPress のどのページにいるか特定することができ、任意のナビゲーション要素に "current" を表示するように設定できます。
既に述べたように、"current" メニューアイテムについて何らかの CSS 宣言を設定する必要があるでしょう。
#current
{
background-color: #336699;
}
上記のようにするとナビゲーションアイテムが目立つことでしょう。
この方法を使用すると、メイン CSS ページにまとめておくことができます。将来変更するときに、いくつかのテンプレートを調べていく必要がなくなります。これこそ、皆が CSS の虜になっている理由ですよね？
例
この機能は、WordPress v1.5 以降のページ機能で作られたページでのみ動作します。別の is_ 関数を使用すれば、他の条件にも容易に拡張できます。Ryan Boren が、様々な is_ 関数およびその関数が何を調べるかについての優れたサマリーを作成しています。このサイトにあるサマリー条件分岐タグも参考にしてください。
Listamatic の Simple Bits Tabbed Navbar で動作サンプルを閲覧することができます。
外部資料
この方法をカスタマイズするときや、メニューやナビゲーションリストを作成するとき全般に役立つ情報リンクです。
- 条件分岐タグ
- Creating Horizontal Menus /en
- Styling Lists with CSS /en
- Listamatic
- Ryan Boren and the is_ functions
- Dynamic menu highlight including home
プラグイン
プラグインがあなたに代わって、面倒な PHP コーディングを行ってくれるので、CSS の設定に集中できるでしょう。
- WP-pagesnav plugin - 通常のページ構造を利用してダイナミックメニューを作成します。オプションでダイナミックハイライトとマルチレベルに対応しています。
- dTabs - Dynamic Tabs plugin - 管理パネルで、ページ、カテゴリー、投稿、ホームページ、アーカイブ、ブックマークにダイナミックタブを設定することができ、ドロップダウンメニューも選択できます。Kubrick Tabs テーマと併用すると、コーディングを行う必要がありません。
最新英語版： WordPress Codex » Dynamic Menu Highlighting （最新版との差分）
