WordPress開發(fā)中如何自定義菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在你的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 這個值保留主要是為了辨別當(dāng)前頁面。

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

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

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

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