眾所周知，WordPress3.0 中增加了一個非常實用方便的自定義選單功能，這個功能可以使我們輕鬆的製作出多級下拉選單，今天，筆者就透過一個簡單的二級下拉選單的示例來告訴各位童鞋具體怎麼操作。
Step 1 — 在 functions.php 中新增以下程式碼，使我們的主題支援自定義選單功能。
add_theme_support（『nav-menus』）;
Step 2 — 新增一個頂部選單。
if（function_exists（『register_nav_menus』））{
register_nav_menus（
array（
『header_menu』 => 『Header Navigation』
）
）;
}
Step 3 — 把 wp_nav_menu() 函式放到一個自定義函式當中.
function wper_so_menu（）{
if（function_exists（『wp_nav_menu』）&& has_nav_menu（『header_menu』））：
wp_nav_menu（
array（
『menu』 => 『Header Navigation』,
『container』 => 『div』,
『container_class』 => 『warp』,
『container_id』 => 『』,
『menu_class』 => 『ddsmoothmenu』,
『menu_id』 => 『nav』,
『echo』 => true,
『fallback_cb』 => 『fallback_no_menu』,
『before』 => 『』,
『after』 => 『』,
『link_before』 => 『』,
『link_after』 => 『』,
『depth』 => 2,
『walker』 => new Walker_Nav_Menu（）,
『theme_location』 => 『』,
『show_home』 => true
）
）;
endif;
}
這裡我解釋一下 wp_nav_menu() 函式的各個引數。這個函式的功能就是顯示一個自定義導航選單 (官方檔案)：
menu： 我們建立的選單名稱。本例中我們使用 「Header Navigation」
container： 我們建立的選單所在容器的名稱。如果設定為 「div」，則輸出結果為<div>.....</div>，本例中我們使用 「div」 。
container_class： 上面的容器的 class 屬性。如果設定為 nav，則輸出結果為<div class=「nav」>.....</div>，本例中我們使用 「warp」
container_id： 上面的容器的 id 屬性。如果設定為 menu，則輸出結果為<div id=「menu」>.....</div>
menu_class：無序列表 ul 的 class 屬性。本例中我們設定為 「ddsmoothmenu」，則輸入結果為<ul class=「ddsmoothmenu」>.....</ul>
menu_id：無序列表 ul 的 id 屬。如果設定為 「menu-item」，則輸出結果為<ul id=「menu-item」>.....</ul> 本例中我們使用 「nav」
echo： 是否顯示選單。如果設定為 false，則不顯示選單。
fallback_cb： 選單無法顯示時的提示資訊。比如：選單未找到。
before， after：包含<a&> 標籤容器的名稱，如果設定為：<span> 和</span> 則輸出結果為：<span><a>.....</a></span>
link_before， link_ after： 包含連結文字的標籤名稱，如果設定為：<em> 和</em> 則輸出結果為：<a><em> 連結文字</em></a>
depth：下拉選單的深度，本例中我們設定為：2，則只支援兩級下拉選單。預設為 0，即無限級下拉選單。
walker： 自定義的遍歷物件，呼叫一個物件定義顯示導航選單。預設為 ：new Walker_Nav_Menu（）
theme_location：後臺選單頁面中包含選單名稱的容器的 ID.
show_home：布林型值，是否顯示首頁。
Step 4 — 在 header.php 中的適當位置呼叫我們的自定義函式.
Step 5 — 現在我們的主題已經支援一個自定義選單了，接下來利用 jQuery 實現下來選單的動畫效果。載入 jQuery 庫是必須地！
所用到的 jQuery 程式碼：
（function（$）{
$（function（）{
$（document）.ready（function（）{
$（『#nav li』）.hover（
function（）{
//顯示二級選單，括號中的數字表示下拉選單完全顯示出來需要 200 毫秒。
$（『ul』， this）.slideDown（200）;
},
function（）{
//隱藏二級選單
$（『ul』, this）.slideUp（150）;
}
）;
）;
}）;
}）（jQuery）;
最後，我們得到如下 HTML 程式碼：
<div class=「warp」>
<ul id=「nav」 class=「ddsmoothmenu」>
<li id=「menu-item-6」 class=「menu-item .... menu-item-6」>
<a href=「http://localhost/？page_id=2」>
<span><em> 示例頁面 2</em></span>
</a>
<！-- 二級下拉選單 -->
<ul class=「sub-menu」>
<li id=「menu-item-36」 class=「menu-item .... menu-item-36」>
<a href=「http://localhost/？page_id=3」>
<span><em> 例項頁面 3</em></span>
</a>
</li>
<li id=「menu-item-54」 class=「menu-item .... menu-item-54」>
<a href=「http://localhost/？cat=1」>
<span><em> 文章分類 1</em></span>
</a>
</li>
<li id=「menu-item-55」 class=「menu-item .... menu-item-55」>
<a href=「http://localhost/？page_id=4」>
<span><em> 示例頁面 4</em></span>
</a>
</li>
<li id=「menu-item-56」 class=「menu-item ..... menu-item-56」>
<a href=「http://localhost/？page_id=5」>
<span><em> 示例頁面 5</em></span>
</a>
</li>
</ul>
<！-- 二級下拉選單結束 -->
</li>
</ul>
</div>
這樣，我們的下拉選單就製作完成了，只要適當的美化一下即可，至於 CSS 程式碼，相信聰明的你肯定可以寫出來。