¿Quieres resaltar la página actual en el menú de navegación o en la barra lateral? Resaltar la página actual facilita la navegación.
Las funciones de menú de WordPress (wp_nav_menu, wp_list_pages) agregan automáticamente la clase `current_page_item` al `li` que contiene el enlace activo. Así que todo lo que tenemos que hacer es usar la misma clase para resaltar la página actual.
Instrucciones:
Todo lo que tienes que hacer es agregar este código al archivo `style.css` de tu tema:
/* Highlight using list element */
li.current_page_item{
background:#999;
color:#fff;
}
/* Highlight using link element */
li.current_page_item a{
text-decoration:underline;
background:#666;
}
Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.
Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Los mejores constructores de páginas de WordPress (comparados).
¿dónde encuentro el "archivo style.css del tema" en la versión gratuita de WordPress?
Gracias. Busqué en varios lugares, pero tu solución funcionó. ¡Lo aprecio mucho!
Hola Robert, nos alegra que nuestra solución te haya funcionado.
Por favor síguenos en Facebook y Twitter para más guías interesantes. 🙂
¡Funciona bien, gracias!
Este código funciona si el menú tiene un solo nivel. De lo contrario, resalta el enlace de primer nivel y todas las subcategorías dentro de él.
Por ejemplo, si estuvieras en "inicio>acerca de>noticias", resaltaría todas las categorías de "inicio" en lugar de solo "noticias".
Mi tema agrega la clase CSS `.current-menu-item`.
Puede ser diferente dependiendo del tema, pero el proceso sigue siendo el mismo.
funciona a la perfección y me ahorró un tiempo valioso. Gracias
¡¡¡Muchísimas gracias!!!!
hola señor, está bien pero quiero cambiar el color del enlace, no el color de fondo, por favor ayúdeme
El color se controlaría con la propiedad `color`, como por ejemplo:
li.current_page_item a{ color:#666; }
creo que solo necesitas agregar esto a tu CSS y no a la página functions.php. Funcionó perfectamente en mi CSS.
Gracias
Gracias, el fragmento de código se ha actualizado.