Essentiellement, j'essaie d'ajouter plusieurs menus de navigation secondaire et je suis assez proche, mais je n'arrive pas à trouver la bonne solution pour résoudre mon problème ...
J'utilise une variante d'un menu CSS Stu Nichols ...
Le code explique mieux ;-)
La relation requise pour construire ce menu aurait les éléments de niveau supérieur comme éléments de liste, les conteneurs enfants comme divs et les enfants et les frères et sœurs {nth child} comme uls ... La structure serait donc la suivante ...
<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>
Ma pensée actuelle consiste à ajouter un nav_menu_walker supplémentaire pour construire les listes de sous-menus ... Cependant, je ne suis pas sûr de pouvoir passer plusieurs marcheurs en arguments à wp_nav_menu ... 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";
}
Pour obtenir la relation parent -> enfant-conteneur, j'ai simplement ajouté div et ul à la fonction start_lvl ... Voici où j'ai des problèmes pour déterminer comment je peux créer plusieurs frères et sœurs ...
function start_lvl( &$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div>\n";
$output .= "\n$indent<ul>\n";
}
Afin d'ajouter des classes aux éléments d'ancrage de niveau supérieur, j'ai un marcheur personnalisé. Dans la fonction start_el, j'ai injecté des classes pour les éléments d'ancrage basés sur la classe parent.
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 );
}
Voici la structure de navigation que j'essaie de réaliser ...
<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"> -->
la source
Réponses:
Franchement, je n'utiliserais qu'un seul menu, puis appliquerais une classe CSS (dans le backend) à l'élément de navigation que vous souhaitez.
Il est assez simple d'ajouter une classe CSS dans le volet d'édition du menu, et cela résout beaucoup de vos difficultés car vous pouvez simplement vérifier la présence de cette chaîne dans votre marchette personnalisée.
la source
Vous pouvez modifier votre menu à l'aide du déambulateur.
créer un fichier subMenu.php dans le dossier du thème ajouter le code ci-dessous.
la source