WordPress簡(jiǎn)單輸出菜單/子菜單的內(nèi)容列表的方法

學(xué)習(xí)NO.1

在定制網(wǎng)站的時(shí)候，高效利用菜單可以節(jié)約很多開(kāi)發(fā)時(shí)間。比如要輸出一系列的相關(guān)頁(yè)面，我們可以新建一個(gè)菜單，把這些頁(yè)面都放到菜單里，然后用“wp_nav_menu”方法輸出這些菜單項(xiàng)，比如這樣。

1. wp_nav_menu( array(
   
2.         'theme_location' => 'menu-top'
   
3. ) );

復(fù)制代碼

wp_nav_menu是一個(gè)已經(jīng)高度封裝的輸出函數(shù)，你可以通過(guò)注入?yún)��?shù)自定義各種標(biāo)簽和樣式，具體可以查看官方文檔（https://developer.wordpress.org/reference/functions/wp_nav_menu/），本文就不贅述了。但有一個(gè)問(wèn)題它沒(méi)有辦法解決，也就是只輸出特定的子菜單項(xiàng)，而不是整個(gè)菜單的菜單樹(shù)。

假如我通過(guò)wp_nav_menu方法可以輸出以下這個(gè)菜單，我需要在某些地方只輸出圈出的這塊子菜單，有什么方法可以做到嗎？

自然是有的，我們可以借助wp_get_nav_menu_items這個(gè)封裝讀沒(méi)有wp_nav_menu那么高的函數(shù)來(lái)解決。直接上代碼：

1. $parent_item_id = 888; //change this id by your needs
   
2. $menu_items = wp_get_nav_menu_items( $navigation_attributes['menu_id'] );
   
3. $menu_html = '';
   
4. for ( $x = 0; $x < count( $menu_items ); $x++ ) {
   
5.         $menu_item_parent = $menu_items[ $x ]->menu_item_parent;
   
6.         if( $menu_item_parent == $parent_item_id ){
   
7.                 $url = $menu_items[ $x ]->url;
   
8.                 $title = $menu_items[ $x ]->title;
   
9.                 $menu_html .= '<li><a href="' .esc_attr( esc_url( $url ) ). '">' .wp_kses_post( $title ).'</a></li>';
   
10.         }
    
11. }
    
12. echo $menu_html;

復(fù)制代碼

修改第一行的$parent_item_id 即可輸出對(duì)應(yīng)子菜單項(xiàng)了。$parent_item_id是一個(gè)數(shù)字，可以在菜單設(shè)置界面的控制臺(tái)里找到：

接下來(lái)我們?cè)偌庸ひ幌鹿δ�，要知道wp_nav_menu是可以標(biāo)記當(dāng)前頁(yè)面的，它會(huì)給當(dāng)前頁(yè)的項(xiàng)加一個(gè)”current_page_item”樣式，我們可以利用這個(gè)樣式對(duì)當(dāng)前頁(yè)做一些高亮顯示等交互處理。我希望在調(diào)用子菜單的時(shí)候也能有類(lèi)似功能。并且我們也要封裝一個(gè)短代嗎以便在后臺(tái)編輯器中隨時(shí)實(shí)用，下面是完整代碼：

1. //Out put submenu items in certain menu - https://blog.brain1981.com
   
2. //load navigation shortcode
   
3. add_shortcode( 'brain1981_custom_navigation', 'brain1981_add_custom_navigation' );
   
4. //create shortcode for navigation
   
5. function brain1981_add_custom_navigation( $attributes, $content = null ) {
   
6.         $navigation_attributes = shortcode_atts( array(
   
7.                 'menu_id' => '',
   
8.                 'parent_item_id' => '',
   
9.         ), $attributes );
   
10.         $menu_items = wp_get_nav_menu_items( $navigation_attributes['menu_id'] );
    
11.         $menu_html = '';
    
12.         $current_page_url = get_permalink( get_queried_object_id() );
    
13. 
    
14.         for ( $x = 0; $x < count( $menu_items ); $x++ ) {
    
15.                 $menu_item_parent = $menu_items[ $x ]->menu_item_parent;
    
16.                 if( $menu_item_parent == $navigation_attributes['parent_item_id'] ){
    
17.                         $url = $menu_items[ $x ]->url;
    
18.                         $is_current = '';
    
19.                         if( $current_page_url == $url) $is_current = 'current';
    
20.                         $title = $menu_items[ $x ]->title;
    
21.                         $item_id = $menu_items[ $x ]->post_slug;
    
22.                         $menu_html .= '<li class="'.$is_current.'"><a href="' .esc_attr( esc_url( $url ) ). '">' .wp_kses_post( $title ).'</a></li>';
    
23.                 }
    
24.         }
    
25.         return '<u>'.$menu_html.'</ul>';
    
26. }

復(fù)制代碼

以上代碼中，參數(shù)menu_id即菜單ID，parent_item_id即上面提到的子菜單ID，輸出的菜單項(xiàng)如果是當(dāng)前頁(yè)面，會(huì)自動(dòng)生成“current”的樣式。自此，使用如下短代嗎即可隨時(shí)調(diào)用指定的子菜單

[brain1981_custom_navigation menu_id=123 parent_item_id=60]

這樣就可以了

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線(xiàn)、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶(hù)，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話(huà)、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶(hù)也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線(xiàn)咨詢(xún)圖標(biāo)聯(lián)系我們并購(gòu)買(mǎi)后，我們?yōu)槟�免費(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！