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

WordPress:Dynamic Menu Highlighting

來自站長百科
跳轉(zhuǎn)至： 導航、? 搜索

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

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

通過看菜單列表，因為使用了粗體加黑行的緣故，你可以輕易地確定目前你在"DOCS"里的一個網(wǎng)頁上，或者在站點的文件部分。


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


總的看法[ ]

有許多組件可以使動態(tài)的聚焦的導航運行，它們包括：

  1. 在頁面載入之時，聚焦你當前的位置或者導航的位置
  2. 用鼠標聚焦其它的導航點。
  3. 顯示子菜單的導航，留下一個breadcrumb trail（當前位置）。（這次文章中沒有涉及這個內(nèi)容）

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

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

基本的導航列表[ ]

基本的導航列表可能看起來像： 

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

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

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

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

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

第一種方法: 每個網(wǎng)頁上都有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來到了什么位置。 我們需要寫一個條件語言來測試一下被瀏覽的網(wǎng)頁，并且基于那個測試的結(jié)果來確定一個變數(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'; }
?>

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

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

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

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

我們會離開那個CSS文件，進入我們的網(wǎng)頁標題上一個內(nèi)嵌的CSS塊中。 

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

使用一個WordPress模板，這個進入<head></head> 標題之間的header.php文件。

現(xiàn)在我們要將它變?yōu)閯討B(tài)的。因此我們要用點PHP程序來取代#current選擇器。 

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

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

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

通過使用這種方法，我們也需要將單一的id="current"從列表中移走，但是我們不需要給每個列表條目都添加一個唯一的id屬性。我們要使PHP做兩件事，以使生活更加簡單：決定我們當前的網(wǎng)頁是那一頁;顯示"當前的"一個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為我們思考一些東西。這個將會幫助我們決定我們在哪個網(wǎng)頁上，允許PHP將"current"放到正確的點上。下面顯示它看起來是怎樣的： 

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


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

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

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

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

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

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

下面是導航在你的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>
<!—在歸檔網(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>

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

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

#current
{
background-color: #336699;
}

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

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

例子[ ]

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

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

資源[ ]

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

插件[ ]

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

  • WP-pagesnav 插件 –創(chuàng)建一個動態(tài)的菜單利用普通的網(wǎng)頁結(jié)構(gòu)。這個插件包括動態(tài)聚焦和多個不同級別選項的菜單。
  • dTabs – 動態(tài)制表符插件 – 能讓你輕易地為網(wǎng)頁，目錄，文章，主頁，歸檔，和有著可選擇的下拉菜單的管理面板中的書簽設(shè)置動態(tài)制表符。如果使用Kubrick 制表符主題，無論什么代碼也不需要。

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