WordPress 分類做導航欄，并高亮顯示
來源：程序員人生 發布時間：2013-10-09 12:32:23 閱讀次數：3487次
幾乎每個網站都有一個導航欄，導航欄一般將網站的內容分成幾個類目，然后在導航欄中顯示出來，以方便讀者查閱相關內容。WordPress博客也提供了此功能，但是不同的博客主題在導航欄的設置方面也不盡相同，現在大多數主題是以頁面（page）作為導航欄類目的，但是這種方式似乎達不到“導航”的目的，個人覺得用分類（category）和頁面(Page一起)做為導航欄更合適。本文將指導你在WordPress中，如何設計一個用分類和頁面作為菜單的導航欄，并高亮顯示當前所在的欄目。
為了讓讀者了解當前所在的文章分類，網頁設計師常常用一些比較突出的方式顯示導航欄中的當前欄目，抬頭看一下本文的上方，導航欄中的“教程指南”項目就被高亮顯示了。
其實稍微懂一點網頁設計的朋友都知道，這可以通過CSS來實現，但關鍵是如何確定該文章屬于哪個分類,WordPress已經提供了現成的方法，更簡單，調用幾個函數就可以實現，而且不需要太多額外的代碼。下面我們一步一步地來實現我們的目的。
WordPress主題都提供了導航欄，一般導航欄的代碼在header.php這個文件中，找到相應的導航欄代碼，改成如下形式，修改完畢后在瀏覽器里看看效果吧！注意：本文不講解導航欄的樣式設計，可根據需要自己定義相關的CSS和HTML。
/* 代碼一 */
<ul>
<li><a title="Home" <?php if (is_home()) { echo 'class="current"';} ?> href="/">博客主頁</a></li>
<?php wp_list_categories('depth=1&title_li=0&orderby=id&show_count=0&hide_empty=0&child_of=0'); ?>
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
</ul>
上面那段代碼是通過無序列表的形式來顯示導航欄的，第一個 <li> 顯示的是博客主頁，如果當前所在是主頁，則高亮顯示"博客主頁"，高亮顯示則是通過class="current"樣式來定義的，這個可以根據自己的需要定義。上面代碼的第二行通過調用wp_list_categories()和wp_list_pages()這兩個函數來羅列所有的分類目錄和頁面，并且WordPress程序會自動將當前所在的分類或頁面所在的<li>加上class="current-cat"的CSS屬性，你只需在你的主題CSS文件中定義一個名為current-cat的class，來定義高亮形式即可。
但是上面的那段代碼也有一定的缺陷，就是進入文章頁面后，導航欄就無法高亮了，訪客就不容易知道這篇文章是屬于哪個分類的了，那怎么解決呢？解決起來也比較簡單，加入以上*代碼一*后，先在瀏覽器里面瀏覽你的博客，然后“查看源文件”，找到導航欄的代碼，我的是這樣子的：
<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="關于露兜">關于露兜</a></li>
</ul>
我們給上面的代碼加入動態PHP代碼：
<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="關于露兜">關于露兜</a></li>
</ul>
好了，將上面的代碼改成你的內容，替換掉header.php中的導航欄代碼即可。is_category()和is_page()函數的使用方法可以參閱條件標簽，is_category()括號中的數字是根據前面的 cat-item-? 來確定的，如前面的class中是cat-item-6，則寫成is_category('6')。
如果你有一定的網頁設計基礎，相信這并不是一件難事。如果遇到什么問題，可以在此發表評論，我會樂意效勞的。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
