web-dev-qa-db-fra.com

L'extension de plusieurs Nav_Menu_Walkers autorise-t-elle les menus imbriqués?

Essentiellement, j'essaye d'ajouter plusieurs sous-menus et je suis assez proche, mais je n'arrive pas à trouver le bon virement pour résoudre mon problème ...

J'utilise une variante du menu CSS Stu Nichols ...

Le code explique mieux ;-)

La relation requise pour construire ce menu aurait les éléments de niveau supérieur en tant qu'éléments de liste, enfants-conteneurs en tant que div et enfants et frères et soeurs {nième enfant} en tant que uls ... Ainsi, la structure serait 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 est d’ajouter un nav_menu_walker supplémentaire pour construire les listes de sous-menus ... Cependant, je ne suis pas sûr de pouvoir transmettre plusieurs arguments de Walker à 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 difficultés à déterminer comment créer plusieurs frères et soeurs ...

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 programme personnalisé. Dans la fonction start_el, j'ai injecté des classes pour les éléments d'ancrage en fonction de la classe parente.

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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"> -->
menuscustomizationdropdownwalker
8
Eddie B

Vous pouvez modifier votre menu en utilisant walker.

include('subMenu.php');
$menu =  wp_nav_menu( array('menu' => 'YOUR-MENU-NAME','menu_class' => 'megamenu','walker' => new subMenu));

créez un fichier subMenu.php dans le dossier du thème, ajoutez ci-dessous le code.

<?php
class subMenu extends Walker_Nav_Menu {
    function end_el(&$output, $item, $depth=0, $args=array()) {

    if( 'parent' == $item->title ){
        $output .= '<div> //child-container
        <ul>
                    <li><h4><a href="#url">Egestas Sed</a></h4></li>
                    <li><a href="#url">Consequat Leo</a></li>
                    <li><a href="#url">Lacinia &amp; 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 &amp; 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 &amp; 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>
        ';
    }
    $output .= "</li>\n";  
    }
}
1
Addy

Franchement, je n’utiliserais qu’un seul menu, puis appliquerais une classe CSS (dans le backend) à l’élément de navigation souhaité.

Il est assez simple d'ajouter une classe CSS dans le volet d'édition de menu, ce qui résout un grand nombre de vos problèmes puisque vous pouvez simplement vérifier la présence de cette chaîne dans votre lecteur personnalisé.

1
Michael Griffiths