Cómo estilizar el elemento de menú de la página actual al usar un walker en WordPress

Question

Cómo estilizar el elemento de menú de la página actual al usar un walker en WordPress

18 dic 2011, 21:47:25

Vistas: 13.9K

Votos: 2

He diseñado un menú personalizado y me gustaría poder estilizar los elementos li individuales dependiendo de si es la página actual o no. Normalmente esto es bastante sencillo usando una clase como current-menu-item. Sin embargo, también estoy usando un walker en mi navegación para mostrar un campo de descripción adicional - esto parece desactivar la funcionalidad, ¿alguien puede ayudarme?

<div id="navigation">

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

</div><!-- FIN navigation -->

ACTUALIZACIÓN:

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 = ''; // ¡Este es el problema! Estás eliminando todas las clases

        $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

menús navegación

Comentarios

la clase CSS 'current-menu-item' se agrega dentro de tu clase personalizada walker. Para responder esto necesitaríamos ver el código que estás usando para tu walker personalizado.

patnz

19 dic 2011 00:43:26

Gracias patnz, he agregado el código adicional arriba, realmente aprecio esto.

BrandyMedia

19 dic 2011 22:54:12

Todas las respuestas a la pregunta

Comentarios

Una adición muy tardía, pero si usas un archivo de tipo de entrada personalizado como punto de menú, necesitas cambiar la verificación in_array por "current-menu-item". Si haces esto, la función también seguirá funcionando en páginas individuales o entradas.

No estoy seguro si esto ha cambiado desde que esta respuesta fue escrita hace 10 años, así que es posible que mi solución no estuviera disponible en ese entonces.

Rvervuurt

2 jun 2022 09:28:12

Comentarios

¡Patnz, eres un salvavidas! ¡Te lo agradezco mucho! Estoy decepcionado de que fuera una sola línea la que me estaba dando dolores de cabeza - eres un héroe, ¡salud!

BrandyMedia

20 dic 2011 22:50:42

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

Una respuesta tardía pero pensé en contribuir ya que esta página estaba cerca de la parte superior de Google al buscar una solución para este problema. Yo también había pasado por alto el hecho de que WP agrega el elemento del menú de la página actual por defecto (gracias patnz por señalarlo).

Sin embargo, no estoy contento con lo inflado que queda el marcado al incluir las clases predeterminadas, así que para cualquier otra persona interesada, podrías usar una línea de código similar a la siguiente:

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

Para ser completo - así es como se vería en tu ejemplo de código:

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

Estás eliminando las clases predeterminadas, por lo que no se están agregando.

//este código vacía las clases que deberían agregarse
$class_names = '';

Prueba esto:

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