Un visitante llega a su sitio, abre la página «Servicios» y no puede saber de un vistazo dónde está. Los elementos del menú se ven idénticos. No hay estado activo. Esto no es un error de WordPress; por defecto, un tema no está obligado a resaltar el elemento actual. Pero unas pocas líneas de CSS solucionan el problema en menos de un minuto.

WordPress asigna automáticamente un conjunto de clases CSS a cada elemento del menú desde la versión 3.0. Tres de ellas indican «el usuario está en esta página o dentro de esta sección». Solo necesita escribir los estilos y la navegación se vuelve clara sin un solo clic.

💡 Resumen rápido:

• Abra el inspector del navegador y encuentre el selector CSS del menú de su sitio
• Añada de 3 a 5 líneas de CSS en el Personalizador o en style.css apuntando a las clases .current-menu-item, .current-page-ancestor y .current-post-ancestor
• Si el sitio tiene varios menús, refine el selector para que el resalte se aplique solo al principal
• En temas de bloques (FSE) el enfoque es el mismo, pero el CSS se añade a través del editor del sitio

Qué clases añade WordPress a los elementos del menú

Cuando WordPress genera un menú mediante wp_nav_menu(), cada elemento <li> recibe varias clases. Estas son las tres que controlan el estado «activo»:

.current-menu-item se asigna al elemento cuyo enlace apunta a la página actual. Abra «Contacto» y el elemento de menú «Contacto» recibe esta clase. La más directa y la más utilizada.

.current-page-ancestor se activa cuando el usuario está en una página hija mientras el elemento del menú apunta a la página padre. Por ejemplo, el menú contiene «Portafolio» y el visitante está leyendo un caso de estudio dentro de esa sección. El elemento padre «Portafolio» recibe la clase ancestor, de modo que también puede resaltarlo y mostrar en qué sección del sitio se encuentra el usuario.

.current-post-ancestor es el mismo concepto, pero para entradas y categorías. Si un elemento del menú enlaza a la categoría «Noticias» y el lector abre un artículo concreto de esa categoría, el elemento «Noticias» llevará esta clase.

WordPress asigna las tres clases automáticamente. Usted no necesita escribir condicionales en PHP ni editar plantillas manualmente, a diferencia de la era de WP 2.9 y anteriores, cuando cada enlace debía envolverse en una comprobación if contra la URL actual. Hoy basta con abrir el inspector y ver qué clase ya está adjunta al elemento objetivo.

Paso 1: Encontrar el selector del menú

Abra su sitio, pulse F12 (herramientas de desarrollo) y localice el elemento <ul> o <nav> que contiene los elementos del menú. Suele tener este aspecto:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Tome nota del identificador (#primary-menu) o la clase (.main-navigation) de su menú. Este es el selector que usaremos en el siguiente paso para limitar el alcance del CSS.

En los temas clásicos, los menús se generan casi siempre mediante wp_nav_menu() con un argumento theme_location como 'primary'. Las clases CSS las asigna la función nav_menu_css_class, y un filtro con el mismo nombre permite a los desarrolladores añadir o quitar clases mediante código. Pero para el resalte básico no se necesita código, solo CSS.

Paso 2: Añadir el CSS de resalte

El enfoque más simple y seguro es insertar los estilos a través del Personalizador integrado. En el administrador de WordPress, vaya a Apariencia → Personalizar → CSS adicional.

Copie y pegue:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Lo que hace este código: cuando un elemento del menú recibe la clase .current-menu-item, su enlace cambia el color del texto a blanco y el fondo a azul, además de un ligero redondeo. El resultado es visible de inmediato en la vista previa del Personalizador, antes de guardar.

Para un control más fino también puede resaltar los ancestros:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Aquí, en lugar de un relleno, hay un subrayado con una barra azul. Esta opción queda más limpia en temas minimalistas.

Paso 3: Limitar el alcance

Si su sitio tiene varios menús (principal en la cabecera, secundario en el pie, un menú de widget en la barra lateral), el CSS del paso anterior resaltará el elemento activo en todas partes. Eso rara vez es deseable.

Anteponga al selector de clase el ID o la clase del menú concreto que encontró en el paso 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Ahora el resalte se activará solo dentro del elemento con id="primary-menu". Los demás menús del sitio permanecen sin cambios.

Si su tema usa una clase en lugar de un ID, escriba .main-navigation .current-menu-item > a. El principio es el mismo.

Qué pasa con los temas de bloques (FSE)

En los temas basados en bloques (Twenty Twenty-Four, Twenty Twenty-Five y similares) no existe el Personalizador clásico con un campo de CSS adicional. Los menús se construyen mediante el bloque de Navegación.

El CSS se añade a través del editor del sitio: Apariencia → Editor → Estilos → tres puntos (menú) → CSS adicional. El código es exactamente el mismo; WordPress sigue asignando las clases .current-menu-item y las demás también en los temas de bloques.

La diferencia está en el selector. En FSE el contenedor del menú es un <nav> con una clase como .wp-block-navigation. Confirme el selector mediante el inspector y antepóngalo a las clases de elemento activo:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Si su sitio funciona con un tema moderno y el menú no se resalta «de fábrica», compruebe si el propio tema sobrescribe los estados del enlace mediante :hover y :focus sin estilos para .current-menu-item. La solución es añadir un selector de igual especificidad.

Una personalización más profunda del menú (desde megamenús hasta navegación móvil) se trata en un artículo aparte. También incluye un resumen de plugins para cuando el CSS ya no es suficiente: desde constructores gratuitos hasta soluciones profesionales con cuadrículas e iconos.

⁉️🤔 Preguntas frecuentes

¿Por qué el menú no se resalta después de añadir el CSS?

La causa más común es que el selector no coincide con la estructura HTML real. Abra el inspector (F12), haga clic en el elemento de menú activo y compruebe: ¿tiene el <li> la clase .current-menu-item? Si falta la clase, WordPress no considera esta página como «actual» para ese elemento. Esto puede ocurrir con tipos de contenido personalizados o plugins que alteran la lógica del menú. Solución: registre el tipo personalizado con 'show_in_nav_menus' => true o añada soporte mediante el filtro nav_menu_css_class.

¿Puedo resaltar un elemento del menú con un color distinto para cada página?

Sí. WordPress añade una clase única como .menu-item-{ID} a cada elemento, por ejemplo .menu-item-42. Use el inspector para encontrar el ID del elemento objetivo y escriba: .menu-item-42 > a { background: #d63638; }. Esto le permite codificar por colores el menú para que coincida con las secciones del sitio.

¿Cómo resalto un elemento del menú si es un enlace externo o un ancla?

Un enlace externo no recibirá .current-menu-item porque apunta a otro sitio y WordPress no puede identificarlo como «actual». Para las anclas dentro de la misma página, la clase tampoco se activa. En estos casos, añada manualmente una clase CSS personalizada al elemento: Apariencia → Menús → Opciones de pantalla → marque Clases CSS, luego introduzca su clase en los ajustes del elemento y asígnele estilo.

¿Es seguro añadir CSS mediante CSS adicional en el Personalizador?

Sí. Los estilos de este campo se almacenan en la base de datos y no se pierden al actualizar el tema, a diferencia de las ediciones en style.css de un tema hijo que pueden sobrescribirse accidentalmente. El campo está disponible desde WordPress 4.7 y es compatible con prácticamente todos los temas clásicos.

¿Vale la pena el esfuerzo: resumen en tres líneas

Resaltar el elemento activo del menú no es un capricho de diseñador; es una base de navegación. Sin ello, los visitantes pierden segundos extra orientándose. Con ello, la estructura del sitio queda clara de un vistazo.

La tarea la resuelven por completo tres clases: .current-menu-item, .current-page-ancestor y .current-post-ancestor. Cabe en cinco líneas de código. La implementación lleva tres minutos a través del Personalizador.

Si necesita más (comportamiento de menú no estándar, resalte condicional por rol de usuario o indicadores personalizados) consulte el resumen de más de 15 plugins de menú. Para el resalte básico, el CSS es suficiente.