Wordpress Nav Walker - 多級導航

Question

我需要在Wordpress站點中導航的幫助。我試圖讓WordPress的打印我的導航格式爲：

<ul data-menu="main" class="menu__level"> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk & Drinks</a></li> 
 
     </ul> 
 
     
 
<!-- Submenu 1/Shown when user clicks the first list item (item with data-submenu="submenu-1") on data-menu="main" --> 
 
     <ul data-menu="submenu-1" class="menu__level"> 
 
     <li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li> 
 
     </ul> 
 
     
 
<!-- Submenu 2/Shown when user clicks the second list item (item with data-submenu="submenu-2") on data-menu="main" --> 
 
     <ul data-menu="submenu-2" class="menu__level"> 
 
     <li class="menu__item"><a class="menu__link" href="#">Citrus Fruits</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Berries</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Melons</a></li> 
 
     </ul> 
 
     
 
<!-- Submenu 3/Shown when user clicks the third list item (item with data-submenu="submenu-3") on data-menu="main" --> 
 
     <ul data-menu="submenu-3" class="menu__level"> 
 
     <li class="menu__item"><a class="menu__link" href="#">Buckwheat</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Millet</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">Promo Packs</a></li> 
 
     </ul> 
 
     
 
<!-- Submenu 4/Shown when user clicks the forth list item (item with data-submenu="submenu-4") on data-menu="main" --> 
 
     <ul data-menu="submenu-4" class="menu__level"> 
 
     <li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li> 
 
     <li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li> 
 
     <li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li> 
 
     </ul>

但我無法弄清楚如何指定子項具體的父項，然後用數據 - 它們打印子菜單。

導航結構就是從這裏取： http://tympanus.net/Blueprints/MultiLevelMenu/

謝謝！

更新：這與我的想法是一致的：使用php獲取導航數據然後用Javascript以正確的格式填充它會更容易還是更簡潔？有誰知道這是否會更好地處理這個問題？

或如何使用REST的API與此（我與這個相當新的，所以是有一點使用它作爲小網站項目的一部分）

Answer 1

其實，你可以抓取所有菜單數據（從某個位置）進入陣列&以任何你喜歡的方式輸出。

例如，你的菜單結構是這樣的：

Menu_parent1_item 
    Submenu_item_1 
    Submenu_item_2 
    Submenu_item_3 
Menu_parent2_item 
    Submenu2_item_1 
    Submenu2_item_2 
    Submenu2_item_3 
Menu_parent3_item 
    Submenu3_item_1 
    Submenu3_item_2 
    Submenu3_item_3 

將這個代碼裏面function.php：

function custom_menu_output($theme_location) { 
    if (($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location])) { 
     $menu = get_term($locations[$theme_location], 'nav_menu'); 
     $menu_items = wp_get_nav_menu_items($menu->term_id); 

     $menus = array(); 

     foreach($menu_items as $menu_item) { 
      $pid = $menu_item->menu_item_parent ? $menu_item->menu_item_parent : 0; 

      $menus[$pid][] = array(
       'link' => $menu_item->url, 
       'title' => $menu_item->title, 
       'id' => $menu_item->ID, 
      ); 
     } 

     foreach($menus as $key => $menu) { 
      if($key == 0) 
       echo '<ul data-menu="main" class="menu__level">'; 
      else 
       echo '<ul data-menu="submenu-'.$key.'" class="menu__level">'; 
      foreach($menu as $item) { 
       if(isset($menus[$item['id']])) 
        echo '<li class="menu__item"><a class="menu__link" data-submenu="submenu-'.$item['id'].'" href="'.$item['link'].'">'.$item['title'].'</a></li>'; 
       else 
        echo '<li class="menu__item"><a class="menu__link" href="'.$item['link'].'">'.$item['title'].'</a></li>'; 
      } 
      echo '</ul>'; 
     } 

    } else { 
     $menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->'; 
    } 
    echo $menu_list; 
} 

且模板中使用這樣的：

<?php custom_menu_output('menu_location_name_from_register_nav_menu'); ?> 

它會生成這樣的HTML（我已經基於你的問題描述）：

<ul data-menu="main" class="menu__level"> 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-717" href="http://yourdomain.tld/your_link/">Menu_parent1_item</a></li> 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-720" href="http://yourdomain.tld/your_link/">Menu_parent2_item</a></li> 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-725" href="http://yourdomain.tld/your_link/">Menu_parent3_item</a></li> 
</ul> 

<ul data-menu="submenu-717" class="menu__level"> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu_item_1</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu_item_2</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu_item_3</a></li> 
</ul> 

<ul data-menu="submenu-720" class="menu__level"> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_1</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_2</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_3</a></li> 
</ul> 

<ul data-menu="submenu-725" class="menu__level"> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_1</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_2</a></li> 
    <li class="menu__item"><a class="menu__link" href="http://yourdomain.tld/your_link/">Submenu2_item_3</a></li> 
</ul> 

您可以根據您的需要進一步自定義此代碼。

Answer 2

您可以使用學步車類，使ul和li結構的變化。

class themeslug_walker_nav_menu extends Walker_Nav_Menu { 


     private $color_idx = 0; 

     // add classes to ul sub-menus 
     function start_lvl(&$output, $depth) { 
      //p($output); 
      // depth dependent classes 
      $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 
      $display_depth = ($depth + 1); // because it counts the first submenu as 0 
      $classes = array(
       'sidebar-menu', 
       ($display_depth % 2 ? 'menu-odd' : 'menu-even'), 
       ($display_depth >=2 ? 'sub-sub-menu' : ''), 
       'level-' . $display_depth 
       ); 
      $class_names = implode(' ', $classes); 

      $back_btn = ''; 
      if($display_depth > 0){ 

       /*$parent_label = '<li class="top custom-row"> 
            <a class="close-menu" href="#"><span class="parent_label"></span><i class="fa fa-close"></i></a> 
            </li>'; 

       $back_btn = '<li class="sidebar-item back no-children back'.$display_depth.'"> 
           <div class="inner"> 
           <a class="hit-area" href="#">Back</a> 
           <i class="fa fa-chevron-left"></i> 
           </div> 
          </li>';*/ 
      } 

      // build html 
      $incri = $this->color_idx-1; 
      $output .= "\n" . $indent . '<ul class="menu__level" data-menu="submenu-'.$incri.'">' .$parent_label.$back_btn. "\n"; 
     } 

     // add main/sub classes to li's and links 
     function start_el(&$output, $item, $depth, $args) { 


      global $wp_query; 
      $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 

      // depth dependent classes 
      /*$depth_classes = array(
       'sidebar-item', 
       ($depth == 0 ? 'li0' : ''), 
       ($depth == 1 ? 'li1' : ''), 
       ($depth == 2 ? 'li2' : ''), 
       ($depth == 3 ? 'li3' : ''), 
       /*($depth % 2 ? 'menu-item-odd' : 'menu-item-even'), 
       'menu-item-depth-' . $depth 
      );*/ 



      if(in_array('menu-item-has-children',$item->classes)){ 
       $has_children = 'data-has-children="1"'; 
       $has_children_var = 1; 
       $depth_classes[] = 'has-children'; 
      } else{ 
       $has_children_var = 0; 
       $depth_classes[] = 'no-children'; 
      } 


      $li_attributes = 'data-level="'.$depth.'" data-title="'.apply_filters('the_title', $item->title, $item->ID).'" '.$has_children; 



      $depth_class_names = esc_attr(implode(' ', $depth_classes)); 




      // passed classes 
      $classes = empty($item->classes) ? array() : (array) $item->classes; 
      $class_names = esc_attr(implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item))); 

      // build html 
      $output .= $indent . '<li class="menu__item">'; 

      // link attributes 

      $attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : ''; 
      $attributes .= ! empty($item->target)  ? ' target="' . esc_attr($item->target ) .'"' : ''; 
      $attributes .= ! empty($item->xfn)  ? ' rel="' . esc_attr($item->xfn  ) .'"' : ''; 
      if($has_children_var == 1){ 
       $attributes .= ' data-submenu="submenu-'.$this->color_idx.'"'; 
      } 
      $attributes .= ' class="menu__link"'; 


      $item_output = sprintf('%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', 
       $args->before, 
       $attributes, 
       $args->link_before, 
       apply_filters('the_title', $item->title, $item->ID), 
       ($has_children_var == 1 ? $args->link_after : ''), 
       $args->after 
      ); 

      // build html 
      $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 

      if($has_children_var == 1){ 
       $this->color_idx++; 
      } 
     } 

    } 

但它沒有提供將子菜單ul與父項li分開的方法。

否則可以管理所有類如submenu-1, submenu-2。

嘗試修改該代碼。

更多信息參見本網站Energy & Manpower

右側菜單頁面右側的菜單按鈕，點擊後是建立在相同的方式