WordPress:Dynamic Menu Highlighting
聚焦动态菜单是一个方式，提供给用户导航的参考点。就像地图上的一点，说明"你在这儿"。WordPress.org利用了动态菜单聚焦。
这个图像图解说明了用户目前正在"DOCS"菜单下看 网页。
通过看菜单列表，因为使用了粗体加黑行的缘故，你可以轻易地确定目前你在"DOCS"里的一个网页上，或者在站点的文件部分。
文章会解释怎样着手制作一个导航菜单，可以动态地突出当前显示的网页，然而有 插件可以帮你完成大多数的工作。
总的看法
有许多组件可以使动态的聚焦的导航运行，它们包括：
- 在页面载入之时，聚焦你当前的位置或者导航的位置
- 用鼠标聚焦其它的导航点。
- 显示子菜单的导航，留下一个breadcrumb trail（当前位置）。（这次文章中没有涉及这个内容）
有许多方式可以取得动态聚焦导航的效果，这些方式包括Java描述语言，flash,HTML和CSS 以及PHP。
<!—注: Ptryk 2006年二月二日十八时三十七分 (格林尼治标准时间)停止在这儿更新，计划不久再继续，可以任意地在上面或者下面编辑，看看讨论-->
基本的导航列表
基本的导航列表可能看起来像：
<ul id="导航"> <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>
在网页的样式表中可能有一点CSS,可以用"当前的" ID特定地设计列表条目使其与其它的列表条目不同。
这处理静态的HTML页很管用，但当处理动态的页面时，就会变得有点复杂。也许这个菜单应该放在站点的工具条里，工具条包含一个单独的文件，可以在多处访问这个文件。很显然，就如上所写的，不管目前你正在浏览什么网页，只有一个条目突出了。这并不是我们所想要的！
使代码变成动态的
PHP允许我们得到渴望得到的聚焦效果，与任何正在浏览的网页起反应。加上WordPress的功能,我们可以动态地测试那个网页正在被浏览，同时基于测试的结果，重新地写代码。
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. 有两种方法可以处理这个。一个要求我们来创建一个变数($current)，这个变数总是能够与我们当前的网页数字相等。它也要求我们将一些CSS放到每一个网页上，而不是将它所有的都放到一个主要的CSS文件上。另一种方法意味着我们处理PHP时候，有点乱，但是它意味着我们要将我们所有的设计放到一个单独的CSS文件中。
第一种方法: 每个网页上都有CSS
这种方法的第一步是在列表上清除一id="current"并且给每一个列表条目添加一个唯一的属性id。
<ul id="导航"> <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'; }
?>
This piece of code uses the is_page(); function to check the title of the current page. If the title is "Page One," the variable $current is assigned the value of "one;" if it is "Page Two," $current becomes "two;" etc., etc. On a WordPress template, this would go in the header.php file between the <head></head> tags.
这个代码使用is_page();功能来检查当前网页的标题。如果标题是"第一页,"变数$current被赋予了数值"一;"如果是"第二页," $current变成了"二;"等等，等等。在一个WordPress模板上，这个会在<head></head> 标签之间进入header.php文件。
Now, we need to write some CSS that will respond to this and highlight the appropriate list item based on what $current 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. 现在我们需要写一些CSS对这个其反应，并且根据$current是什么，来聚焦合适的列表条目。我们不能在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可能看起来像：
#current {
background-color: yellow;
}
</style>
#current {
background-color: yellow;
}
</style>
We'll move that out of the CSS file and into an inline CSS block in the header of our page.
我们会离开那个CSS文件，进入我们的网页标题上一个内嵌的CSS块中。
<style type="text/css">
#current {
background-color: yellow;
}
</style>
<style type="text/css">
#current {
background-color: yellow;
}
</style>
Using a WordPress template, this would go in the header.php file, between the <head></head> tags.
使用一个WordPress模板，这个进入<head></head> 标题之间的header.php文件。
Now we need to make it dynamic. So we will replace the #current selector with a bit of PHP: 现在我们要将它变为动态的。因此我们要用点PHP来取代#current选择器。
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
This will print the value of $current thus completing the CSS and successfully highlighting the appropriate item.
这个会打印出$current的数值，因此会完成CSS并且成功地聚焦了合适的条目。
Method Two: With CSS In One Document
第二种方法: 一个文件中有CSS
With this method, we will also need to remove the single id="current" from the list, but we won't need to add a unique id 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.
通过使用这种方法，我们也需要将单一的id="current"从列表中移走，但是我们不需要给每个列表条目都添加一个唯一的id属性。我们要使PHP做两件事，以使生活更加简单：决定我们当前的网页是那一页;显示"当前的"一个ID,使导航条目突出。
Let's give it a shot. Here's our beginning list of navigation: 让我们尽量试试。这是我们一开始列出的导航：
<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>
<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>
Nice and simple. We'll only be editing the beginning of each line, those opening LI tags. The rest of the list we'll leave alone (for now).
简单美好。我们只要编辑每行的开始，那些打开的L1标签。列表的其余部分，我们会先放着不管（暂时的）。
Next, we need to let PHP do some thinking for us by putting in a few if statements. This is going to help us determine which page we're on and allow PHP to put "current" in the right spot. Here's how it will look: 其次，通过做一些if声明，我们让PHP为我们思考一些东西。这个将会帮助我们决定我们在哪个网页上，允许PHP将"current"放到正确的点上。下面显示它看起来是怎样的：
<li<?php
if (is_home())
{
echo " id=\"current\"";
}
?>>
</li>
<li<?php
if (is_home())
{
echo " id=\"current\"";
}
?>>
</li>
Those two carrots in line 6 are there on purpose. The if statement interrupted our beginning LI tag and that second carrot in line 6 will close the tag we opened in line 1.
第六行的两个carrots是有意放在那儿的。if声明打扰了我们的开始L1标签,第六行的第二个carrot会关闭我们在第一行打开的标签。
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. 记住，这只是列表中的一个条目；你需要为导航中的每一个条目做一些类似的事情。幸运地是，你正使用模板，你只要做一次这个，就行了：在你的header.php模板里。
So if you're on the home page, the resulting code for this one menu item would look like this: 因此，如果你在主页上，这一个菜单条目结果的代码，看起来像：
<li id="current"><a href="#">Page One</a></li>
<li id="current"><a href="#">Page One</a></li>
On any other page, it would look like this:
在其它的任何网页上，它看起来就像：
<li><a href="#">Page One</a></li>
<li><a href="#">Page One</a></li>
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: 下面是导航在你的header.php文件中看起来是怎样的，允许用户看看它们所处的位置；
<ul id="menu">
<!-- To show "current" on the home page -->
<li<?php
if (is_home())
{
echo " id=\"current\">";
?>
<a href="<?php bloginfo('url') ?>/">Home</a>
<?php
}
?></li>
<pre>
<ul id="menu">
<!-- To show "current" on the home page -->
<li<?php
if (is_home())
{
echo " id=\"current\">";
?>
<a href="<?php bloginfo('url') ?>/">Home</a>
<?php
}
?></li>
<!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
<!—在归档网页上显示"current" (所有月份和类别的列表), 个人的文章, 但不是类别10中的个人文章-->
<li<?php
if (is_page('Archive') || is_single() || && !in_category('10'))
{
echo " id=\"current\">";
}
?>
<a href="<?php bloginfo('url') ?>/archive">Archive</a>
<?php
}
?></li>
<li<?php
if (is_page('Archive') || is_single() || && !in_category('10'))
{
echo " id=\"current\">";
}
?>
<a href="<?php bloginfo('url') ?>/archive">Archive</a>
<?php
}
?></li>
<!-- To show "current" on any posts in category 10, called Design -->
<!—怎类别10上的任何文章上显示"current", 称作 设计 -->
<li<?php
if (is_category('Design') || in_category('10) && !is_single())
{
echo " id=\"current\">";
?>
<a href="<?php bloginfo('url') ?>/category/design">Design</a>
<?php
}
?></li>
<!-- To show "current" on the About Page -->
<li<?php
if (is_page('About'))
{
echo " id=\"current\">";
?>
<a href="<?php bloginfo('url') ?>/about">About</a>
<?php
}
?></li>
</ul>
<li<?php if (is_category('Design') || in_category('10) && !is_single()) { echo " id=\"current\">"; ?> <a href="<?php bloginfo('url') ?>/category/design">Design</a> <?php }
?> <li<?php if (is_page('About')) { echo " id=\"current\">"; ?> <a href="<?php bloginfo('url') ?>/about">About</a> <?php } ?>
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.
根据站点周围放号的IDs,用户能一直地确定地知道他们所处的位置，即使他们搜索结果中来到我们的站点。
Using some 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.
使用一些是_功能,我们得出WordPress内部任何网页的身份，并且设置我们的代码来显示任何的导航元素的"current"。
As previously mentioned, the CSS declarations would need to be set up to do something to the current menu item: 如以前所描述的，CSS声明需要被设置，以为当前的菜单条目做一些事情：
#current
{
background-color: #336699;
}
#current
{
background-color: #336699;
}
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网页上。当我们决定在以后的某时，更改这些的时候，我们不需要追溯到不同模板中的颜色变化。这的确使我们一下子就喜欢上了CSS，不是吗？
Examples
例子
The method here will only work with WordPress: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, WordPress:Conditional Tags. 这个方法只对WordPress v1.5+中的新的页面功能所创建的网页起作用。使用不同的is_功能可以轻松地扩展测试其它的情况。Ryan Boren对于不同的is_功能以及它们测试什么有一个好的总结你也可以查看一下站点上的摘要，引起条件反应的标签。
You can see this method in action at Simple Bits Tabbed Navbar from Listamatic. 从Listamatic中的Simple Bits Tabbed Navbar你可以看到这种方法在实施。
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. 你在自定义这种方法的时候以及创建大体的菜单和导航列表时，这些资源中的一些信息，你可能觉得有用。
- WordPress:Conditional Tags
- 引起条件反应的标签
- WordPress:Creating Horizontal Menus
- 创建横向菜单
- WordPress:Styling Lists with CSS
- CSS设计表
- Listamatic
- Listamatic
- Ryan Boren and the is_ functions
- Ryan Boren and the is_ functions
- Dynamic menu highlight including home
Plugins
插件
These plugins take care of the complicated php coding for you, leaving you to just set up the css. 这些插件为你照顾复杂的php译码，你只要设置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.
- WP-pagesnav 插件 –创建一个动态的菜单使用普通的网页结构。这个插件包括动态聚焦和多个不同级别选项的菜单。
- 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.
- dTabs – 动态制表符插件 – 能让你轻易地为网页，目录，文章，主页，归档，和有着可选择的下拉菜单的管理面板中的书签设置动态制表符。如果使用Kubrick 制表符主题，无论什么代码也不需要。
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.