L'estensione di più Nav_Menu_Walker consente menu nidificati?

8

In sostanza sto cercando di aggiungere più menu di navigazione secondaria e sono abbastanza vicino ma non riesco proprio a trovare la giusta virata per risolvere il mio problema ...

Sto usando una variante di un menu CSS di Stu Nichols ...

Il codice spiega meglio ;-)

La relazione richiesta per creare questo menu avrebbe gli elementi di livello superiore come voci di elenco, contenitori figlio come div e figli e fratelli {n figlio} come uls ... Quindi la struttura sarebbe la seguente ...

<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>

La mia attuale linea di pensiero è quella di aggiungere un ulteriore nav_menu_walker per creare gli elenchi dei sottomenu ... Tuttavia, non sono sicuro di poter passare più walker come argomenta a 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";

}

Per ottenere la relazione parent -> child-container ho semplicemente aggiunto div e ul alla funzione start_lvl ... Ecco dove sto riscontrando problemi nel determinare come posso creare più fratelli ...

function start_lvl( &$output, $depth = 0, $args = array()) {

    $indent = str_repeat("\t", $depth);     
    $output .=  "\n$indent<div>\n";
    $output .=  "\n$indent<ul>\n";
}

Per aggiungere classi agli elementi di ancoraggio di livello superiore ho un walker personalizzato. Nella funzione start_el ho inserito le classi per gli elementi di ancoraggio in base alla classe padre.

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 );
}

Ecco la struttura di navigazione che sto cercando di raggiungere ...

<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"> -->

— Eddie B
fonte

Quella struttura è imposta dal CSS, giusto? In tal caso, è necessario ripensare il codice CSS. Scopri gli pseudo elementi, come: nth-child,: before,: after. Dubito fortemente che non sia possibile implementare un determinato design di menu con il markup di menu predefinito di WP. Puoi pubblicare uno screenshot di come dovrebbe apparire questo menu?

— onetrickpony,

Ho provato a caricare una schermata ma non credo di avere ancora il rappresentante qui :-) prima ... questo menu funziona come un campione come menu statico ... NP lì ... sta aggiungendo più elenchi non ordinati tramite un menu walker sto lottando con ... grazie per il vostro aiuto :-)

— Eddie B

@EddieB puoi sempre collegarti allo screenshot su un sito di hosting di immagini

— Steve Buzonas,

1

Francamente, userei solo un singolo menu e quindi applicherei una classe CSS (nel backend) all'elemento di navigazione che vuoi che sia.

È abbastanza semplice aggiungere una classe CSS nel riquadro di modifica dei menu, e questo risolve molte difficoltà poiché puoi semplicemente verificare la presenza di quella stringa nel tuo walker personalizzato.

— Michael Griffiths
fonte

Grazie Michael ... Questo è quello che sto facendo attualmente e sono in grado di ottenere un elenco non ordinato di sottomenu ... Non riesco proprio ad aggiungere più elenchi per menu ...

— Eddie B

In sostanza, il problema è poter aggiungere più elenchi per un singolo contenitore figlio IE parent {li} -> child_container {div} -> child {ul} | fratello {ul} | fratello {ul}

— Eddie B,

1

È possibile modificare il menu utilizzando Walker.

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

creare un file subMenu.php nella cartella del tema aggiungere sotto il codice.

<?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";  
    }
}

— Addy
fonte