導航菜單是每一個WordPress主題必須的元素，如果你要制作一個WordPress主題，那就必須熟悉WordPress導航菜單注冊函數 register_nav_menus() 和 導航菜單調用函數wp_nav_menu() ，這兩個參數一般都是配合使用的。今天我們就一起來解釋一下這兩個函數，並舉例說明。
導航菜單注冊函數 register_nav_menus() 介紹
register_nav_menus() 是3.0以后用來注冊自定義菜單的函數，通過它可以很方便地給你的主題注冊一個或多個菜單，在主題的 functions.php 中添加：
1 2 3 4 |
register_nav_menus( array( 'header_menu' => 'My Custom Header Menu', 'footer_menu' => 'My Custom Footer Menu' ) ); |
上面的代碼注冊了兩個代碼，其中 'header_menu' 和 'footer_menu' 分別是這兩個菜單的“鍵key”，而后面的 'My Custom Header Menu' 和 'My Custom Footer Menu' 是對這個菜單的描述，會在 外觀 - 菜單 中顯示出來。下文將會圖例說明。
按照上面的結構，就可以注冊多個菜單。
導航菜單調用函數 wp_nav_menu() 介紹
wp_nav_menu() 是WordPress 3.0 以后添加的一個自定義導航菜單調用函數，可用來調用 register_nav_menus() 注冊的菜單。wp_nav_menu()的使用方法位於wp-includes/nav-menu-templates.php文件中。
可以通過 <?php wp_nav_menu( $args ); ?> 來調用菜單，其中參數 $args 的默認值如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?> |
每個參數的詳細介紹如下：
- $theme_locaton：(字符串)(可選)
默認值: None
用於在調用導航菜單時指定注冊過的某一個導航菜單名，如果沒有指定，則顯示第一個。
1 |
wp_nav_menu(array( 'theme_location' =>'primary')); //調用第一個菜單 |
- $menu：(字符串)(可選)
默認值: None
使用導航菜單的名稱調用菜單，可以是 id, slug, name (按順序匹配的) 。
- $container：(字符串)(可選)
默認值: div
ul 父節點（這里指導航菜單的容器）的標簽類型，只支持div 和 nav 標簽, 如果是其它值, ul 父節點的標簽將不會被顯示。也可以用false（container => false）去掉ul父節點標簽。
- $container_class：(字符串)(可選)
默認值: menu-{menu slug}-container
ul 父節點的 class 屬性值。
- $container_id：(字符串)(可選)
默認值: None
ul 父節點的 id 屬性值。
- $menu_class：(字符串)(可選)
默認值: menu
ul 節點的 class 屬性值。
- $menu_id：(字符串)(可選)
默認值: menu slug, 自增長的
ul 節點的 id 屬性值。
- $echo：(布爾型)(可選)
默認值: true (直接顯示)
確定直接顯示導航菜單還是返回 HTML 片段，如果想將導航的代碼作為賦值使用，可設置為false。
- $fallback_cb：(字符串)(可選)
默認值: wp_page_menu (顯示頁面列表作為菜單)
用於沒有在后台設置導航時調的回調函數。
- $before：(字符串)(可選)
默認值: None
顯示在每個菜單鏈接前的文本。
- $after：(字符串)(可選)
默認值: None
顯示在每個菜單鏈接后的文本。
- $link_before：(字符串)(可選)
默認值: None
顯示在每個菜單鏈接文本前的文本。
- $link_after：(字符串)(可選)
默認值: None
顯示在每個菜單鏈接文本后的文本。
- $items_wrap：(字符串)(可選)
默認值: None
使用字符串替換修改ul的class。
- $depth：(整型)(可選)
默認值: 0
顯示菜單的深度, 當數值為 0 時顯示所有深度的菜單。
- $walker：(對象型)(可選)
默認值: new Walker_Nav_Menu
導航菜單注冊和調用示例
要想定義出靈活強大的菜單，需要我們熟悉上面介紹的 導航菜單注冊函數 register_nav_menus() 和 導航菜單調用函數wp_nav_menu() 。
1.首先我們先要激活 WordPress 3.0 以后的自定義菜單功能，也就是要注冊菜單。在主題的 functions.php文件中添加下面的代碼：
1 2 3 4 5 |
//添加導航 register_nav_menus(array( 'left-menu' => '左邊欄菜單', 'top-menu' => '頂部菜單', )); |
這樣我們就注冊了 左邊欄菜單 和頂部菜單，你可以在 外觀-菜單 中查看到：
我們可以使用下面的函數調用 左邊欄菜單：
1 2 3 4 5 |
<?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') ); } ?> |
其中，'theme_location' 后面的值 是 'left-menu'，就是調用前面注冊的那個 左邊欄菜單，而 'container_id' 自定義為 'menu_left'，最終輸出的html結構如下：
1 2 3 4 5 6 7 8 |
<div id="menu_left" class="menu-xxx-container"> <ul class="menu"> <li><a href="http://www.wpdaxue.com">首頁</a></li> <li><a href="http://www.wpdaxue.com/news">WP資訊</a></li> ………… <li><a href="http://www.wpdaxue.com/announce">本站相關</a></li> </ul> </div> |
也就是說，菜單使用 <div id="menu_left">……</div> 來包含了，接下來，你就可以根據這個 id 來寫css美化菜單的顯示效果了。