WordPress製作主題導覽選單的方法（一）

WordPress怎麼製作主題導覽選單？以下這篇文章跟大家分享WordPress主題導覽選單製作的幾種方法，希望對大家有幫助！

在WordPress主題製作中，導覽選單的製作算是重點，已經寫好導覽選單的HTML程式碼，放在WordPress主題中如何動態呼叫呢？本文將給你介紹幾種編寫PHP程式碼動態實作導覽的方法，本文也將只專注於動態程式碼的開發，不會教你如何寫HTML、CSS和Javascript來實現華麗的導航選單。

WP 3.0自訂選單的製作

WordPress 3.0之後的版本開始支援自訂動態選單，所謂的動態選單，也就是允許使用者自行決定要將哪些項目加入導覽功能表中，進入WordPress的管理後台- 外觀- 選單欄目，透過拖曳對應的欄目，即可建立自己的選單。這對WordPress主題開發者和使用者來說，都是皆大歡喜的事。要實現自訂選單，需要用到的函數是wp_nav_menu()，給這個函數傳遞一些參數就可以輸出自訂選單選單，下面簡單講講如何使用這個函數。

首先，在主題目錄下的functions.php的3d38b4685f1387219e2e05ec2f41bf10 之間，加入以下選單註冊程式碼，這樣你就可以在主題檔案中使用wp_nav_menu函數了：

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

接著我們在主題的導覽列處呼叫wp_nav_menu()，即可輸出導航選單HTML程式碼：

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

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

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

這裡列出的li 項為你在後台- 外觀- 選單新增的欄目，如果你還沒有在背景新增選單，導覽列將列出所有頁面。另外，wp_nav_menu會為每個li 新增class，不同的class標記這個選單項目的屬性，如目前開啟的是某個文章頁面，分類A 就是這篇文章所屬的分類，那麼分類A 所在的li 將會如下程式碼所示：

<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 可能會如下所示：

#

<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屬性，可以達到如高亮當前導航選單的目的，如將目前選單連結定義成紅色：

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

好了，WordPress 3.0的自訂選單的呼叫就是這麼簡單。 wp_nav_menu還有很多參數，例如自訂 ul 節點、ul 父節點的id和class的參數等等。

使用分類和頁面作為導覽列

在WordPress 3.0 之前，大部分WordPress主題都是拿頁面當作導覽列的，導覽中只能新增頁面，顯得不夠自由。我剛用WordPress 2.7的時候，就為此問題煩惱，最後翻了文檔，查了一些資料，實現了在導航中添加分類，詳情請看我之前寫的文章：WordPress 分類做導航欄，並高亮顯示

非常規導覽列的製作

#以上提到的兩種方式，都是使用WordPress自帶的函數來實現，他們輸入的HTML程式碼也都是限定好的，就是使用ul li 的形式來建立選單列表：如：

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

如果主題的前端程式碼不是你寫的，而且導航欄位的程式碼寫得很龜毛，這根本不是上面的WordPress標準的ul 導覽列形式，如下面的程式碼：

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

重寫前端程式碼？我想誰都不願意這樣做，那該怎麼辦呢？還有，如果導覽列不使用分類和頁面，也不讓使用自訂選單，那怎麼辦？在實際的應用中，我們還會遇到各種各樣且稀奇古怪的需求，下期內容我們將繼續探討這個問題！

推薦學習：《WordPress教學》

以上是WordPress製作主題導覽選單的方法（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！