編輯“WordPress:Dynamic Menu Highlighting”

聚焦動態(tài)菜單是一個方式，提供給用戶導(dǎo)航的參考點。就像地圖上的一點，說明"你在這兒"。WordPress.org利用了動態(tài)菜單聚焦。<div style="border:1px solid blue; width: 90%; margin: 20px; padding:20px">

[[WordPress:Image:Dynamic_menu_highlighting-00.jpg|center|這個圖像圖解說明了用戶目前正在"DOCS"菜單下看網(wǎng)頁。]] <pre>這個圖像圖解說明了用戶目前正在"DOCS"菜單下看
網(wǎng)頁。</pre></div>
通過看菜單列表，因為使用了粗體加黑行的緣故，你可以輕易地確定目前你在"DOCS"里的一個網(wǎng)頁上，或者在站點的文件部分。


文章會解釋怎樣著手制作一個導(dǎo)航菜單，可以動態(tài)地突出當前顯示的網(wǎng)頁，然而有[[WordPress:Dynamic_Menu_Highlighting#Plugins | 插件]]可以幫你完成大多數(shù)的工作。


== 總的看法 ==

有許多組件可以使動態(tài)的聚焦的導(dǎo)航運行，它們包括：
#在頁面載入之時，聚焦你當前的位置或者導(dǎo)航的位置
#用鼠標聚焦其它的導(dǎo)航點。
#顯示子菜單的導(dǎo)航，留下一個breadcrumb trail（當前位置）。（這次文章中沒有涉及這個內(nèi)容）

有許多方式可以取得動態(tài)聚焦導(dǎo)航的效果，這些方式包括Java描述語言，flash,HTML和[[WordPress:CSS|CSS]] 以及[[WordPress:PHP|PHP]]。

<!—注: [[WordPress:User:Ptryk|Ptryk]] 2006年二月二日十八時三十七分 (格林尼治標準時間)停止在這兒更新，計劃不久再繼續(xù)，可以任意地在上面或者下面編輯，看看討論-->

==基本的導(dǎo)航列表 ==
基本的導(dǎo)航列表可能看起來像：
<pre>
<ul id="導(dǎo)航">
<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>

在網(wǎng)頁的樣式表中可能有一點[[WordPress:CSS|CSS]],可以用"當前的" ID特定地設(shè)計列表條目使其與其它的列表條目不同。

這處理靜態(tài)的HTML頁很管用，但當處理動態(tài)的頁面時，就會變得有點復(fù)雜。也許這個菜單應(yīng)該放在站點的工具條里，工具條包含一個單獨的文件，可以在多處訪問這個文件。很顯然，就如上所寫的，不管目前你正在瀏覽什么網(wǎng)頁，只有一個條目突出了。這并不是我們所想要的！

== 使代碼變成動態(tài)的 ==
PHP允許我們得到渴望得到的聚焦效果，與任何正在瀏覽的網(wǎng)頁起反應(yīng)。加上WordPress的[[WordPress:Conditional_Tags|功能]],我們可以動態(tài)地測試那個網(wǎng)頁正在被瀏覽，同時基于測試的結(jié)果，重新地寫代碼。
有兩種方法可以處理這個。一個要求我們來創(chuàng)建一個變數(shù)($current)，這個變數(shù)總是能夠與我們當前的網(wǎng)頁數(shù)字相等。它也要求我們將一些CSS放到每一個網(wǎng)頁上，而不是將它所有的都放到一個主要的CSS文件上。另一種方法意味著我們處理PHP時候，有點亂，但是它意味著我們要將我們所有的設(shè)計放到一個單獨的CSS文件中。

== 第一種方法: 每個網(wǎng)頁上都有CSS ==
這種方法的第一步是在列表上清除一<tt>id="current"</tt>并且給每一個列表條目添加一個唯一的屬性<tt>id</tt>。
<pre>
<ul id="導(dǎo)航">
<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來到了什么位置。
我們需要寫一個條件語言來測試一下被瀏覽的網(wǎng)頁，并且基于那個測試的結(jié)果來確定一個變數(shù)。
<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>功能來檢查當前網(wǎng)頁的標題。如果標題是"第一頁,"變數(shù)<tt>$current</tt>被賦予了數(shù)值"一;"如果是"第二頁," <tt>$current</tt>變成了"二;"等等，等等。在一個WordPress模板上，這個會在<tt><head></head></tt> 標簽之間進入<tt>header.php</tt>文件。

現(xiàn)在我們需要寫一些CSS對這個起反應(yīng)，并且根據(jù)<tt>$current</tt>是什么，來聚焦合適的列表條目。我們不能在CSS文件中處理這個，因為我們不能將動態(tài)內(nèi)容放進一個CSS文件中。因此我們需要將聚焦列表條目的CSS移出CSS文件，并把它放到動態(tài)內(nèi)容可以運行的我們的當前的網(wǎng)頁上。

因此，比方說，通過將聚焦條目的背景色改為黃色的，我們實現(xiàn)一個簡單的聚焦。我們的CSS可能看起來像：

<pre>
#current {
background-color: yellow;
}
</style>
</pre>
我們會離開那個CSS文件，進入我們的網(wǎng)頁標題上一個內(nèi)嵌的CSS塊中。

<pre>
<style type="text/css">
#current {
background-color: yellow;
}
</style>
</pre>
使用一個WordPress模板，這個進入<tt><head></head></tt> 標題之間的<tt>header.php</tt>文件。

現(xiàn)在我們要將它變?yōu)閯討B(tài)的。因此我們要用點PHP程序來取代<tt>#current</tt>選擇器。
<pre>
<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
</pre>

這個會打印出<tt>$current</tt>的數(shù)值，因此會完成CSS并且成功地聚焦了合適的條目。
== 第二種方法: 在一個文件中使用CSS ==

通過使用這種方法，我們也需要將單一的<tt>id="current"</tt>從列表中移走，但是我們不需要給每個列表條目都添加一個唯一的<tt>id</tt>屬性。我們要使PHP做兩件事，以使生活更加簡單：決定我們當前的網(wǎng)頁是那一頁;顯示"當前的"一個ID,使導(dǎo)航條目突出。

讓我們盡量試試。這是我們一開始列出的導(dǎo)航：
<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為我們思考一些東西。這個將會幫助我們決定我們在哪個網(wǎng)頁上，允許PHP將"current"放到正確的點上。下面顯示它看起來是怎樣的：

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


第六行的兩個carrots是有意放在那兒的。<tt>if</tt>聲明打擾了我們的開始L1標簽,第六行的第二個carrot會關(guān)閉我們在第一行打開的標簽。
記住，這只是列表中的一個條目；你需要為導(dǎo)航中的每一個條目做一些類似的事情。幸運地是，你正使用模板，你只要做一次這個，就行了：在你的header.php模板里。

因此，如果你在主頁上，這一個菜單條目結(jié)果的代碼，看起來像：

<pre>
<li id="current"><a href="#">Page One</a></li>
</pre>
在其它的任何網(wǎng)頁上，它看起來就像：
<pre>
<li><a href="#">Page One</a></li>
</pre>
現(xiàn)在我們可以設(shè)計這個鏈接，這樣當用戶在主頁上時，導(dǎo)航條目使它非常地清楚。

下面是導(dǎo)航在你的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>
<!—在歸檔網(wǎng)頁上顯示"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", 稱作 設(shè)計 -->

<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>
根據(jù)站點周圍放好的IDs,用戶能一直地確定地知道他們所處的位置，即使他們從搜索結(jié)果中來到我們的站點。

使用一些[[WordPress:Conditional_Tags|功能]],我們得出WordPress內(nèi)部任何網(wǎng)頁的身份，并且設(shè)置我們的代碼來顯示任何的導(dǎo)航元素的"current"。
如以前所描述的，CSS聲明需要被設(shè)置，來為當前的菜單條目做一些事情：
<pre>
#current
{
background-color: #336699;
}
</pre>

現(xiàn)在導(dǎo)航的條目肯定會突出。

使用這個方法，我們所有的CSS都在主要的CSS網(wǎng)頁上。當我們決定在以后的某時，更改這些的時候，我們不需要追溯到不同模板中的顏色變化。這的確使我們一下子就喜歡上了CSS，不是嗎？

== 例子==
這個方法只對WordPress v1.5+中的新的頁面功能所創(chuàng)建的[[WordPress:Pages|網(wǎng)頁]]起作用。使用不同的<tt>is_</tt>功能可以輕松地擴展測試其它的情況。Ryan Boren對于不同的<tt>is_</tt>功能以及它們測試什么有一個好的[http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ 總結(jié)]你也可以查看一下站點上的摘要，[[WordPress:Conditional Tags|引起條件反應(yīng)的標簽]]。

從[http://css.maxdesign.com.au/listamatic/ Listamatic]中的[http://css.maxdesign.com.au/listamatic/horizontal06.htm Simple Bits Tabbed Navbar]你可以看到這種方法在實施。

== 資源 ==

你在自定義這種方法的時候以及創(chuàng)建大體的菜單和導(dǎo)航列表時，這些資源中的一些信息，你可能覺得有用。
*[[WordPress:Conditional Tags|引起條件反應(yīng)的標簽]]
*[[WordPress:Creating Horizontal Menus|創(chuàng)建橫向菜單]]
*[[WordPress:Styling Lists with CSS|CSS設(shè)計表]]
*[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 動態(tài)菜單聚焦 包括主頁]

==插件==
這些插件為你照顧復(fù)雜的php譯碼，你只要設(shè)置css.
*[http://wp.sieker.info/projects/wp-pagesnav WP-pagesnav 插件] –創(chuàng)建一個動態(tài)的菜單利用普通的網(wǎng)頁結(jié)構(gòu)。這個插件包括動態(tài)聚焦和多個不同級別選項的菜單。

*[http://dynamictangentconceptions.dtcnet.co.uk/downloads/wp-plugins/dtabs-dynamic-tabs-wordpress-plugin/ dTabs – 動態(tài)制表符插件] – 能讓你輕易地為網(wǎng)頁，目錄，文章，主頁，歸檔，和有著可選擇的下拉菜單的管理面板中的書簽設(shè)置動態(tài)制表符。如果使用[http://dynamictangentconceptions.dtcnet.co.uk/downloads/wp-themes/kubrick-tabs/ Kubrick 制表符]主題，無論什么代碼也不需要。

{{Copyedit}}