WordPress制作主題導(dǎo)航菜單的方法（一）

WordPress怎么制作主題導(dǎo)航菜單？下面本篇文章給大家分享一下WordPress主題導(dǎo)航菜單制作的幾種方法，希望對(duì)大家有所幫助！

在WordPress主題制作中，導(dǎo)航菜單的制作算是一個(gè)重點(diǎn)，已經(jīng)寫好導(dǎo)航菜單的HTML代碼，放在WordPress主題中如何動(dòng)態(tài)調(diào)用呢？本文將給你介紹幾種編寫PHP代碼動(dòng)態(tài)實(shí)現(xiàn)導(dǎo)航的方法，本文也將只側(cè)重于動(dòng)態(tài)代碼的開發(fā)，不會(huì)教你如何編寫HTML、CSS和Javascript來(lái)實(shí)現(xiàn)華麗的導(dǎo)航菜單。

WP 3.0自定義菜單的制作

WordPress 3.0之后的版本開始支持自定義動(dòng)態(tài)菜單，所謂的動(dòng)態(tài)菜單，也就是允許用戶自行決定將哪些項(xiàng)目添加到導(dǎo)航菜單中，進(jìn)入WordPress的管理后臺(tái) – 外觀 – 菜單欄目，通過(guò)拖拉相應(yīng)的欄目，即可創(chuàng)建自己的菜單。這對(duì)于WordPress主題開發(fā)者和使用者來(lái)說(shuō)，都是皆大歡喜的事情。要想實(shí)現(xiàn)自定義菜單，需要用到的函數(shù)是wp_nav_menu()，給這個(gè)函數(shù)傳遞一些參數(shù)就可以輸出自定義菜單菜單，下面簡(jiǎn)單講講如何使用使用這個(gè)函數(shù)。

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

// This theme uses wp_nav_menu() in one location. register_nav_menus();

接著我們?cè)谥黝}的導(dǎo)航欄處調(diào)用wp_nav_menu()，即可輸出導(dǎo)航菜單HTML代碼：

<?php      // 列出頂部導(dǎo)航菜單，菜單名稱為mymenu，只列出一級(jí)菜單     wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); ?>

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

<div class="menu-menu-container">     <ul class="menu" id="menu-menu">         <li class="..." id="menu-item-1"><a href="...">首頁(yè)</a></li>         <li class="..." id="menu-item-2"><a href="...">分類A</a></li>         ...     </ul> </div>

這里列出的 li 項(xiàng)為你在后臺(tái) – 外觀 – 菜單添加的欄目，如果你還沒(méi)有在后臺(tái)添加菜單，導(dǎo)航欄將列出所有頁(yè)面。另外，wp_nav_menu會(huì)為每個(gè) li 添加class，不同的class標(biāo)記這個(gè)菜單項(xiàng)的屬性，如當(dāng)前打開的是某個(gè)文章頁(yè)面，分類A 就是這篇文章所屬的分類，那么 分類A 所在的 li 將會(huì)如下代碼所示：

<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>

如果是在首頁(yè)，那么首頁(yè)的菜單項(xiàng)的 li 可能會(huì)如下所示：

<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="..">首頁(yè)</a></li>

從這些class的名稱就知道它們的作用，通過(guò)給這些class添加css屬性，可以達(dá)到如高亮當(dāng)前導(dǎo)航菜單的目的，如將當(dāng)前菜單鏈接定義成紅色：

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

好了，WordPress 3.0的自定義菜單的調(diào)用就是這么簡(jiǎn)單。wp_nav_menu還有很多參數(shù)，如自定義 ul 節(jié)點(diǎn)、ul 父節(jié)點(diǎn)的id和class的參數(shù)等等。

使用分類和頁(yè)面作為導(dǎo)航欄

在 WordPress 3.0 之前，大部分WordPress主題都是拿頁(yè)面作為導(dǎo)航欄的，導(dǎo)航中只能添加頁(yè)面，顯得不夠自由。我剛用WordPress 2.7的時(shí)候，就為此問(wèn)題煩惱，最后翻了文檔，查了一些資料，實(shí)現(xiàn)了在導(dǎo)航中添加分類，詳情請(qǐng)看我之前寫的文章：WordPress 分類做導(dǎo)航欄，并高亮顯示

非常規(guī)導(dǎo)航欄的制作

以上提到的兩種方式，都是使用WordPress自帶的函數(shù)來(lái)實(shí)現(xiàn)，他們輸入的HTML代碼也都是限定好的，就是使用 ul li 的形式來(lái)構(gòu)建菜單列表：如：

<ul>     <li class="..">...</li>     <li class="..">...</li> </ul>

如果主題的前端代碼不是你寫的，而且導(dǎo)航欄的代碼寫得很龜毛，這根本不是上面的WordPress標(biāo)準(zhǔn)的 ul 導(dǎo)航欄形式，如下面的代碼：

<dl>     <dt><strong>標(biāo)題</strong></dt>     <dd><a target="_blank" title="#" href="#">菜單A</a></dd>     <dd><a target="_blank" title="#" href="#">菜單B</a></dd> </dl>

重寫前端代碼？我想誰(shuí)都不愿意這樣做，那怎么辦呢？還有，如果導(dǎo)航欄不使用分類和頁(yè)面，也不讓使用自定義菜單，那怎么辦？在實(shí)際的應(yīng)用中，我們還會(huì)遇到各種各樣且稀奇古怪的需求，下期內(nèi)容我們將繼續(xù)探討這個(gè)問(wèn)題！

推薦學(xué)習(xí)：《WordPress教程》