WordPress開發中如何自定義菜單

這篇文章主要為大家展示了“WordPress開發中如何自定義菜單”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“WordPress開發中如何自定義菜單”這篇文章吧。

函數意義
wp_nav_menu ()
自定義菜單顯示函數

register_nav_menu ()
自定義菜單注冊函數 – 單數

register_nav_menus ()
自定義菜單注冊函數 – 復數 （很蛋疼的一個復數形式）

以下舉例均用 register_nav_menus () 這個復數形式，以免混淆。

使用位置
register_nav_menus ()
function.php 文件中，用于注冊自定義菜單在后臺的代碼調用名稱和后臺顯示名稱。

wp_nav_menu ()
主題任意你想調用自定義菜單的位置。

使用方法
注冊4個菜單更正：3個菜單（困了，老出錯。）

 register_nav_menus( array( 
 'nav1' => 'n1',
//nav1 為菜單名稱（調用的時候用）
//n1 為顯示名稱 , 后臺選菜單的時候用
 
 'nav2' => 'n2',
 
 'nav3' => 'n3'
 
 ));

然后去你的后臺 =》 外觀 =》 菜單 里面看下，
基本上你就明白了，
要是不明白，
那你就再看一下，嘿嘿~

主題你想要顯示自定義導航的位置添加以下代碼。

//調用 nav1 的菜單
<?php wp_nav_menu( array( 'theme_location' => 'nav1' ) ); ?>
 
//調用 nav2 的菜單
<?php wp_nav_menu( array( 'theme_location' => 'nav2' ) ); ?>

然后就可以到后臺去添加一個菜單了，（名稱最好是名稱或中文。更正：最好是英文。）
你可以設定這個菜單里面顯示什么，不顯示什么，甚至可以設置導航的層級內容，很方便的說。

過濾掉自定義菜單中無用的CLASS值
在 WordPress 的自定義菜單的輸出中，菜單中每一個子元素都有一個很長的 class 值，雖然從外觀上看不出什么異樣來，但從代碼上看確實讓人心里很難受，其實要過濾掉這些 class 值有很多方法，今天來講一下通過掛載過濾器 （filter），去除那些我們不想要的class。
在 WordPress 3.5.0 以后的版本中將取消友情鏈接功能，并以自定義菜單功能實現，這個是后話。
我們在輸出自定義菜單的時候，為了讓我們更好的控制自定義樣式， WordPress 會默認給我們菜單的子元素輸出很多個 class 的值，就像下面這樣。

<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">

如何過濾之，讓我們的網頁源代碼變得簡潔、易讀呢？

在你的functions.php里面加入

function filter_nav_menu_css_class ($classes){
//想要通過的class值
 $do_class_name = array('current-menu-item');
 $outPut = array_intersect($do_class_name,$classes);
 array_filter( $classes );
 return $outPut;
};
add_filter('nav_menu_css_class','filter_nav_menu_css_class');

這里將 current-menu-item 這個值保留主要是為了辨別當前頁面。

其實，
還有其他方法去過濾輸出的 class 值的，
比如說控制 Walker_Nav_Menu 這個類來精確控制自定義菜單的輸出，
但因為比較麻煩所以在這里先不提，其實 Walker_Nav_Menu 這個類可以完成更多我們需要的功能。

總結 – 需注意
自定義菜單式在 WordPress 3.0 后才引入的一個功能概念，有點類似于之前的小工具，不過自定義菜單更傾向于導航用途，但因為新功能的中文翻譯、流傳較慢，再加上這個功能只要是主題成型的愛折騰的博主一般不會在導航方面折騰，所以大家還一直不了解，甚至都出現了錯誤教程滿天飛得局面，在這里希望有的博主在發表博文的時候不要以轉載為主，就算是轉載一些主要功能請具體測試一下，以免誤導新人。

需注意：
后臺設置中如果沒有給自定義導航里面設定菜單的話，那wp會為沒有設定菜單的導航里自動添加所有頁面為導航，這是一個蛋疼的缺省，所以如果這個導航我們不想顯示的話，你最好能在后天設定一個空的菜單，然后給不想顯示的導航添加這個菜單，這樣自定義導航就不會顯示了。

以上是“WordPress開發中如何自定義菜單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！