|
幾乎每個網(wǎng)站都有一個導(dǎo)航欄，導(dǎo)航欄一般將網(wǎng)站的內(nèi)容分成幾個類目，然后在導(dǎo)航欄中顯示出來，以方便讀者查閱相關(guān)內(nèi)容。WordPress博客也提供了此功能，但是不同的博客主題在導(dǎo)航欄的設(shè)置方面也不盡相同，現(xiàn)在大多數(shù)主題是以頁面（page）作為導(dǎo)航欄類目的，但是這種方式似乎達不到"導(dǎo)航"的目的，個人覺得用分類（category）和頁面(Page一起)做為導(dǎo)航欄更合適。本文將指導(dǎo)你在WordPress中，如何設(shè)計一個用分類和頁面作為菜單的導(dǎo)航欄，并高亮顯示當前所在的欄目。
為了讓讀者了解當前所在的文章分類，網(wǎng)頁設(shè)計師常常用一些比較突出的方式顯示導(dǎo)航欄中的當前欄目，抬頭看一下本文的上方，導(dǎo)航欄中的"教程指南"項目就被高亮顯示了。
其實稍微懂一點網(wǎng)頁設(shè)計的朋友都知道，這可以通過CSS來實現(xiàn)，但關(guān)鍵是如何確定該文章屬于哪個分類，WordPress已經(jīng)提供了現(xiàn)成的方法，更簡單，調(diào)用幾個函數(shù)就可以實現(xiàn)，而且不需要太多額外的代碼。下面我們一步一步地來實現(xiàn)我們的目的。
WordPress主題都提供了導(dǎo)航欄，一般導(dǎo)航欄的代碼在header.php這個文件中，找到相應(yīng)的導(dǎo)航欄代碼（如果你的導(dǎo)航欄現(xiàn)在顯示的是頁面列表，你只需找到 wp_list_pages 就可以了 ），改成如下形式，修改完畢后在瀏覽器里看看效果吧！注意：本文不講解導(dǎo)航欄的樣式設(shè)計，可根據(jù)需要自己定義相關(guān)的CSS和HTML。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <ul>
<li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">博客主頁</a></li>
<?php
$currentcategory = '';
// 以下這行代碼用于在導(dǎo)航欄添加分類列表，
// 如果你不想添加分類到導(dǎo)航中，
// 請刪除 6 - 14 行代碼
if (is_category() || is_single()) {
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
$currentcategory = '¤t_category='.$myCat;
}
wp_list_categories('depth=1&title_li=&show_count=0&hide_empty=0&child_of=0'.$currentcategory);
// 以下這行代碼用于在導(dǎo)航欄添加頁面列表
// 如果你不想添加頁面到導(dǎo)航中，
// 請刪除16 - 19行代碼
wp_list_pages('depth=1&title_li=&sort_column=menu_order');
?>
</ul> |
上面那段代碼是通過無序列表的形式來顯示導(dǎo)航欄的，第一個 <li> 顯示的是博客主頁，如果當前所在是主頁，則高亮顯示"博客主頁"，高亮顯示則是通過class="current-cat"樣式來定義的，這個可以根據(jù)自己的需要定義。上面代碼中通過調(diào)用 wp_list_categories 和 wp_list_pages 這兩個函數(shù)來羅列所有的分類目錄和頁面，并且程序會自動判斷當前文章所在的分類，也會自動判斷當前分類和當前頁面，然后將其所在的 <li> 加上 class="current-cat" 的CSS類選擇器，你只需在你主題目錄下的style.css中定義一個名為 .current-cat 的 class，來定義高亮形式即可，如：
1
2
3
| li.current-cat a {
color:red;
} |
<————————————–以下內(nèi)容已過時————————————–>
但是上面的那段代碼也有一定的缺陷，就是進入文章頁面后，導(dǎo)航欄就無法高亮了，訪客就不容易知道這篇文章是屬于哪個分類的了，那怎么解決呢？解決起來也比較簡單，加入以上*代碼一*后，先在瀏覽器里面瀏覽你的博客，然后"查看源文件"，找到導(dǎo)航欄的代碼，我的是這樣子的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| < ul>
< li>< a title="Home" href="/">博客主頁</ a></ li>
< li class="cat-item cat-item-1 ">< a href="/category/diaries" title="生活隨感">生活隨感</ a></ li>
< li class="cat-item cat-item-3 ">< a href="/category/encyclopedia" title="百科全書">百科全書</ a></ li>
< li class="cat-item cat-item-4 ">< a href="/category/material" title="素材下載">素材下載</ a></ li>
< li class="cat-item cat-item-5 ">< a href="/category/showcase" title="櫥窗展示">櫥窗展示</ a></ li>
< li class="cat-item cat-item-6 current-cat">< a href="/category/tutorials" title="教程指南">教程指南</ a></ li>
< li class="cat-item cat-item-17 ">< a href="/category/freebies" title="免費資源">免費資源</ a></ li>
< li class="page_item page-item-2 ">< a href="/about" title="關(guān)于露兜">關(guān)于露兜</ a></ li>
</ ul> |
我們給上面的代碼加入動態(tài)PHP代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <ul>
<li><a title="Home" <?php if (is_home()) { echo 'class="current"';} ?> href="/">博客主頁</a></li>
<li class="cat-item cat-item-1 <?php if ( (is_category('1') || in_category('1')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/diaries" title="生活隨感">生活隨感</a></li>
<li class="cat-item cat-item-3 <?php if ( (is_category('3') || in_category('3')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/encyclopedia" title="百科全書">百科全書</a></li>
<li class="cat-item cat-item-4 <?php if ( (is_category('4') || in_category('4')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/material" title="素材下載">素材下載</a></li>
<li class="cat-item cat-item-5 <?php if ( (is_category('5') || in_category('5')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/showcase" title="櫥窗展示">櫥窗展示</a></li>
<li class="cat-item cat-item-6 <?php if ( (is_category('6') || in_category('6')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/tutorials" title="教程指南">教程指南</a></li>
<li class="cat-item cat-item-17 <?php if ( (is_category('17') || in_category('17')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/freebies" title="免費資源">免費資源</a></li>
<li class="page_item page-item-2 <?php if ( is_page('2') && !is_category() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/about" title="關(guān)于露兜">關(guān)于露兜</a></li>
</ul> |
好了，將上面的代碼改成你的內(nèi)容，替換掉header.php中的導(dǎo)航欄代碼即可。is_category()和is_page()函數(shù)的使用方法可以參閱條件標簽，is_category()括號中的數(shù)字是根據(jù)前面的 cat-item-? 來確定的，如前面的class中是cat-item-6，則寫成is_category('6')。
如果你有一定的網(wǎng)頁設(shè)計基礎(chǔ)，相信這并不是一件難事。如果遇到什么問題，可以在此發(fā)表評論，我會樂意效勞的。
|
