Im Wesentlichen versuche ich, mehrere Sub-Navi-Menüs hinzuzufügen, und ich bin ziemlich nah dran, aber ich kann einfach nicht den richtigen Weg finden, um mein Problem zu lösen ...
Ich verwende eine Variation eines Stu Nichols CSS-Menüs ...
Code erklärt besser ;-)
Die Beziehung, die zum Erstellen dieses Menüs erforderlich ist, enthält die Elemente der obersten Ebene als Listenelemente, untergeordnete Container als divs und untergeordnete Elemente und Geschwister {nth child} als uls ... Die Struktur wäre also die folgende ...
<li><a href='#'>parent</a>
<div>child-container
<ul><!--1st Child -->
<li>item</li>
...
</ul>
<ul><!--Sibling -->
<li>item</li>
...
</ul>
<ul><!--Sibling -->
<li>item</li>
...
</ul>
</div>
</li>
Mein aktueller Gedankengang ist es, einen zusätzlichen nav_menu_walker hinzuzufügen, um die Untermenü-Listen zu erstellen ... Ich bin mir jedoch nicht sicher, ob ich mehrere Walker als Argumente an wp_nav_menu übergeben kann ... IE ... ASSERT
$menu_params = array (
'theme_location' => 'primary',
'menu' => 'Main Menu',
'container' => 'div',
'container_class' => 'nav',
'container_id' => FALSE,
'menu_class' => FALSE,
'menu_id' => FALSE,
'echo' => TRUE,
'fallback_cb' => 'wp_page_menu',
'before' => FALSE,
'after' => FALSE,
'link_before' => FALSE,
'link_after' => FALSE,
'items_wrap' => "\n\t" . '<ul>%3$s</ul>' . "\n",
'depth' => 0,
'walker' => new Top_Nav_Menu_Walker()
<!-- Can I Add another Walker Here? -->
);
echo "\t\t<div id=\"navigation\">\n\t\t\t";
wp_nav_menu( $menu_params );
echo "\t\t</div>\n";
}
Um die Eltern-> Kind-Container-Beziehung zu erhalten, habe ich der Funktion start_lvl einfach div und ul hinzugefügt ... Hier habe ich Probleme beim Bestimmen, wie ich mehrere Geschwister erstellen kann ...
function start_lvl( &$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div>\n";
$output .= "\n$indent<ul>\n";
}
Um den Ankerelementen der obersten Ebene Klassen hinzuzufügen, habe ich einen benutzerdefinierten Walker. In der Funktion start_el habe ich Klassen für die Ankerelemente basierend auf der übergeordneten Klasse eingefügt.
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$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 ) . '"' : '';
/* inject some anchor classes */
if( $this->$depth == 0) {
if ( in_array( 'two', $item->classes ) || in_array( 'three', $item->classes )) {
$item->class = 'oneCol fly';
}
if ( in_array( 'four', $item->classes )) {
$item->class = 'twoCol fly';
}
};
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$output .= in_array( 'sub_nav_h4', $item->classes ) ? "\n" . $indent . "<h4>\n" : '';
$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 ) .'"' : '';
/* This 'should' always be true as WP doesn't support anchor classes */
$attributes .= ! empty( $item->class ) ? ' class="' . esc_attr( $item->class ) . '"' : '';
$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;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
Hier ist die Navigationsstruktur, die ich erreichen möchte ...
<div id="navigation">
<div class="nav">
<ul>
<li class="noCol one"><a href="/">One</a> </li>
<li class="threeCol two"><a class="oneCol fly" href="/two/">Two</a>
<div>
<ul>
<li><h4><a href="#url">Egestas Sed</a></h4></li>
<li><a href="#url">Consequat Leo</a></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><h4><a href="#url">Pellentesque Velit</a></h4></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><a href="#url">Donec non Fringilla</a></li>
<li><a href="#url">Fusce Ullamcorper</a></li>
</ul>
<ul>
<li><h4><a href="#url">Facilisis</a></h4></li>
<li><a href="#url">Tristique</a></li>
<li><a href="#url">Donec</a></li>
<li><h4><a href="#url">Sapien</a></h4></li>
<li><a href="#url">Purus</a></li>
<li><a href="#url">Congue</a></li>
<li><a href="#url">Mattis</a></li>
</ul>
<ul>
<li><h4><a href="#url">Integer nec Diam</a></h4></li>
<li><a href="#url">Morbi Eget Pharetra</a></li>
<li><a href="#url">Nulla & Orci</a></li>
<li><a href="#url">Eget Sapien Sodales</a></li>
<li><h4><a href="#url">Aenean</a></h4></li>
<li><a href="#url">Velit Ligula</a></li>
<li><a href="#url">Maecenas</a></li>
</ul>
</div>
</li>
<li class="threeCol three"><a class="oneCol fly" href="/three/">Three</a>
<div>
<ul>
<li><h4><a href="#url">Egestas Sed</a></h4></li>
<li><a href="#url">Consequat Leo</a></li>
<li><h4><a href="#url">Pellentesque Velit</a></h4></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><a href="#url">Donec non Fringilla</a></li>
<li><a href="#url">Fusce Ullamcorper</a></li>
</ul>
<ul>
<li><h4><a href="#url">Facilisis</a></h4></li>
<li><a href="#url">Tristique</a></li>
<li><a href="#url">Donec</a></li>
<li><h4><a href="#url">Sapien</a></h4></li>
<li><a href="#url">Purus</a></li>
<li><a href="#url">Congue</a></li>
<li><a href="#url">Mattis</a></li>
</ul>
<ul>
<li><h4><a href="#url">Integer nec Diam</a></h4></li>
<li><a href="#url">Morbi Eget Pharetra</a></li>
<li><a href="#url">Nulla & Orci</a></li>
<li><a href="#url">Eget Sapien Sodales</a></li>
<li><h4><a href="#url">Aenean</a></h4></li>
<li><a href="#url">Velit Ligula</a></li>
<li><a href="#url">Maecenas</a></li>
</ul>
</div>
</li>
<li class="twoCol four"><a class="twoCol fly" href="/four/">Four</a>
<div>
<ul>
<li><h4><a href="#url">Ut vel Cursus</a></h4></li>
<li><a href="#url">Maecenas imperdiet </a></li>
<li><a href="#url">Congue Metus</a></li>
<li class="fly"><a class="fly" href="#url">Vitae Luctus</a>
<ul>
<li><a href="#url">Purus Pellentesque</a></li>
<li><a href="#url">Pellentesque Sed</a></li>
<li><a href="#url">Felis Nunc</a></li>
</ul>
</li>
</ul>
<ul>
<li><h4><a href="#url">Morbi Placerat Luctus</a></h4></li>
<li><a href="#url">Ut & Eleifend</a></li>
<li><a href="#url">Feugiat Euismod</a></li>
<li><a href="#url">Tempus Condi</a></li>
</ul>
</div>
</li>
<li class="noCol five"><a href="/five/">Five</a></li>
<li class="noCol six"><a href="/six/">Six</a></li>
<li class="noCol seven"><a href="/seven">Seven</a></li>
</ul>
</div> <!--</div class="nav"> -->
</div><!--</div id="navigation"> -->
quelle
Antworten:
Ehrlich gesagt würde ich nur ein einziges Menü verwenden und dann eine CSS-Klasse (im Backend) auf das Navigationselement anwenden, das das sein soll.
Es ist einfach genug, eine CSS-Klasse in den Menübearbeitungsbereich einzufügen. Dies löst viele Ihrer Probleme, da Sie in Ihrem benutzerdefinierten Walker einfach prüfen können, ob diese Zeichenfolge vorhanden ist.
quelle
Sie können Ihr Menü mit dem Walker ändern.
Erstellen Sie eine Datei subMenu.php im Themenordner und fügen Sie den folgenden Code hinzu.
quelle