2016-05-08 12 views
1

hinzufügen Wie kann ich Walker in wp-Navigationssystem verwenden, wenn ich etwas in Menü hinzufügen möchten, ob das Element untergeordnete Elemente hat, ich verwende folgende Code-WP Attribute und HTML in Menü

<?php 
wp_nav_menu(array(
    'menu' => '', 
    'container' => 'ul', 
    'container_class' => '', 
    'container_id' => '', 
    'menu_class' => 'nav navbar-nav', 
    'menu_id' => 'menu-main-menu', 
    'echo' => true, 
    'before' => '', 
    'after' => '', 
    'link_before' => '', 
    'link_after' => '', 
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
    'walker' => '', 
    'theme_location' => 'header_menu' 
)); ?> 

und meine Ergebnis ist so etwas wie

<ul id="menu-main-menu" class="nav navbar-nav"> 
    <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children dropdown menu-item-16"> 
     <a href="***">Home</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-18"><a href="***">Something</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="***">Sample Page</a></li> 
</ul> 

Aber ich brauche zu ersetzen <ul class="sub-menu"> mit <ul role="menu" class=" dropdown-menu"> und <a href="***">Home</a> mit <a href="***" data-toggle="dropdown" class="dropdown-toggle">Home <i class="fa fa-angle-down"></i></a>

Antwort

2

Sie tun können, th ist durch die Wanderer wie so erstreckt:

class custom_sub_walker extends Walker_Nav_Menu { 

    public function start_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n"; 
    } 

    public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

     $class_names = $value = ''; 

     $classes = empty($item->classes) ? array() : (array) $item->classes; 
     $classes[] = 'menu-item-' . $item->ID; 

     /*grab the default wp nav classes*/ 
     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args)); 

     /*if the current item has children, append the dropdown class*/ 
     if ($args->has_children) 
      $class_names .= ' dropdown'; 

     /*if there aren't any class names, don't show class attribute*/ 
     $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : ''; 

     $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args); 
     $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 


     $output .= $indent . '<li' . $id . $value . $class_names .'>'; 

     $atts = array(); 
     $atts['title'] = ! empty($item->title) ? $item->title : ''; 
     $atts['target'] = ! empty($item->target) ? $item->target : ''; 
     $atts['rel'] = ! empty($item->xfn)  ? $item->xfn : ''; 


     /*if the current menu item has children and it's the parent, set the dropdown attributes*/ 
     if ($args->has_children && $depth === 0) { 
      $atts['href']   = '#'; 
      $atts['data-toggle'] = 'dropdown'; 
      $atts['class']   = 'dropdown-toggle'; 
     } else { 
      $atts['href'] = ! empty($item->url) ? $item->url : ''; 
     } 

     $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args); 

     $attributes = ''; 
     foreach ($atts as $attr => $value) { 
      if (! empty($value)) { 
       $value = ('href' === $attr) ? esc_url($value) : esc_attr($value); 
       $attributes .= ' ' . $attr . '="' . $value . '"'; 
      } 
     } 

     $item_output = $args->before; 

     $item_output .= '<a'. $attributes .'>'; 

     $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 

    /* if the current menu item has children and it's the parent item, append the fa-angle-down icon*/ 
     $item_output .= ($args->has_children && $depth === 0) ? ' <i class="fa fa-angle-down"></i></a>' : '</a>'; 
     $item_output .= $args->after; 

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

    } 


    public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { 
     if (! $element) 
      return; 

     $id_field = $this->db_fields['id']; 

     if (is_object($args[0])) 
      $args[0]->has_children = ! empty($children_elements[ $element->$id_field ]); 

     parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
    } 
} 

eine Datei custom_walker.php über Ordner in Ihren Themen mit dem Code aufgerufen erstellen und es in functions.php mit require_once('custom_walker.php'); importieren oder die Klasse in functions.php einfügen.

Dann wird Ihr Menü aufrufen:

<?php 
wp_nav_menu(array(
    'menu_class' => 'nav navbar-nav', 
    'menu_id' => 'menu-main-menu', 
    'theme_location' => 'header_menu' 
    'walker' => new custom_sub_walker(), 
)); 
?> 
+0

Es funktioniert wie Charme – Chingchi