本文章介紹了wordpress中自定義菜單制作詳細教程,有需要了解的朋友可參考一下,要想實現自定義菜單,需要用到的函數是wp_nav_menu(),給這個函數傳遞一些參數就可以輸出自定義菜單菜單,下面簡單講講如何使用使用這個函數.

首先,在主題目錄下的functions.php的 <?php ….. ?> 之間,添加以下菜單注冊代碼,這樣你就可以在主題文件中使用wp_nav_menu函數了:

1. // This theme uses wp_nav_menu() in one location. 
2. egister_nav_menus(); 

接著我們在主題的導航欄處調用wp_nav_menu(),即可輸出導航菜單HTML代碼:

1. <?php  
2.     // 列出頂部導航菜單，菜單名稱為mymenu，只列出一級菜單 
3.     wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); 
4. ?> 

以上代碼輸出的HTML代碼形式如下:

1.  <div class="menu-menu-container"> 
2.     <ul class="menu" id="menu-menu"> 
3.         <li class="..." id="menu-item-1"><a href="...">首頁</a></li> 
4.         <li class="..." id="menu-item-2"><a href="...">分類A</a></li> 
5.         ... //開源軟件:Vevb.com 
6.     </ul> 
7. </div> 

這里列出的 li 項為你在后臺 – 外觀 – 菜單添加的欄目,如果你還沒有在后臺添加菜單,導航欄將列出所有頁面,另外,wp_nav_menu會為每個 li 添加class,不同的class標記這個菜單項的屬性,如當前打開的是某個文章頁面,分類A 就是這篇文章所屬的分類,那么 分類A 所在的 li 將會如下代碼所示:

1. <li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分類A</a></li> 

如果是在首頁,那么首頁的菜單項的 li 可能會如下所示:

1. <li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首頁</a></li> 

從這些class的名稱就知道它們的作用,通過給這些class添加css屬性,可以達到如高亮當前導航菜單的目的,如將當前菜單鏈接定義成紅色:

1. .current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a { 
2.     color: red; 
3. } 

好了,WordPress 3.0的自定義菜單的調用就是這么簡單,wp_nav_menu還有很多參數,如自定義 ul 節點、ul 父節點的id和class的參數等等,詳情可以參考文檔:官方文檔 | 中文文檔

使用分類和頁面作為導航欄

在 WordPress 3.0 之前,大部分WordPress主題都是拿頁面作為導航欄的,導航中只能添加頁面,顯得不夠自由,我剛用WordPress 2.7的時候,就為此問題煩惱,最后翻了文檔,查了一些資料,實現了在導航中添加分類.

非常規導航欄的制作

以上提到的兩種方式,都是使用WordPress自帶的函數來實現,他們輸入的HTML代碼也都是限定好的,就是使用 ul li 的形式來構建菜單列表:如:

1. <ul> 
2.     <li class="..">...</li> 
3.     <li class="..">...</li> 
4. </ul> 

如果主題的前端代碼不是你寫的,而且導航欄的代碼寫得很龜毛,這根本不是上面的WordPress標準的 ul 導航欄形式,如下面的代碼:

1. <dl> 
2.     <dt><strong>標題</strong></dt> 
3.     <dd><a target="_blank" title="#" href="#">菜單A</a></dd> 
4.     <dd><a target="_blank" title="#" href="#">菜單B</a></dd> 
5. </dl>