Agregar clase active a wp_nav_menu

Question

Agregar clase active a wp_nav_menu

25 jul 2018, 17:05:27

Vistas: 19.8K

Votos: 0

Estoy usando este código pero no está funcionando

function special_nav_class($classes, $item){
    if( in_array('current-menu-item', $classes) ){
        $classes[] = 'active';
    }
    return $classes;
}
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

Inspeccionar Elemento:

<li id="menu-item-106" class="d-inline-block menu-item menu-item-type- 
post_type menu-item-object-page current-menu-item page_item page-item-32 
 current_page_item menu-item-106 active"><a href="#">Algo</a></li>

La clase active se agrega pero aún así no cambia el diseño, sigue igual.

TestimiUEB

15

menús navegación walker

Comentarios

El código funciona bien y puedes verlo en el Inspector. Primero, limpia todas las cachés y actualiza la página. Segundo, revisa tu CSS.

Max Yudin

25 jul 2018 17:44:34

Todas las respuestas a la pregunta

Comentarios

Gracias por la respuesta. Acabo de revisar el style.css y vi que current-menu-item no aparece en ninguna parte.

TestimiUEB

26 jul 2018 10:19:25

@TestimiUEB Quizás quieras volver a leer mi respuesta: "WordPress no estiliza el enlace por ti" ... "Puedes agregar una regla"

Andrew Magill

26 feb 2019 20:20:27

Andrew Magill 135 · Accepted Answer · 2018-07-25T19:17:31Z

No necesitarás ese código PHP para dar estilo a los enlaces de la página actual en tu navegación. WordPress añade una clase (current-menu-item) por defecto en los enlaces de la página actual. Pero WordPress no aplica estilos al enlace por ti. Eso sería parte del tema. Puedes añadir una regla al CSS del tema (normalmente en /wp-content/themes/tu_tema/style.css) para dar un estilo diferente al enlace. Por ejemplo:

li.current-menu-item a {
    color: pink;
    // o lo que prefieras
}

Andrew Magill

135

25 jul 2018 19:17:31