您當前位置：首頁 > php開源 > WordPress > WordPress主題導(dǎo)航菜單制作的幾種方法(一)

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

來源：程序員人生發(fā)布時間：2014-02-01 06:20:36 閱讀次數(shù)：3838次

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

WP 3.0自定義菜單的制作

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

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

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

接著我們在主題的導(dǎo)航欄處調(diào)用wp_nav_menu()，即可輸出導(dǎo)航菜單HTML代碼：

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

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

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

如果是在首頁，那么首頁的菜單項的 li 可能會如下所示：

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

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

好了，WordPress 3.0的自定義菜單的調(diào)用就是這么簡單。wp_nav_menu還有很多參數(shù)，如自定義 ul 節(jié)點、ul 父節(jié)點的id和class的參數(shù)等等，詳情可以參考文檔：官方文檔 | 中文文檔

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

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