添加子菜單內使用Walker_Nav_Menu爲WordPress

Question

我試圖子菜單項添加到父裏的一個div內部父李格的。

這是我得到...

<nav class="menu-main-menu-container"> 
<ul id="nav" class=""> 
    <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"> 
     <div> 
      <a title="Locations | Traditions" href="#">Visit</a> 
      <span>Locations | Traditions</span> 
      <div class="arrow"></div> 
     </div> 
     <div class="main_sub_nav_wrap"> 
      <h2>Visit</h2> 
     </div> 
     <ul class="sub-menu"> 
      <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"> 
       <a href="#">Sub Link 1</a> 
      </li> 
      <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"> 
       <a href="#">Sub Link 2</a> 
      </li> 
      <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"> 
       <a href="#">Sub Link 3</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

我想是因爲它把它納入「main_sub_nav_wrap」像這樣。

<nav class="menu-main-menu-container"> 
<ul id="nav" class=""> 
    <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"> 
     <div> 
      <a title="Locations | Traditions" href="#">Visit</a> 
      <span>Locations | Traditions</span> 
      <div class="arrow"></div> 
     </div> 
     <div class="main_sub_nav_wrap"> 
      <h2>Visit</h2> 
      <ul class="sub-menu"> 
       <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"> 
        <a href="#">Sub Link 1</a> 
       </li> 
       <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"> 
        <a href="#">Sub Link 2</a> 
       </li> 
       <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"> 
        <a href="#">Sub Link 3</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul> 

下面是我在用通過擴展學步車類，使導航...

<?php 
class My_Walker extends Walker_Nav_Menu { 
    function start_el(&$output, $item, $depth, $args) { 
    global $wp_query; 
    $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

    $class_names = $value = ''; 

    $classes = empty($item->classes) ? array() : (array) $item->classes; 

    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
    $class_names = ' class="' . esc_attr($class_names) . '"'; 

    $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; 

    $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  ) .'"' : ''; 
    $attributes .= ! empty($item->url)  ? ' href="' . esc_attr($item->url  ) .'"' : ''; 

    $item_output = $args->before; 
    $item_output .= '<div><a'. $attributes .'>'; 
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 
    $item_output .= '</a><span>' . $item->attr_title . '</span><div class="arrow"></div></div><div class="main_sub_nav_wrap"><div class="main_sub_nav"><div class="container"><div class="main_sub_nav_text"><h2>' . $item->title . '</h2></div></div></div></div>'; 
    $item_output .= $args->after; 

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 
} 
?> 

我使用它來添加到我的模板......

<?php 
    $walker = new My_Walker; 
    wp_nav_menu(array(
     'echo'   => true, 
     'container'  => '', 
     'theme_location' => 'header_menu', 
     'container'  => 'nav', 
     'menu_class'  => '', 
     'menu_id'  => 'nav', 
     'depth'   => 0, 
     'walker'   => $walker 
    )); 
?> 

Answer 1

我有一段時間沒有使用過這段代碼，所以請原諒我，如果它有點關閉。在這裏，我爲我的一個菜單項（ID 63）添加一個自定義的<ul>子菜單，並保留原來的菜單其餘部分。您可以修改if ($isCategoryItem){ ... }部分以適合您的輸出需求。

// Add product category menu as sub menu 
class My_Walker extends Walker_Nav_Menu{   

function start_el(&$output, $item, $depth, $args) { 
    global $wp_query; 
    $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

    $class_names = $value = ''; 

    $classes = empty($item->classes) ? array() : (array) $item->classes; 

    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
    $class_names = ' class="' . esc_attr($class_names) . '"'; 

    $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; 

    $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  ) .'"' : ''; 
    $attributes .= ! empty($item->url)  ? ' href="' . esc_attr($item->url  ) .'"' : ''; 

    $item_output = $args->before; 
    $item_output .= '<a'. $attributes .'>'; 
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 
    $item_output .= '</a>'; 
    $item_output .= $args->after; 

// $item_output is the actually outputted variable - add to it here as needed. 
    // Or modify the previous 5 lines if you need to change the link itself 

// Add category list to Category menu item 
    $isCategoryItem = $item->ID == "63"; 
    if ($isCategoryItem){ 
     $terms = get_prod_cats(); 

     if (count($terms) > 0) { 
      $cat_out .= '<ul class="sub-menu">'; 
      foreach ($terms as $term) { 
       $cat_out .= '<li>' 
           . '<a href="'. esc_url(home_url('/')) . 'category/' . $term->slug 
           . '">' . $term->name . '</a>' 
          . '</li>';  
      } 
      $cat_out .= '</ul>'; 
     } 
    // Here we actually modify it. The lines before set up the custom output 
     $item_output = $item_output . $cat_out; 
    } 

// Send it off to the next menu item! 
    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
} 

}