当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「ダイナミックハイライト」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(原文をコピー)
 
(3 章まで翻訳)
1行目: 1行目:
 
{{NeedTrans}}
 
{{NeedTrans}}
  
Dynamic menu highlighting is a way to give users a reference point with which to navigate. It is like the dot on the map that says "you are here". WordPress.org has utilized dynamic menu highlighting.<div style="border:1px solid blue; width: 90%; margin: 20px; padding:20px">
+
ダイナミックハイライトは、訪問者にナビゲーションの参照点を提供します。地図上の点が「現在地」を示すようなものです。WordPress.org はダイナミックハイライトを採用しています。<div style="border:1px solid blue; width: 90%; margin: 20px; padding:20px">
[[Image:Dynamic_menu_highlighting-00.jpg|center|This image illustrates that the user is currently looking at a page under the menu "DOCS".]]<pre>This image illustrates that the user is currently looking
+
[[Image:Dynamic_menu_highlighting-00.jpg|center|This image illustrates that the user is currently looking at a page under the menu "DOCS".]]<pre>この画像は、訪問者がメニュー"DOCS" のページを閲覧していることを示します。</pre></div>
at a page under the menu "DOCS".</pre></div>
+
メニューを見ると、黒っぽい太線が表示されているので、"DOCS" のページ、すなわちこのサイトのドキュメントセクションのページを閲覧していることが分かりやすくなっています。
By looking at the menu list you can, due to the use of the dark thick line easily ascertain that you are currently on a page within the "DOCS" or documentation section of the site.
+
  
This article will explain how to go about making a navigation menu that dynamically highlights the currently displayed page, however there are [[Dynamic_Menu_Highlighting#Plugins | plugins]] available that can do most of the work for you.
+
この記事では、現在表示されているページをダイナミックハイライトするナビゲーションメニューの作り方を解説します。もっとも、必要な作業の大部分を行ってくれる [[ダイナミックハイライトPlugins | プラグイン]] を利用することもできます。
  
 +
== 概要 ==
 +
ダイナミックハイライトナビゲーションを実行するためのコンポーネントがいくつかあります。主なものは以下のとおりです。
 +
#現在いる所をハイライトする。
 +
#マウスポインタのある所をハイライトする。
 +
#ナビゲーションのサブメニューを表示し、パンくずリストを表示する。(今のところ、この記事では扱っていません)
  
== Overview ==
+
ダイナミックハイライトナビゲーションを実現する方法には、javascript, flash, [[PHP]] と組合せた HTML と [[CSS]] 等があります。[[CSS]]/[[PHP]] を用いる方法以外については、他の記事を参照してください。
There are a number of components that make dynamically highlighted navigation work, they include :
+
#highlighting between page loads your current location or navigation position.
+
#highlighting other navigation points on mouse over.
+
#showing submenu's of navigation, leaving a breadcrumb trail.(this is not covered by this article at this time)
+
 
+
There are also many ways to achieve dynamically highlighted navigation these include for example javascript, flash, HTML and [[CSS]] along with [[PHP]]. You will need to go outside of this article to find help with anything but the [[CSS]]/[[PHP]] method.
+
  
 
<!-- NOTE: [[User:Ptryk|Ptryk]] 18:37, 2 Feb 2006 (GMT) stopped updating here, plan to continue shortly, feel free to edit below or above. see discussion -->
 
<!-- NOTE: [[User:Ptryk|Ptryk]] 18:37, 2 Feb 2006 (GMT) stopped updating here, plan to continue shortly, feel free to edit below or above. see discussion -->
  
== Basic Navigation Lists ==
+
== 基本的なナビゲーションリスト ==
  
The basic navigation list might look something like this:
+
基本的なナビゲーションリストは、以下のようなものです。
  
 
<pre>
 
<pre>
32行目: 30行目:
 
</pre>
 
</pre>
  
And there would likely be some bit of [[CSS]] in the page's stylesheet that would specifically style list items with the "current" ID differently from other list items.
+
このページのスタイルシートには、ID が "current" のリストアイテムに他と異なるスタイルを指定する [[CSS]] が書かれていることでしょう。
  
This works fine with static HTML pages, but when dealing with dynamic pages, things become a little more complicated.  Perhaps this menu is supposed to be in a site's sidebar and the sidebar is contained in a single file that is called from multiple places.  Obviously, as written, only one item would ever be highlighted, no matter what page is actually being viewed.  That is not what we want at all!
+
静的 HTML ページならこれで良いのですが、動的ページを扱う場合は少しややこしくなります。おそらくこのメニューはサイドバーの中にあり、サイドバーはいろんな所から呼び出されているでしょう。当然ですが、上の記述では、どのページを閲覧しているときも同じアイテムがハイライトされます。これではちっとも嬉しくありません。
  
== Making the Code Dynamic ==
+
== コードを動的にする ==
  
PHP allows us to add the desired highlighting effect that reacts to whatever page is being viewed.  Coupled with WordPress's [[Conditional_Tags|is_ functions]], we can dynamically test what page is being viewed and then rewrite the code based on the results of that test.
+
PHP を利用すると、閲覧しているページに応じて適切なハイライト効果を追加することができます。WordPress の [[Conditional_Tags|is_ functions]] と併用すると、どのページを閲覧しているか動的に調べ、その結果に従ってコードを書き換えることができます。
  
There are two ways to go about this. One requires us to create a variable ($current) that will always equal the page number we're on. It also requires us to put some CSS on each page instead of keeping it all in the main CSS document. The other way means a bit more of a mess with PHP, but it means we get to keep all our styling in a single CSS document.
+
これには 2 つの方法があります。1 つの方法は、現在のページ番号と等しい変数 ($current) を必要とします。また、メインの CSS ドキュメントに全て記述するのではなく、CSS の一部分を各ページに記述する必要があります。もう 1 つの方法は、多少ややこしい PHP を使いますが、CSS ドキュメントを一ヶ所にまとめたままで利用できます。
  
== Method One: With CSS On Each Page ==
+
=== 方法1: 各ページに CSS ===
 +
<!-- 原文は == だが、=== のほうが適切でしょう。--~~~~-->
  
The first step in this method is to remove the one <tt>id="current"</tt> from the list and then add a unique <tt>id</tt> attribute to each list item.
+
まず、リストから <tt>id="current"</tt> を取り除き、リストアイテムのそれぞれに一意の <tt>id</tt> を付与します。
  
 
<pre>
 
<pre>
55行目: 54行目:
 
</pre>
 
</pre>
  
The next part is where PHP comes in.
+
次に、PHP スクリプトを挿入します。
  
We need to write a conditional statement that will test what page is being viewed and define a variable based on the results of that test.
+
どのページが閲覧されているか調べてその結果で変数を定義する条件文を書きます。
  
 
<pre>
 
<pre>
68行目: 67行目:
 
</pre>
 
</pre>
  
This piece of code uses the <tt>is_page();</tt> function to check the title of the current page.  If the title is "Page One," the variable <tt>$current</tt> is assigned the value of "one;" if it is "Page Two," <tt>$current</tt> becomes "two;" etc., etc.  On a WordPress template, this would go in the <tt>header.php</tt> file between the <tt><head></head></tt> tags.
+
このコードでは、現在のページのタイトルを調べる <tt>is_page();</tt> 関数を使用しています。タイトルが "Page One" なら、変数 <tt>$current</tt> に値 "one" が付与され、タイトルが "Page Two" なら、変数 <tt>$current</tt> に値 "two" が付与され、、、となります。このコードは、WordPress テンプレートの <tt>header.php</tt> ファイルの <tt><head></head></tt> タグ間に記述します。
  
Now, we need to write some CSS that will respond to this and highlight the appropriate list item based on what <tt>$current</tt> is. We can't do this in a CSS file because we can't put dynamic content in a CSS file.  So we need to move the CSS that highlights the list item out of the CSS file and into our page itself where the dynamic content will work.
+
このコードに対応する、<tt><head></head></tt>  の値に従って適切なリストアイテムにハイライトする CSS を書く必要があります。CSS ファイルに動的コンテンツを記述することはできないので、CSS ファイルに書くわけにはいきません。そのため、CSS ファイルからリストアイテムをハイライトする記述を切り取り、動的コンテンツが動作するページに貼り付けます。
  
So, say we just wanted to do a simple highlight by changing the background color of the highlighted item to yellow.  Our CSS might look like this:
+
ハイライトするアイテムの背景を黄色にする単純なハイライトがしたいとしましょう。CSS は以下のようになります。
  
 
<pre>
 
<pre>
81行目: 80行目:
 
</pre>
 
</pre>
  
We'll move that out of the CSS file and into an inline CSS block in the header of our page.
+
CSS ファイルからこの部分を切り取り、ページのヘッダー部分のインライン CSS ブロックに貼り付けます。
  
 
<pre>
 
<pre>
91行目: 90行目:
 
</pre>
 
</pre>
  
Using a WordPress template, this would go in the <tt>header.php</tt> file, between the <tt><head></head></tt> tags.
+
WordPress テンプレートでは、このコードは <tt>header.php</tt> ファイルの <tt><head></head></tt> タグ間に記述します。
  
Now we need to make it dynamic.  So we will replace the <tt>#current</tt> selector with a bit of PHP:
+
そしてこれを動的にする必要があります。<tt>#current</tt> セレクタを PHP コードに変更します。
  
 
<pre>
 
<pre>
103行目: 102行目:
 
</pre>
 
</pre>
  
This will print the value of <tt>$current</tt> thus completing the CSS and successfully highlighting the appropriate item.
+
この PHP コードは <tt>$current</tt> の値を表示するので、CSS が完成し、適切なアイテムをハイライトすることができます。
 
+
== Method Two: With CSS In One Document ==
+
  
With this method, we will also need to remove the single <tt>id="current"</tt> from the list, but we won't need to add a unique <tt>id</tt> attribute to each list item. We'll let PHP do two things to make life easy: decide which page is our current page; display an ID of "current" to make that navigation item stand out.
+
=== 方法2: CSS は一ヶ所に ===
 +
<!-- 原文は == だが、=== のほうが適切でしょう。--~~~~-->
 +
この方法の場合も、リストから <tt>id="current"</tt> を取り除きます。しかし今回はリストアイテムそれぞれに一意の <tt>id</tt> を付与する必要はありません。PHP に、次の 2 つのことをまかせれば楽ちんです。現在閲覧しているページを決めること。そのアイテムを目立たせる ID "current" を表示すること。
  
Let's give it a shot. Here's our list of navigation at the outset:
+
試しにやってみましょう。以下のようなナビゲーションがあります。
  
 
<pre>
 
<pre>
120行目: 119行目:
 
</pre>
 
</pre>
  
Nice and simple. We'll only be editing the beginning of each line, those opening <tt>&lt;li&gt;</tt> tags. The rest of the list we'll leave alone (for now).
+
非常にシンプルです。各行の開始タグ <tt>&lt;li&gt;</tt> を編集するだけです。残りの部分は (今のところは) そのままで構いません。
  
We'll put in a few <tt>if</tt> statements. This will let PHP determine which page the user is on and allow it to put "current" in the right spot. Here's how one of those <tt>&lt;li&gt;</tt> elements from above will look:
+
いくつか <tt>if</tt> 文を記述します。PHP に、訪問者がどのページを閲覧しているかを決めさせ、適切な場所に "current" を挿入させるためです。上の <tt>&lt;li&gt;</tt> を以下のようにします。
  
 
<pre>
 
<pre>
134行目: 133行目:
 
</pre>
 
</pre>
  
The pair of adjacent greater-than signs in line 6 is there on purpose. The <tt>if</tt> statement interrupted our beginning <tt>&lt;li&gt;</tt> tag and that second caret in line 6 will close the tag we opened in line 1.
+
6 行目の連続する大なり記号は、意図したものです。開始タグ <tt>&lt;li&gt;</tt> に <tt>if</tt> 文が割り込んでいて、6 行目の 2 つ目の記号が 1 行目のタグを閉じます。
  
Remember, this is just one item in the list; you'll need to do something similar to this for every item in your navigation. The good news is that if you're using templates, you'll only need to do this once: in your header.php template.
+
各リストにアイテムが 1 つであることを忘れないでください。ナビゲーションの全アイテムにこれと同様のことを行う必要があるでしょう。嬉しいことに、テンプレートを使用していれば、<tt>header.php</tt> テンプレートで行うだけで良いのです。
  
The result will be that if the user is on the home page, the HTML code WordPress will generate for this one menu item would look like this:
+
訪問者がホームページを閲覧している場合、WordPress が生成する HTML コードは以下のようになります。
  
 
<pre>
 
<pre>
144行目: 143行目:
 
</pre>
 
</pre>
  
On any other page, it would look like this:
+
他のページでは、以下のようになります。
  
 
<pre>
 
<pre>
150行目: 149行目:
 
</pre>
 
</pre>
  
Now we can style that link so that when users are on the home page, the navigation item makes it very clear.
+
このリンクのスタイルを設定すると、訪問者がホームページを閲覧しているときに、ナビゲーションアイテムを目立たせることができます。
  
Here's an idea of how navigation could look in your header.php document that would allow users to see where they are:
+
<tt>header.php</tt> ドキュメントに記載する、訪問者がどのページを閲覧しているか分かりやすくする例を以下に示します。
  
 
<pre>
 
<pre>
 
<ul id="menu">
 
<ul id="menu">
  
         <!-- To show "current" on the home page -->
+
         <!-- ホームページで "current" を表示する -->
 
         <li<?php  
 
         <li<?php  
 
                 if (is_home())  
 
                 if (is_home())  
166行目: 165行目:
 
         </li>
 
         </li>
  
         <!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
+
         <!-- アーカイブページ (全ての月とカテゴリー)、カテゴリー 10 以外の個別記事 で "current" を表示する -->
 
         <li<?php  
 
         <li<?php  
 
                 if (is_page('Archive') || is_single() && !in_category('10'))   
 
                 if (is_page('Archive') || is_single() && !in_category('10'))   
175行目: 174行目:
 
         </li>
 
         </li>
  
         <!-- To show "current" on any posts in category 10, called Design -->
+
         <!-- カテゴリー 10 Design の全ての記事で "current" を表示する(!is_single() は is_single() の間違い?--~~~~) -->
 
         <li<?php
 
         <li<?php
                 if (is_category('Design') || in_category('10') && !is_single())
+
                 if (is_category('Design') || in_category('10') && !is_single())  
 
                 {
 
                 {
 
                 echo " id=\"current\"";  
 
                 echo " id=\"current\"";  
184行目: 183行目:
 
         </li>
 
         </li>
  
         <!-- To show "current" on the About Page -->
+
         <!-- About ページで "current" を表示する -->
 
         <li<?php  
 
         <li<?php  
 
                 if (is_page('About'))  
 
                 if (is_page('About'))  
195行目: 194行目:
 
</pre>
 
</pre>
  
With some well-placed IDs around our site, users will be sure to know exactly where they are at all times, even when they come to our site from search results.
+
サイトで適切な ID を用意しておくと、訪問者が検索エンジンから来た場合でも、自分がどこにいるかいつでも知ることができます。
  
Using some [[Conditional_Tags|is_ functions]], we can work to determine the identity of any page within WordPress and set our code to show "current" for any of our navigation elements.
+
[[Conditional_Tags|is_ functions]] を使用すると、WordPress のどのページにいるか特定することができ、任意のナビゲーション要素に "current" を表示するように設定できます。
  
As previously mentioned, the CSS declarations would need to be set up to do something to the current menu item:
+
既に述べたように、"current" メニューアイテムについて何らかの CSS 宣言を設定する必要があるでしょう。
  
 
<pre>
 
<pre>
208行目: 207行目:
 
</pre>
 
</pre>
  
That navigation item is sure to stand out, now.
+
上記のようにするとナビゲーションアイテムが目立つことでしょう。
  
Using this method, all our CSS stays in our main CSS page. We don't have to track down color changes in different templates when we decide to change things around sometime in the future. That was really what made us all fall in love with CSS in the first place, right?
+
この方法を使用すると、メイン CSS ページにまとめておくことができます。将来変更するときに、いくつかのテンプレートを調べていく必要がなくなります。これこそ、皆が CSS の虜になっている理由ですよね?
  
 
== Examples ==
 
== Examples ==
235行目: 234行目:
  
  
{{原文||66122}}<!-- 23:17, 14 January 2009 Sampablokuper -->
+
{{原文|Dynamic_Menu_Highlighting|66122}}<!-- 23:17, 14 January 2009 Sampablokuper -->
 
{{DEFAULTSORT:だいなみっくはいらいと}}
 
{{DEFAULTSORT:だいなみっくはいらいと}}
 
[[Category:WordPress Lessons]]
 
[[Category:WordPress Lessons]]
 
[[Category:デザインとレイアウト]]
 
[[Category:デザインとレイアウト]]
 
{{Copyedit}}
 
{{Copyedit}}

2009年2月17日 (火) 23:16時点における版

このページ「ダイナミックハイライト」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

ダイナミックハイライトは、訪問者にナビゲーションの参照点を提供します。地図上の点が「現在地」を示すようなものです。WordPress.org はダイナミックハイライトを採用しています。
この画像は、訪問者がメニュー"DOCS" のページを閲覧していることを示します。

メニューを見ると、黒っぽい太線が表示されているので、"DOCS" のページ、すなわちこのサイトのドキュメントセクションのページを閲覧していることが分かりやすくなっています。

この記事では、現在表示されているページをダイナミックハイライトするナビゲーションメニューの作り方を解説します。もっとも、必要な作業の大部分を行ってくれる プラグイン を利用することもできます。

概要

ダイナミックハイライトナビゲーションを実行するためのコンポーネントがいくつかあります。主なものは以下のとおりです。

  1. 現在いる所をハイライトする。
  2. マウスポインタのある所をハイライトする。
  3. ナビゲーションのサブメニューを表示し、パンくずリストを表示する。(今のところ、この記事では扱っていません)

ダイナミックハイライトナビゲーションを実現する方法には、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 の虜になっている理由ですよね?

Examples

The method here will only work with Pages created by the new Page feature in WordPress v1.5+. It could be easily expanded to test for other conditions by using different is_ functions. Ryan Boren has a good summary of the different is_ functions and what they test for. You can also check the onsite summary, Conditional Tags.

You can see this method in action at Simple Bits Tabbed Navbar from Listamatic.

Resources

These links have some information that you might find useful in your customization of this method and in the creation of menus and navigation lists in general.

Plugins

These plugins take care of the complicated php coding for you, leaving you to just set up the css.

  • WP-pagesnav plugin - creates a dynamic menu utilizing the normal Page structure. This plugin includes dynamic highlighting and menus of multiple levels with options.
  • dTabs - Dynamic Tabs plugin - enables you to easily set up dynamic tabs for pages, categories, posts, the home page, archives, and bookmarks in the admin panel with optional drop down menus. No coding whatsoever is needed if used with the Kubrick Tabs theme.


最新英語版: WordPress Codex » Dynamic_Menu_Highlighting最新版との差分

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。