¿Cómo agregar la clase active en el elemento del menú de la página actual?

Question

¿Cómo agregar la clase active en el elemento del menú de la página actual?

6 feb 2014, 16:15:02

Vistas: 32.6K

Votos: 4

Tengo dos enlaces: Productos y Noticias.

Cuando hago clic en Productos o Noticias, me devuelve una página de archivo que contiene algunas entradas, cuando hago clic en una entrada me devuelve una página individual de esta entrada.

En el menú uso este código en <li> para agregar una clase llamada active si la página es inicio:

<li<?php if(is_home()) {?> class="active"<?php } ?>>

Pero no sé cómo hacerlo cuando tengo dos páginas de archivo y dos páginas individuales.

Si uso if( is_archive() || is_single() ) agregará la clase en ambos elementos del menú.

Cualquier ayuda sería apreciada.

Ramon Vasconcelos

171

menús

Comentarios

¿Cómo está creado tu menú?

s_ha_dum

6 feb 2014 16:40:34

@s_ha_dum No utilicé wp_nav_menu, lo creé yo mismo en código

Ramon Vasconcelos

6 feb 2014 16:59:17

is_archive y is_single deberían ser mutuamente excluyentes. Sugeriría que publiques más código. ¿Por qué no estás usando wp_nav_menu?

s_ha_dum

6 feb 2014 17:01:09

@s_ha_dum Intenté usar wp_nav_menu, agrega la clase current pero no añade esta clase en Productos ni Noticias.

Ramon Vasconcelos

6 feb 2014 17:08:43

Usa wp_nav_menu y mira la respuesta de @BradDalton.

s_ha_dum

6 feb 2014 17:19:37

Mostrar los 1 comentarios restantes

Todas las respuestas a la pregunta

Comentarios

¿Dónde se supone que debo poner este código? ¿en functions.php? ¿y dónde aparecerá esta clase "products-class"?

Ramon Vasconcelos

6 feb 2014 16:58:25

Coloca el código al final de tu archivo functions.php. Usa la clase en tu archivo style.css del tema hijo.

Brad Dalton

6 feb 2014 16:59:39

Me refiero a ¿dónde añade esta función la clase en el código? ¿en el body?

Ramon Vasconcelos

6 feb 2014 17:09:52

Lo agrega al elemento del menú de navegación que incluyes en el código PHP. Lo añade condicionalmente solo al elemento del menú de productos cuando estás en una página de archivo. Simplemente cambia las etiquetas condicionales según tus necesidades.http://codex.wordpress.org/Conditional_Tags

Brad Dalton

6 feb 2014 17:13:23

Supongo que tus publicaciones de Productos y Noticias son tipos de publicaciones personalizados.
Para ambas etiquetas condicionales, hay un equivalente específico para $post_type:

if (is_post_type_archive('products')) {
   // ...
} elseif (is_post_type_archive(array('news', 'something'))) {
   // ...
} elseif (is_singular('products')) {
   // ...
} elseif (is_singular(array('news', 'something'))) {
   // ...
}

Entonces, para Productos, sería:

if (is_post_type_archive('products') || is_singular('products'))

Para Noticias de manera similar.

Referencias:

tfrommen

9.23K

6 feb 2014 17:14:16

Brad Dalton 6.97K · Accepted Answer · 2014-02-06T16:36:51Z

Podrías agregar clases condicionales para cada uno en el archivo de funciones de tu tema hijo:

Aquí hay un ejemplo que puedes modificar para adaptarlo a tus necesidades.

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

function wpsites_nav_class($classes, $item){

if( is_archive() && $item->title == "Productos"){     

         $classes[] = "products-class";
 }
 return $classes;

Fuente http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

Luego puedes estilizar tu menú de navegación usando la nueva clase en el archivo style.css de tu tema hijo.

.products-class {

Tus declaraciones CSS
}

Este código CSS es condicional basado en el código PHP anterior.

Brad Dalton

6.97K

6 feb 2014 16:36:51