Cum să stilizezi elementul de meniu al paginii curente când folosești un walker

Question

Cum să stilizezi elementul de meniu al paginii curente când folosești un walker

18 dec. 2011, 21:47:25

Vizualizări: 13.9K

Voturi: 2

Am creat un meniu personalizat și aș dori să pot stiliza elementele individuale li în funcție de faptul dacă reprezintă pagina curentă sau nu. În mod normal, acest lucru este destul de simplu folosind o clasă precum current-menu-item. Totuși, folosesc și un walker în navigația mea pentru a afișa un câmp suplimentar de descriere - acest lucru pare să dezactiveze funcționalitatea, poate cineva să mă ajute??

<div id="navigation">

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

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

ACTUALIZARE:

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 = ''; // Această linie șterge toate clasele existente!

        $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

meniuri navigare

Comentarii

clasa CSS 'current-menu-item' este adăugată în interiorul clasei tale personalizate Walker. Pentru a răspunde la această întrebare, ar trebui să vedem codul pe care îl folosești pentru Walker-ul tău personalizat.

patnz

19 dec. 2011 00:43:26

Mulțumesc patnz, am adăugat codul suplimentar mai sus, apreciez foarte mult asta.

BrandyMedia

19 dec. 2011 22:54:12

Toate răspunsurile la întrebare

Comentarii

O adăugare foarte târzie, dar dacă folosești o arhivă de tip post personalizat ca punct de meniu, trebuie să schimbi verificarea in_array în "current-menu-item". Dacă faci asta, funcția va funcționa în continuare și pe pagini individuale sau postări.

Nu știu dacă acest lucru s-a schimbat de când acest răspuns a fost scris acum 10 ani, așa că soluția mea poate să nu fi fost disponibilă atunci.

Rvervuurt

2 iun. 2022 09:28:12

Comentarii

Patnz, ești salvatorul meu! Apreciez asta! Sunt dezamăgit că o singură linie mi-a cauzat atâta bătaie de cap - ești eroul meu, mulțumesc!

BrandyMedia

20 dec. 2011 22:50:42

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

Un răspuns întârziat, dar am considerat să contribui deoarece această pagină a fost aproape de top în Google când căutam o soluție pentru această problemă. Și eu am trecut cu vederea faptul că WP adaugă implicit elementul de meniu al paginii curente (mulțumesc patnz pentru observație).

Totuși, nu sunt mulțumit de cât de umflat este markup-ul atunci când includem clasele implicite, așa că pentru oricine altcineva interesat, puteți folosi o linie de cod similară cu următoarea:

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

Pentru completitudine - iată cum ar arăta în exemplul dumneavoastră de cod:

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

Anulezi clasele implicite, astfel încât acestea nu sunt adăugate.

//acest cod elimină clasele care ar trebui adăugate
$class_names = '';

Încearcă această soluție:

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