Resaltar una Página en el Menú WordPress

Ya hemos hablado de la importancia de hacer más sencilla la vida a nuestros visitantes y mejorar así la experiencia de usuario. Por ello, si hay un elemento en el nuestro menú de navegación o cabecera donde queremos que los usuarios hagan clic, vamos a darle más importancia y resaltarlo para hacerlo más visual, lo haremos añadiendo clases CSS a un elemento del menú WordPress.

Para poder aplicar un estilo o diseño a un elemento concreto del menú en WordPress tendremos dos opciones:

En primer lugar podemos usar selectores avanzados de CSS seleccionando el puesto que ocupa con respecto al resto de elementos (el primero, el cuarto o el último) con los pseudo-selectores :first-child, :last-child o similar. Esto requiere de un poco de maña y buenas prácticas para escribir bien las reglas CSS.

Diseño propio pagina menu WordPress

O una segunda opción, mucho más sencilla que es utilizando la funcionalidad de WordPress de añadir una clase concreta al elemento que queramos resaltar. Para nuestro ejemplo utilizaremos el sitio demo de la plantilla para blogs Rosalie, y el elemento a resaltar será la página de Contacto.

Activando funcionalidad para añadir clases CSS a página del menú

Esta funcionalidad del Core de WordPress suele estar oculta en nuestro panel de administración, pero hacer que se muestre es muy sencillo. Para ello necesitamos acceder a nuestro panel de administración (ya sables, a través de la direccióon misitioweb.com/wp-admin/) y una vez dentro dirigirnos al menu de Apariencia > Menús.

Desde aquí podemos crear nuestro menú personalizado de WordPress. Si tienes dudas de como crear uno o de cómo añadir un elemento sin enlace, te recomiendo que le des un vistazo a este tutorial sobre menús en WordPress. Desde aquí también tienes acceso a la configuración del menú social, como es en el caso de la plantilla Rosalie que estamos usando como ejemplo.

Una vez tengamos creado nuestro menú, vamos a hacer clic en la pestaña “opciones de pantalla” que se encuentra en la esquina superior derecha.

activar clases css en menu WordPress

Esto hará desplegar un menú con varias opciones y checkbox. Con esto sólo activamos la visualización de esta funcionalidad, pero aunque no esté activada, esta sigue funcionando, por lo que estos selectores son sólo para visualizar o no estas opciones.

La que nos interesa es la opción “Clases CSS”, para poder añadir a cada uno de nuestros elementos del menú una clase distinta y dar un estilo propio a cada página o enlace. La seleccionamos para activarlo.

Una vez activado ya podemos buscar en esta misma página el elemento al que queremos darle un estilo propio. Cuando lo encontremos, hacemos clic en él y veremos cómo se despliega un nuevo cuadro llamado “Clases CSS (opcional)”. Este es el que vamos a usar.

anadir Clase CSS a página WordPress

Las clases de CSS que vayamos a añadir deben de ir sin el punto delante que después utilizaremos para seleccionarla, y si queremos añadir varias, siempre dejamos un espacio entre ambas. Para aprender más sobre cómo nombrar correctamente una clase en CSS, puede servirte este artículo.

Para este ejemplo hemos introducido la clase “destacado-menu” al elemento “Contacto”, que es la página que queremos destacar. Solo nos queda guardar en la parte inferior derecha y ya tendremos nuestra clase publicada.

Dar estilo a la clase CSS añadida al menú

Ahora queda la parte divertida, dar estilo o diseño propio a dicho elemento. Como nosotros queremos que sea un elemento llamativo que invite a los visitantes a clicar en el enlace, optamos por aplicarle un fondo verde y un color de fuente blanco. Para ello, daremos estilo a dicho elemento con el siguiente CSS. Aquí tienes las opciones correctas sobre cómo añadir CSS a WordPress:

.destacado-menu > a {
background-color: #8bc34a;
color: #fff;
}

Resaltar un elemento en menú WordPress

Si analizamos el caso anterior, el menú de WordPress es un elemento lista desordenada en HTML, y si inspeccionas un poco el código, verás como la clase HTML se añade al elemento li, por lo que si queremos dar estilo al enlace, debemos seleccionar el enlace que se encuentre a un solo nivel de jerarquía. Si el código anterior no funcionase, puede ser que la hoja de estilos de tu tema esté usando un selector más completo. Para ello tenemos dos opciones:

Usar un selector más completo:

#page .nav-menu .destacado-menu > a {
background-color: #8bc34a;
color: #fff;
}

o añadiendo !important (mejor la primera opción):

.destacado-menu > a {
background-color: #8bc34a !important;
color: #fff !important;
}

Y listo, tendremos nuestro menú compuesto por un elemento singular y llamativo para nuestros visitantes, muy útil para dirigirlos a una página de contacto o una página que funcione como llamada a la acción.

Aquí tienes un resumen en vídeo sobre este tutorial para resaltar un elemento del menú de WordPress.

Otras ideas para resaltar un elemento del menú

Una vez que tengamos seleccionado el elemento por CSS podemos aplicar cualquier estilo. Desde colores, cambios de tamaño de fuentes hasta una tipografía particular, (aquí tienes unas cuantas para elegir).

Como hemos visto, con sólo unos sencillos pasos podemos personalizar nuestra plantilla WordPress para darle un diseño propio y resaltar un elemento del menú o conseguir una cabecera con mucho diseño. Espero que os haya sido de ayuda!

Comentarios (22)

  1. Hola Ricardo, gracias por su blog de ayuda.

    Quisiera poder cambiar el color de una palabra dentro de una linea menú. Por ejemplo, en una linea de menú que se llama «ERP verticales» cambiar el color de la palabra ERP.

    Te estaría muy agradecido por la ayuda.

    Javier

    1. Hola Javier,

      pon la palabra que necesites cambiar de color dentro de un elemento span, con una clase para después editarla, por ejemplo:

      <span class="color-destacado">ERP</span> verticales

      después por CSS añades el color deseado:

      .color-destacado { color: #c3889a !important; }

      Espero que te sirva, suerte!

  2. Hola Ricardo…
    Estaba probando poner código CSS en el editor de CSS que trae WordPress 4.7.2 y no he visto resultado, sin embargo pego el mismo código en la plantilla style.css y si me pincha, estoy probando con el mismo código que explicas en la sección de arriba, qué me puede estar pasando?
    gracias de antemano

    1. Saludos Lázaro,

      pues al menos que tu tema esté modificando algo en la prioridad de la carga del CSS, no tiene sentido que no se aplique.
      Prueba a poner un selector con más IDs o clases, o añadir !important; en la regla, para comprobar si hay algún problema con la carga.
      Comprueba que se aplica la clase y carga las reglas con el inspector de tu navegador.

      Suerte!

  3. Hola Ricardo,

    como podría resaltar texto (fondo de un color, fuente en blanco) que forma parte de la entrada en un post?Funcionaría añadiendo tu código en el CSS?

    Muchas gracias
    Lola

    1. Saludos Lola,

      para resaltar un texto dentro del artículo necesitarías contener tu texto destacado en una etiqueta span o similar, con una clase propia, tipo
      <span class="texto-destacado">mi texto destacado</span> y ya por CSS darle estilo usando la clase .texto destacado.

      Otra opción es usar la etiqueta ins, que la encontrarás en la pestaña de «texto» en el editor, y suele venir con algún tipo de estilo similar, aunque si no te gusta, por CSS puedes cambiar dicho estilo. Esta quizás sea la opción mas sencilla.

      Gracias por comentar!

  4. Hola Ricardo,
    Mil gracias por tu post de antemano. No me funciona el código que dices ni poninendo la etiqueta important… No sé si tendrá que ver pero estoy usando el tema the7 de wordpress y todos los cambios css los tengo que meter en wp-content/uploads/the7-css/custom.css.. es correcto?

    Ahí dentro he pegado este código concreto ( quiero cambiar el tipo de letra para un item que ya tengo instalada y me funciona en el resto del tema..):

    #page .main-nav .menu-item-text .menu-text .willy {
    font-family: bauhaus !important;
    font-size:20px;}

    También he probado sin lo de «#page .main-nav .menu-item-text .menu-text» delante… Sabes en qué me estoy equivocando o por que está fallando?..

    Gracias!!

    1. Saludos Raquel,

      lamentablemente cada tema usa unos selectores distintos por lo que posiblemente tu regla no se está aplicando.
      En segundo lugar la mejor forma de añadir CSS es desde el módulo CSS adicional de WordPress, así te aseguras que se cargue después de todos los archivos y reglas que aplique el tema. Aquí tienes como hacerlo.

      Por lo tanto, yo añadiría una clase propia como indica el artículo, por ejemplo menu-destacado y añadiría los estilos con important en «CSS adicional», en tu caso:

      .menu-destacado {
          font-family: bauhaus !important;
          font-size: 20px;
      }

      Si el tema está usando importants para definir sus elementos (mala práctica) no se aplicarán estos cambios, por lo que en ese caso tendrás que pedir ayuda a los autores del theme.

      Suerte!

  5. Hola Ricardo:
    Estoy trabajando con una plantilla wordpress que compré. No puedo hacer que cuando el menú esté activo en una página determinada tome el estilo que le doy. Por ejemplo si estoy en la página trabajos que en el menú ese ítem esté destacado (para saber donde estoy). Sería el current o algo así? Cómo podría hacerlo? Gracias anticipadas por tu respuesta.

    1. Saludos Mónica,

      exacto, tienes que usar la clase .current-menu-item, quedando por lo tanto tu código algo parecido a esto:

      #page .nav-menu .current-menu-item > a {
          background-color: #8bc34a;
          color: #fff;
      }

      (añade !important si fuera neceario)
      Espero sea de ayuda 🙂

      1. Puse esto en el custom.css pero no pasa nada. En realidad no se como hacerlo en wordpress. Mi menu tiene 6 items: Trabajos Proyectos Archivo Educación Diario Información y no se que archivos css o php debo modificar. Por ahi encontre esto con 3 links pero no se como implementarlo en mi caso.
        Que en definitiva lo que pretendo es simplemente que el link activo sea en negrita y subrayado. Muchas gracias Ricardo!

        1. Saludos Mónica,

          no tienes que tocar nada de PHP, WordPress automáticamente añade la clase que hablamos en el comentario anterior para que puedas usarla en tu CSS.
          Para asegurarte que el CSS funciona correctamente, añádelo siguiendo este tutorial comentado en el artículo.

          No obstante, si estás usando un tema WordPress, puedes ser que haya variaciones en el código, por tanto siempre puedes optar por pedir soporte a sus autores, que te indicarán de forma más certera como realizar la modificaión.

          Suerte!

  6. Hola Ricardo: Una consulta si quisiera dejar seleccionada una opción en mi menu permanentemente así se recargue la pagina es posible eso?. Por ejemplo si quiero en mi menu de paises dejar seleccionado permanentemente España y no se mueva esa selección hasta que se seleccione otro país, así la pagina sea recargada. Hay un código CSS para eso?. Te la puse difícil creo jejeje saludos y excelentes tus consejos

  7. Hola Ricardo,
    ¿y si quisiéramos destacar una pestaña solo cuando estemos en la página actual?? ¿Sería eso posible sin java?

    Muchas gracias por la aportación.

    1. Saludos Xana,

      para ello tienes que usar el siguiente selector CSS: .nav-menu .current-menu-item > a que indica que solo dé estilo al elemento del menú que coincide con la página que estás viendo actualmente.

      Suerte!
      Ricardo

  8. Muchas gracias, le estaba dando vuelta no encontraba como hacerlo,… Yo estaba poniendolo asi .destacado-menu > a { me faltaba > a que significa la letra a ?

  9. Hola, me ha venido fenomenal este tip.
    Lo único, que en el menú para móviles no me aparece igual el CSS que le he puesto al menú para pantallas.
    Me podrías decir qué debo añadir en CSS para que en móvil se vea correctamente?

    Muchas gracias!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *