WordPress: Dynamic Menu Highlighting：修訂間差異

2008年4月14日 (一) 16:57的最新版本

聚焦動(dòng)態(tài)菜單是一個(gè)方式，提供給用戶導(dǎo)航的參考點(diǎn)。就像地圖上的一點(diǎn)，說(shuō)明"你在這兒"。WordPress.org利用了動(dòng)態(tài)菜單聚焦。

center|這個(gè)圖像圖解說(shuō)明了用戶目前正在"DOCS"菜單下看網(wǎng)頁(yè)。

這個(gè)圖像圖解說(shuō)明了用戶目前正在"DOCS"菜單下看
網(wǎng)頁(yè)。

通過(guò)看菜單列表，因?yàn)槭褂昧舜煮w加黑行的緣故，你可以輕易地確定目前你在"DOCS"里的一個(gè)網(wǎng)頁(yè)上，或者在站點(diǎn)的文件部分。

文章會(huì)解釋怎樣著手制作一個(gè)導(dǎo)航菜單，可以動(dòng)態(tài)地突出當(dāng)前顯示的網(wǎng)頁(yè)，然而有插件可以幫你完成大多數(shù)的工作。

總的看法[ ]

有許多組件可以使動(dòng)態(tài)的聚焦的導(dǎo)航運(yùn)行，它們包括：

在頁(yè)面載入之時(shí)，聚焦你當(dāng)前的位置或者導(dǎo)航的位置
用鼠標(biāo)聚焦其它的導(dǎo)航點(diǎn)。
顯示子菜單的導(dǎo)航，留下一個(gè)breadcrumb trail（當(dāng)前位置）。（這次文章中沒(méi)有涉及這個(gè)內(nèi)容）

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

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

基本的導(dǎo)航列表[ ]

基本的導(dǎo)航列表可能看起來(lái)像：

<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>

在網(wǎng)頁(yè)的樣式表中可能有一點(diǎn)CSS,可以用"當(dāng)前的" ID特定地設(shè)計(jì)列表?xiàng)l目使其與其它的列表?xiàng)l目不同。

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

使代碼變成動(dòng)態(tài)的[ ]

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

第一種方法: 每個(gè)網(wǎng)頁(yè)上都有CSS[ ]

這種方法的第一步是在列表上清除一id="current"并且給每一個(gè)列表?xiàng)l目添加一個(gè)唯一的屬性id。

<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>

另一個(gè)部分是PHP來(lái)到了什么位置。我們需要寫(xiě)一個(gè)條件語(yǔ)言來(lái)測(cè)試一下被瀏覽的網(wǎng)頁(yè)，并且基于那個(gè)測(cè)試的結(jié)果來(lái)確定一個(gè)變數(shù)。

<?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'; }
?>

這個(gè)代碼使用is_page();功能來(lái)檢查當(dāng)前網(wǎng)頁(yè)的標(biāo)題。如果標(biāo)題是"第一頁(yè),"變數(shù)$current被賦予了數(shù)值"一;"如果是"第二頁(yè)," $current變成了"二;"等等，等等。在一個(gè)WordPress模板上，這個(gè)會(huì)在<head></head> 標(biāo)簽之間進(jìn)入header.php文件。

現(xiàn)在我們需要寫(xiě)一些CSS對(duì)這個(gè)起反應(yīng)，并且根據(jù)$current是什么，來(lái)聚焦合適的列表?xiàng)l目。我們不能在CSS文件中處理這個(gè)，因?yàn)槲覀儾荒軐?dòng)態(tài)內(nèi)容放進(jìn)一個(gè)CSS文件中。因此我們需要將聚焦列表?xiàng)l目的CSS移出CSS文件，并把它放到動(dòng)態(tài)內(nèi)容可以運(yùn)行的我們的當(dāng)前的網(wǎng)頁(yè)上。

因此，比方說(shuō)，通過(guò)將聚焦條目的背景色改為黃色的，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的聚焦。我們的CSS可能看起來(lái)像：

#current {
background-color: yellow;
}
</style>

我們會(huì)離開(kāi)那個(gè)CSS文件，進(jìn)入我們的網(wǎng)頁(yè)標(biāo)題上一個(gè)內(nèi)嵌的CSS塊中。

<style type="text/css">
#current {
background-color: yellow;
}
</style>

使用一個(gè)WordPress模板，這個(gè)進(jìn)入<head></head> 標(biāo)題之間的header.php文件。

現(xiàn)在我們要將它變?yōu)閯?dòng)態(tài)的。因此我們要用點(diǎn)PHP程序來(lái)取代#current選擇器。

<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>

這個(gè)會(huì)打印出$current的數(shù)值，因此會(huì)完成CSS并且成功地聚焦了合適的條目。

第二種方法: 在一個(gè)文件中使用CSS[ ]

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

讓我們盡量試試。這是我們一開(kāi)始列出的導(dǎo)航：

<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>

簡(jiǎn)單美好。我們只要編輯每行的開(kāi)始，那些打開(kāi)的L1標(biāo)簽。列表的其余部分，我們會(huì)先放著不管（暫時(shí)的）。其次，通過(guò)做一些if聲明，我們讓PHP為我們思考一些東西。這個(gè)將會(huì)幫助我們決定我們?cè)谀膫€(gè)網(wǎng)頁(yè)上，允許PHP將"current"放到正確的點(diǎn)上。下面顯示它看起來(lái)是怎樣的：

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

第六行的兩個(gè)carrots是有意放在那兒的。if聲明打擾了我們的開(kāi)始L1標(biāo)簽,第六行的第二個(gè)carrot會(huì)關(guān)閉我們?cè)诘谝恍写蜷_(kāi)的標(biāo)簽。記住，這只是列表中的一個(gè)條目；你需要為導(dǎo)航中的每一個(gè)條目做一些類(lèi)似的事情。幸運(yùn)地是，你正使用模板，你只要做一次這個(gè)，就行了：在你的header.php模板里。

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

<li id="current"><a href="#">Page One</a></li>

在其它的任何網(wǎng)頁(yè)上，它看起來(lái)就像：

<li><a href="#">Page One</a></li>

現(xiàn)在我們可以設(shè)計(jì)這個(gè)鏈接，這樣當(dāng)用戶在主頁(yè)上時(shí)，導(dǎo)航條目使它非常地清楚。

下面是導(dǎo)航在你的header.php文件中看起來(lái)是怎樣的，允許用戶看看它們所處的位置；

<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)頁(yè)上顯示"current" (所有月份和類(lèi)別的列表), 個(gè)人的文章, 但不是類(lèi)別10中的個(gè)人文章-->

<li<?php 
if (is_page('Archive') || is_single() || && !in_category('10'))  
{ 
echo " id=\"current\">"; 
}
?>
<a href="<?php bloginfo('url') ?>/archive">Archive</a>
<?php 
} 
?></li>


<!—類(lèi)別10上的任何文章上顯示"current", 稱(chēng)作 設(shè)計(jì) -->

<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>

根據(jù)站點(diǎn)周?chē)藕玫腎Ds,用戶能一直地確定地知道他們所處的位置，即使他們從搜索結(jié)果中來(lái)到我們的站點(diǎn)。

使用一些功能,我們得出WordPress內(nèi)部任何網(wǎng)頁(yè)的身份，并且設(shè)置我們的代碼來(lái)顯示任何的導(dǎo)航元素的"current"。如以前所描述的，CSS聲明需要被設(shè)置，來(lái)為當(dāng)前的菜單條目做一些事情：

#current
{
background-color: #336699;
}

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

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

例子[ ]

這個(gè)方法只對(duì)WordPress v1.5+中的新的頁(yè)面功能所創(chuàng)建的網(wǎng)頁(yè)起作用。使用不同的is_功能可以輕松地?cái)U(kuò)展測(cè)試其它的情況。Ryan Boren對(duì)于不同的is_功能以及它們測(cè)試什么有一個(gè)好的總結(jié)你也可以查看一下站點(diǎn)上的摘要，引起條件反應(yīng)的標(biāo)簽。

從Listamatic中的Simple Bits Tabbed Navbar你可以看到這種方法在實(shí)施。

資源[ ]

你在自定義這種方法的時(shí)候以及創(chuàng)建大體的菜單和導(dǎo)航列表時(shí)，這些資源中的一些信息，你可能覺(jué)得有用。

插件[ ]

這些插件為你照顧復(fù)雜的php譯碼，你只要設(shè)置css.

WP-pagesnav 插件 –創(chuàng)建一個(gè)動(dòng)態(tài)的菜單利用普通的網(wǎng)頁(yè)結(jié)構(gòu)。這個(gè)插件包括動(dòng)態(tài)聚焦和多個(gè)不同級(jí)別選項(xiàng)的菜單。

dTabs – 動(dòng)態(tài)制表符插件 – 能讓你輕易地為網(wǎng)頁(yè)，目錄，文章，主頁(yè)，歸檔，和有著可選擇的下拉菜單的管理面板中的書(shū)簽設(shè)置動(dòng)態(tài)制表符。如果使用Kubrick 制表符主題，無(wú)論什么代碼也不需要。

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長(zhǎng)百科導(dǎo)航

站長(zhǎng)專(zhuān)題