编辑“WordPress:Dynamic Menu Highlighting”

聚焦动态菜单是一个方式，提供给用户导航的参考点。就像地图上的一点，说明"你在这儿"。WordPress.org利用了动态菜单聚焦。<div style="border:1px solid blue; width: 90%; margin: 20px; padding:20px">

[[WordPress:Image:Dynamic_menu_highlighting-00.jpg|center|这个图像图解说明了用户目前正在"DOCS"菜单下看网页。]] <pre>这个图像图解说明了用户目前正在"DOCS"菜单下看
网页。</pre></div>
通过看菜单列表，因为使用了粗体加黑行的缘故，你可以轻易地确定目前你在"DOCS"里的一个网页上，或者在站点的文件部分。


文章会解释怎样着手制作一个导航菜单，可以动态地突出当前显示的网页，然而有[[WordPress:Dynamic_Menu_Highlighting#Plugins | 插件]]可以帮你完成大多数的工作。


== 总的看法 ==

有许多组件可以使动态的聚焦的导航运行，它们包括：
#在页面载入之时，聚焦你当前的位置或者导航的位置
#用鼠标聚焦其它的导航点。
#显示子菜单的导航，留下一个breadcrumb trail（当前位置）。（这次文章中没有涉及这个内容）

有许多方式可以取得动态聚焦导航的效果，这些方式包括Java描述语言，flash,HTML和[[WordPress:CSS|CSS]] 以及[[WordPress:PHP|PHP]]。

<!—注: [[WordPress:User:Ptryk|Ptryk]] 2006年二月二日十八时三十七分 (格林尼治标准时间)停止在这儿更新，计划不久再继续，可以任意地在上面或者下面编辑，看看讨论-->

==基本的导航列表 ==
基本的导航列表可能看起来像：
<pre>
<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>
</pre>

在网页的样式表中可能有一点[[WordPress:CSS|CSS]],可以用"当前的" ID特定地设计列表条目使其与其它的列表条目不同。

这处理静态的HTML页很管用，但当处理动态的页面时，就会变得有点复杂。也许这个菜单应该放在站点的工具条里，工具条包含一个单独的文件，可以在多处访问这个文件。很显然，就如上所写的，不管目前你正在浏览什么网页，只有一个条目突出了。这并不是我们所想要的！

== 使代码变成动态的 ==
PHP允许我们得到渴望得到的聚焦效果，与任何正在浏览的网页起反应。加上WordPress的[[WordPress:Conditional_Tags|功能]],我们可以动态地测试那个网页正在被浏览，同时基于测试的结果，重新地写代码。
有两种方法可以处理这个。一个要求我们来创建一个变数($current)，这个变数总是能够与我们当前的网页数字相等。它也要求我们将一些CSS放到每一个网页上，而不是将它所有的都放到一个主要的CSS文件上。另一种方法意味着我们处理PHP时候，有点乱，但是它意味着我们要将我们所有的设计放到一个单独的CSS文件中。

== 第一种方法: 每个网页上都有CSS ==
这种方法的第一步是在列表上清除一<tt>id="current"</tt>并且给每一个列表条目添加一个唯一的属性<tt>id</tt>。
<pre>
<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>
</pre>

另一个部分是PHP来到了什么位置。
我们需要写一个条件语言来测试一下被浏览的网页，并且基于那个测试的结果来确定一个变数。
<pre>
<?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'; }
?>
</pre>

这个代码使用<tt>is_page();</tt>功能来检查当前网页的标题。如果标题是"第一页,"变数<tt>$current</tt>被赋予了数值"一;"如果是"第二页," <tt>$current</tt>变成了"二;"等等，等等。在一个WordPress模板上，这个会在<tt><head></head></tt> 标签之间进入<tt>header.php</tt>文件。

现在我们需要写一些CSS对这个起反应，并且根据<tt>$current</tt>是什么，来聚焦合适的列表条目。我们不能在CSS文件中处理这个，因为我们不能将动态内容放进一个CSS文件中。因此我们需要将聚焦列表条目的CSS移出CSS文件，并把它放到动态内容可以运行的我们的当前的网页上。

因此，比方说，通过将聚焦条目的背景色改为黄色的，我们实现一个简单的聚焦。我们的CSS可能看起来像：

<pre>
#current {
background-color: yellow;
}
</style>
</pre>
我们会离开那个CSS文件，进入我们的网页标题上一个内嵌的CSS块中。

<pre>
<style type="text/css">
#current {
background-color: yellow;
}
</style>
</pre>
使用一个WordPress模板，这个进入<tt><head></head></tt> 标题之间的<tt>header.php</tt>文件。

现在我们要将它变为动态的。因此我们要用点PHP程序来取代<tt>#current</tt>选择器。
<pre>
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
</pre>

这个会打印出<tt>$current</tt>的数值，因此会完成CSS并且成功地聚焦了合适的条目。
== 第二种方法: 在一个文件中使用CSS ==

通过使用这种方法，我们也需要将单一的<tt>id="current"</tt>从列表中移走，但是我们不需要给每个列表条目都添加一个唯一的<tt>id</tt>属性。我们要使PHP做两件事，以使生活更加简单：决定我们当前的网页是那一页;显示"当前的"一个ID,使导航条目突出。

让我们尽量试试。这是我们一开始列出的导航：
<pre>
<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>
</pre>
简单美好。我们只要编辑每行的开始，那些打开的L1标签。列表的其余部分，我们会先放着不管（暂时的）。
其次，通过做一些<tt>if</tt>声明，我们让PHP为我们思考一些东西。这个将会帮助我们决定我们在哪个网页上，允许PHP将"current"放到正确的点上。下面显示它看起来是怎样的：

<pre>
<li<?php 
if (is_home())
{ 
echo " id=\"current\"";
}
?>>
</li>
</pre>


第六行的两个carrots是有意放在那儿的。<tt>if</tt>声明打扰了我们的开始L1标签,第六行的第二个carrot会关闭我们在第一行打开的标签。
记住，这只是列表中的一个条目；你需要为导航中的每一个条目做一些类似的事情。幸运地是，你正使用模板，你只要做一次这个，就行了：在你的header.php模板里。

因此，如果你在主页上，这一个菜单条目结果的代码，看起来像：

<pre>
<li id="current"><a href="#">Page One</a></li>
</pre>
在其它的任何网页上，它看起来就像：
<pre>
<li><a href="#">Page One</a></li>
</pre>
现在我们可以设计这个链接，这样当用户在主页上时，导航条目使它非常地清楚。

下面是导航在你的header.php文件中看起来是怎样的，允许用户看看它们所处的位置；
<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>
<!—在归档网页上显示"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>
</pre>
根据站点周围放好的IDs,用户能一直地确定地知道他们所处的位置，即使他们从搜索结果中来到我们的站点。

使用一些[[WordPress:Conditional_Tags|功能]],我们得出WordPress内部任何网页的身份，并且设置我们的代码来显示任何的导航元素的"current"。
如以前所描述的，CSS声明需要被设置，来为当前的菜单条目做一些事情：
<pre>
#current
{
background-color: #336699;
}
</pre>

现在导航的条目肯定会突出。

使用这个方法，我们所有的CSS都在主要的CSS网页上。当我们决定在以后的某时，更改这些的时候，我们不需要追溯到不同模板中的颜色变化。这的确使我们一下子就喜欢上了CSS，不是吗？

== 例子==
这个方法只对WordPress v1.5+中的新的页面功能所创建的[[WordPress:Pages|网页]]起作用。使用不同的<tt>is_</tt>功能可以轻松地扩展测试其它的情况。Ryan Boren对于不同的<tt>is_</tt>功能以及它们测试什么有一个好的[http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ 总结]你也可以查看一下站点上的摘要，[[WordPress:Conditional Tags|引起条件反应的标签]]。

从[http://css.maxdesign.com.au/listamatic/ Listamatic]中的[http://css.maxdesign.com.au/listamatic/horizontal06.htm Simple Bits Tabbed Navbar]你可以看到这种方法在实施。

== 资源 ==

你在自定义这种方法的时候以及创建大体的菜单和导航列表时，这些资源中的一些信息，你可能觉得有用。
*[[WordPress:Conditional Tags|引起条件反应的标签]]
*[[WordPress:Creating Horizontal Menus|创建横向菜单]]
*[[WordPress:Styling Lists with CSS|CSS设计表]]
*[http://css.maxdesign.com.au/listamatic/ Listamatic]
*[http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ Ryan Boren and the is_ functions]
*[http://www.gudstoff.com/dynamic_menu.htm 动态菜单聚焦 包括主页]

==插件==
这些插件为你照顾复杂的php译码，你只要设置css.
*[http://wp.sieker.info/projects/wp-pagesnav WP-pagesnav 插件] –创建一个动态的菜单利用普通的网页结构。这个插件包括动态聚焦和多个不同级别选项的菜单。

*[http://dynamictangentconceptions.dtcnet.co.uk/downloads/wp-plugins/dtabs-dynamic-tabs-wordpress-plugin/ dTabs – 动态制表符插件] – 能让你轻易地为网页，目录，文章，主页，归档，和有着可选择的下拉菜单的管理面板中的书签设置动态制表符。如果使用[http://dynamictangentconceptions.dtcnet.co.uk/downloads/wp-themes/kubrick-tabs/ Kubrick 制表符]主题，无论什么代码也不需要。

{{Copyedit}}