Come stilizzare la voce di menu corrente quando si usa un walker

Question

Come stilizzare la voce di menu corrente quando si usa un walker

18 dic 2011, 21:47:25

Visualizzazioni: 13.9K

Voti: 2

Ho progettato un menu personalizzato e vorrei poter stilizzare i singoli li in base al fatto che sia la pagina corrente o meno. Credo che normalmente sia abbastanza semplice usando una classe come current-menu-item. Tuttavia sto anche usando un walker nel mio nav per mostrare un campo descrizione aggiuntivo - questo sembra disabilitarlo, qualcuno può aiutarmi??

<div id="navigation">

    <?php 
    $walker = new My_Walker; 
    wp_nav_menu(array( 'menu' => 'nav','walker' => $walker ) ); 
    ?>

</div><!-- END navigation -->

AGGIORNAMENTO:

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = '';

        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

        $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        ) .'"' : '';

        $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 .= '<span>' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;

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

BrandyMedia

21

menu navigazione

Commenti

la classe CSS 'current-menu-item' viene aggiunta all'interno della tua classe walker personalizzata. Per rispondere a questa domanda, avremmo bisogno di vedere il codice che stai utilizzando per il tuo walker personalizzato.

patnz

19 dic 2011 00:43:26

Grazie patnz, ho aggiunto il codice extra sopra, lo apprezzo molto.

BrandyMedia

19 dic 2011 22:54:12

Tutte le risposte alla domanda

Commenti

Un'aggiunta molto tardiva, ma se usi un archivio di post type personalizzato come punto del menu, devi cambiare il controllo in_array con "current-menu-item". Se fai questo, la funzione continua a funzionare anche su pagine singole o post. Non sono sicuro se questo sia cambiato da quando questa risposta è stata scritta 10 anni fa, quindi la mia soluzione potrebbe non essere stata disponibile all'epoca.

Rvervuurt

2 giu 2022 09:28:12

Commenti

Patnz, sei un salvatore! Lo apprezzo molto! Sono deluso che fosse una sola riga a causarmi mal di testa - sei un eroe, grazie!

BrandyMedia

20 dic 2011 22:50:42

Emissary 161 · Answer 1 · 2012-03-19T18:36:45Z

Una risposta tardiva ma ho pensato di contribuire dato che questa pagina era tra i primi risultati su Google quando cercavo una soluzione a questo problema. Anch'io avevo trascurato il fatto che WP aggiunge di default la voce di menu della pagina corrente (grazie patnz per averlo fatto notare).

Tuttavia non sono soddisfatto di quanto sia gonfiato il markup quando si includono le classi predefinite, quindi per chiunque altro fosse interessato si potrebbe invece usare una riga di codice simile alla seguente:

$class_names = in_array("current_page_item",$item->classes) ? ' active' : '';

Per completezza - ecco come apparirebbe nel tuo esempio di codice:

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = in_array("current_page_item",$item->classes) ? ' active' : '';

        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

        $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        ) .'"' : '';

        $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 .= '<span>' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;

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

patnz 1.46K · Answer 2 · 2011-12-20T00:02:32Z

Stai annullando i nomi delle classi predefinite quindi non vengono aggiunte.

//questo codice svuota le classi che dovrebbero essere aggiunte.
$class_names = '';

Prova questo:

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

        $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        ) .'"' : '';

        $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 .= '<span>' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;

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