Tutorial WordPress: Cambiar el color de los enlaces del menú solo en la home con CSS específico

Introducción

Este tutorial explica, con todo lujo de detalles, cómo cambiar el color de los enlaces del menú únicamente en la página de inicio (home) de un sitio WordPress usando CSS específico. Incluye las distintas variantes según la estructura del tema, ejemplos de código listos para copiar, recomendaciones sobre accesibilidad y cómo aplicar los cambios correctamente (Customizador, child theme, caché, etc.).

Cómo funciona y por qué WordPress facilita esto

WordPress añade clases al elemento ltbodygt según el contexto de la página. Para la página principal normalmente existen clases útiles como home y/o front-page. Aprovechando estas clases podemos escribir reglas CSS que afecten solo cuando estemos en la home, sin tocar el resto del sitio.

Preparación: dónde poner el CSS

Customizer → Apariencia → CSS Adicional: la forma más rápida y segura para la mayoría de usuarios.
Child theme → fichero style.css: recomendable si vas a mantener cambios a largo plazo y versionar CSS.
Plugin de CSS personalizado: otro método válido si no usas un child theme.
Encolado desde functions.php o inyectando estilos solo en home (avanzado): útil si quieres añadir solo en la home y evitar cargar CSS globalmente.

Identificar la estructura del menú del tema

Antes de escribir CSS inspecciona el HTML del tema (Herramientas de desarrollador). Algunos selectores comunes que encontrarás:

.main-navigation o #site-navigation
.menu, .menu-item, .menu-item a
.primary-menu, .nav-menu, .site-header

Es importante usar el selector que el tema realmente utiliza para asegurar que tu regla tenga efecto.

Ejemplos básicos: cambiar color de enlaces en la home

Ejemplo mínimo que funciona en la mayoría de temas si el contenedor del menú tiene la clase main-navigation:

.home .main-navigation a {
  color: #1a73e8
}
.home .main-navigation a:hover,
.home .main-navigation a:focus {
  color: #0d4db3
}

Variantes según la estructura del menú

Si tu tema usa listas con .menu-item y clases para el elemento actual:

.home .main-navigation .menu-item > a {
  color: #1a73e8
}
.home .main-navigation .menu-item.current-menu-item > a,
.home .main-navigation .menu-item.current_page_item > a {
  color: #0b56d8
  font-weight: 600
}

Si tu tema usa un id en el nav:

.home #site-navigation a {
  color: #2a9d8f
}

Si el tema usa variables CSS para colores

Muchos temas modernos definen variables CSS (custom properties). Puedes sobrescribirlas para la home:

/ Si el tema usa variables para el menú /
.home {
  --menu-link-color: #1a73e8
  --menu-link-hover: #0d4db3
}
.main-navigation a {
  color: var(--menu-link-color)
}
.main-navigation a:hover {
  color: var(--menu-link-hover)
}

Cuando la especificidad del tema es mayor

Si tu regla no se aplica porque el tema tiene selectores más específicos, puedes aumentar la especificidad sin usar !important preferiblemente. Ejemplo:

/ Selector más específico /
.home header.site-header nav#site-navigation ul.menu li.menu-item > a {
  color: #123456
}

Como último recurso, si no hay alternativa práctica, usa !important con cautela:

.home .main-navigation a {
  color: #1a73e8 !important
}

Accesibilidad y focos (focus)

Asegúrate de mantener buen contraste y estilos visibles para teclado y lectores. Añade estilos de foco claros:

.home .main-navigation a:focus {
  outline: 3px solid rgba(30,115,255,0.25)
  outline-offset: 2px
}

Adaptación al móvil (menús colapsados)

Los menús responsivos pueden tener otra estructura (botón de menú, clase toggled, etc.). Agrega reglas para mobile si es necesario:

@media (max-width: 780px) {
  .home .main-navigation .menu a {
    color: #1a73e8
  }
  .home .main-navigation .menu a:hover {
    color: #0d4db3
  }
}

Ejemplo práctico: sobrescribir color solo en front page y home

/ Afecta home (blog) y front-page (static page) /
.home .site-header .nav-menu a,
.front-page .site-header .nav-menu a {
  color: #e63946
}
.home .site-header .nav-menu a:hover,
.front-page .site-header .nav-menu a:hover {
  color: #9b1f2d
}

Agregar CSS solo en la home con PHP (opcional, avanzado)

Si prefieres inyectar el CSS únicamente cuando WordPress detecta la home (para no cargarlo en otras páginas), puedes añadir esto en functions.php de un child theme:

add_action(wp_head, function() {
  if ( is_front_page()  is_home() ) {
    echo ltstylegt
      .main-navigation a { color: #1a73e8 }
      .main-navigation a:hover { color: #0d4db3 }
    lt/stylegt
  }
})

Pasos recomendados para aplicar los cambios sin errores

Inspecciona el HTML del menú con las herramientas de desarrollador y anota las clases/ids reales.
Prueba las reglas en la consola CSS antes de pegarlas en el Customizer o style.css.
Añade el CSS en Apariencia → Personalizar → CSS adicional o en el style.css del child theme.
Si usas caché o minificadores (plugins), purga la caché tras guardar los cambios.
Prueba en móvil y con teclado (Tab) para verificar foco y accesibilidad.

Errores comunes y cómo solucionarlos

No se aplican los cambios: revisa especificidad y purge cache/minify.
Color aplicado también en otras páginas: usa .home o .front-page en el selector para limitarlo.
El menú tiene estilos inline o con !important: incrementa especificidad o, como último recurso, usa !important.
Contraste insuficiente: comprueba WCAG y añade estilos de foco visibles.

Recapitulación final

La manera más limpia y segura es utilizar las clases que WordPress ya añade al ltbodygt (.home y/o .front-page) y crear selectores CSS lo bastante específicos para apuntar al contenedor del menú de tu tema. Usa Customizer para cambios rápidos o un child theme para modificaciones permanentes. No olvides probar en móvil y limpiar cachés.

Para más referencia técnica sobre las clases del body y funciones condicionantes puedes consultar la documentación oficial de WordPress.

SushiHost