Agregar clase al elemento activo y su padre en el menú de navegación

Question

Agregar clase al elemento activo y su padre en el menú de navegación

5 sept 2013, 00:26:51

Vistas: 22.9K

Votos: 2

Estoy usando el siguiente código para agregar el nombre de clase "active" al elemento actual del menú:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {
  // Si el elemento es del nivel principal y está activo actualmente
  if( $item->menu_item_parent == 0 && in_array('current-menu-item', $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

Esto funciona de maravilla, pero solo para elementos sin menú desplegable. Si hay un elemento con elementos hijos, no agregará la clase activa al elemento padre.

¿Hay alguna manera de modificar este código para que el filtro agregue una clase "active" tanto al enlace actual como a su padre?

Johann

867

menús filtros

Comentarios

No necesitas hacer esto... WordPress ya añade clases para esto como current-menu-item o current-ancestor-item... etc...

User

5 sept 2013 00:38:51

Hola @splashingpixels, sé que WordPress añade sus propias clases personalizadas pero específicamente necesito añadir una clase llamada "active".

Johann

5 sept 2013 00:44:01

¿Puedo preguntar por qué necesita ser la palabra active?

User

5 sept 2013 00:45:30

Gracias por tu rápida respuesta. Estoy desarrollando un tema usando Bootstrap como base y estilos base de Bootstrap. La nomenclatura de clases difiere de WordPress y me gustaría construir un filtro antes de modificar los estilos principales.

Johann

5 sept 2013 01:00:23

Todas las respuestas a la pregunta

Comentarios

Hola @splashingpixels. Probé tu código pero parece no funcionar. Revisé el código fuente y la clase "active" no se está agregando.

Johann

5 sept 2013 01:01:15

He actualizado la respuesta, prueba eso...

User

5 sept 2013 01:07:49

¡Gracias @splashingpixels, eres increíble! Código impecable. Solo una pregunta más, que no sé si es posible o si es una restricción de Wordpress. Con este código, ahora todos los elementos padres tienen la clase "active" cuando es necesario. ¿Hay alguna manera de que si hago clic en un elemento del menú desplegable, también se agregue la clase active? ¿Para que la clase "active" se agregue tanto al padre como al hijo?

Johann

5 sept 2013 01:13:05

Sí, puedes, mira la respuesta actualizada... y por favor márcala como la respuesta si te funcionó... gracias.

User

5 sept 2013 01:24:58

¡Eres el mejor, este problema está resuelto!

Johann

5 sept 2013 01:28:56

User 100 · Accepted Answer · 2013-09-05T00:51:08Z

Dependiendo del contexto que necesites y basándote en el código que tienes, puedes probar esto:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {
  $class_names = array( 'current-menu-item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent',  'current_page_ancestor' );

  if( $item->menu_item_parent == 0 && in_array( $class_names, $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

ACTUALIZACIÓN: Si el código anterior no funciona debido al array como parámetro para la función in_array por la versión de PHP, prueba este código:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

  if( $item->menu_item_parent == 0 && 
    in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}

Si quieres que cualquier elemento actual tenga la clase active, puedes hacer esto:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

  if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}