WordPress制作主題導航菜單的方法（一）

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

在WordPress主題制作中，導航菜單的制作算是一個重點，已經寫好導航菜單的html代碼，放在WordPress主題中如何動態調用呢？本文將給你介紹幾種編寫php代碼動態實現導航的方法，本文也將只側重于動態代碼的開發，不會教你如何編寫HTML、css和JavaScript來實現華麗的導航菜單。

WP 3.0自定義菜單的制作

WordPress 3.0之后的版本開始支持自定義動態菜單，所謂的動態菜單，也就是允許用戶自行決定將哪些項目添加到導航菜單中，進入WordPress的管理后臺 – 外觀 – 菜單欄目，通過拖拉相應的欄目，即可創建自己的菜單。這對于WordPress主題開發者和使用者來說，都是皆大歡喜的事情。要想實現自定義菜單，需要用到的函數是wp_nav_menu()，給這個函數傳遞一些參數就可以輸出自定義菜單菜單，下面簡單講講如何使用使用這個函數。

首先，在主題目錄下的functions.php的 之間，添加以下菜單注冊代碼，這樣你就可以在主題文件中使用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; =>?'mymenu',?'depth'?=&gt;?1)?); ?&gt;

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

<div> ????<ul> ????????<li><a>首頁</a></li> ????????<li><a>分類A</a></li> ????????... ????</ul> </div>

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

如果是在首頁，那么首頁的菜單項的 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的時候，就為此問題煩惱，最后翻了文檔，查了一些資料，實現了在導航中添加分類，詳情請看我之前寫的文章：wp_nav_menu()

非常規導航欄的制作

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

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

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

推薦學習：《wp_nav_menu()》