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的功能,我们可以动态地测试那个网页正在被浏览，同时基于测试的结果，重新地写代码。 有两种方法可以处理这个。一个要求我们来创建一个变数($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'; }
?>
这个代码使用is_page();功能来检查当前网页的标题。如果标题是"第一页,"变数$current被赋予了数值"一;"如果是"第二页," $current变成了"二;"等等，等等。在一个WordPress模板上，这个会在<head></head> 标签之间进入header.php文件。
现在我们需要写一些CSS对这个起反应，并且根据$current是什么，来聚焦合适的列表条目。我们不能在CSS文件中处理这个，因为我们不能将动态内容放进一个CSS文件中。因此我们需要将聚焦列表条目的CSS移出CSS文件，并把它放到动态内容可以运行的我们的当前的网页上。
因此，比方说，通过将聚焦条目的背景色改为黄色的，我们实现一个简单的聚焦。我们的CSS可能看起来像：
#current {
background-color: yellow;
}
</style>
我们会离开那个CSS文件，进入我们的网页标题上一个内嵌的CSS块中。
<style type="text/css">
#current {
background-color: yellow;
}
</style>
使用一个WordPress模板，这个进入<head></head> 标题之间的header.php文件。
现在我们要将它变为动态的。因此我们要用点PHP程序来取代#current选择器。
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
这个会打印出$current的数值，因此会完成CSS并且成功地聚焦了合适的条目。
第二种方法: 在一个文件中使用CSS[ ]
通过使用这种方法，我们也需要将单一的id="current"从列表中移走，但是我们不需要给每个列表条目都添加一个唯一的id属性。我们要使PHP做两件事，以使生活更加简单：决定我们当前的网页是那一页;显示"当前的"一个ID,使导航条目突出。
让我们尽量试试。这是我们一开始列出的导航：
<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>
简单美好。我们只要编辑每行的开始，那些打开的L1标签。列表的其余部分，我们会先放着不管（暂时的）。 其次，通过做一些if声明，我们让PHP为我们思考一些东西。这个将会帮助我们决定我们在哪个网页上，允许PHP将"current"放到正确的点上。下面显示它看起来是怎样的：
<li<?php
if (is_home())
{
echo " id=\"current\"";
}
?>>
</li>
第六行的两个carrots是有意放在那儿的。if声明打扰了我们的开始L1标签,第六行的第二个carrot会关闭我们在第一行打开的标签。
记住，这只是列表中的一个条目；你需要为导航中的每一个条目做一些类似的事情。幸运地是，你正使用模板，你只要做一次这个，就行了：在你的header.php模板里。
因此，如果你在主页上，这一个菜单条目结果的代码，看起来像：
<li id="current"><a href="#">Page One</a></li>
在其它的任何网页上，它看起来就像：
<li><a href="#">Page One</a></li>
现在我们可以设计这个链接，这样当用户在主页上时，导航条目使它非常地清楚。
下面是导航在你的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>
<!—在归档网页上显示"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>
<!—类别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>
根据站点周围放好的IDs,用户能一直地确定地知道他们所处的位置，即使他们从搜索结果中来到我们的站点。
使用一些功能,我们得出WordPress内部任何网页的身份，并且设置我们的代码来显示任何的导航元素的"current"。 如以前所描述的，CSS声明需要被设置，来为当前的菜单条目做一些事情：
#current
{
background-color: #336699;
}
现在导航的条目肯定会突出。
使用这个方法，我们所有的CSS都在主要的CSS网页上。当我们决定在以后的某时，更改这些的时候，我们不需要追溯到不同模板中的颜色变化。这的确使我们一下子就喜欢上了CSS，不是吗？
例子[ ]
这个方法只对WordPress v1.5+中的新的页面功能所创建的网页起作用。使用不同的is_功能可以轻松地扩展测试其它的情况。Ryan Boren对于不同的is_功能以及它们测试什么有一个好的总结你也可以查看一下站点上的摘要，引起条件反应的标签。
从Listamatic中的Simple Bits Tabbed Navbar你可以看到这种方法在实施。
资源[ ]
你在自定义这种方法的时候以及创建大体的菜单和导航列表时，这些资源中的一些信息，你可能觉得有用。
插件[ ]
这些插件为你照顾复杂的php译码，你只要设置css.
- WP-pagesnav 插件 –创建一个动态的菜单利用普通的网页结构。这个插件包括动态聚焦和多个不同级别选项的菜单。
- dTabs – 动态制表符插件 – 能让你轻易地为网页，目录，文章，主页，归档，和有着可选择的下拉菜单的管理面板中的书签设置动态制表符。如果使用Kubrick 制表符主题，无论什么代码也不需要。
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.