Resaltar una Página en el Menú WordPress

Read this article in English

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 priemera 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.

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!

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

4 Comentarios en “Resaltar una Página en el Menú WordPress

  1. Javier

    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. Lázaro Javier

    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!

Deja un comentario

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