¿Quieres
realizar un menú llamativo en WordPress con el que impresiones a todos tus
visitantes? ¡Te explicamos paso a paso cómo hacerlo!
Dos métodos para realizar un menú llamativo en
WordPress
Para
resaltar un menú y hacerlo más visual, tenemos dos vías: una para expertos y
otra para principiantes.
Los
expertos, que dominen las reglas para escribir CSS, pueden optar por emplear
selectores avanzados de CSS, escogiendo el
puesto que ocupa con respecto al resto de elementos (el primero, el cuarto o el
último) con los pseudo-selectores.
Por su parte, los
principiantes tienen la alternativa de utilizar la funcionalidad de WordPress, que posibilita agregar una clase concreta
al elemento que queramos destacar.
Se trata de una
funcionalidad de WordPress que suele estar oculta en nuestro panel de
administración. Para activarla, hemos de acceder al panel de administración y dirigirnos
al menú de Apariencia > Menús.
En este apartado, tenemos
la posibilidad de crear nuestro menú personalizado de WordPress. Una vez lo tengamos
creado, debemos hacer clic en la pestaña “opciones de pantalla”, que se
encuentra en la esquina superior derecha, y activar en la sección “mostrar
opciones avanzadas del menú” la casilla
“clases CSS”, lo que nos permitirá añadir a cada uno de nuestros elementos del
menú una clase distinta y dar un estilo propio a cada página o enlace.
Posteriormente, buscaremos 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)”.
Las clases de CSS que agreguemos han de ir sin el punto
delante que después usemos para seleccionarla, y si queremos añadir varias,
tenemos que dejar un espacio entre ambas.
¿Cómo
darle estilo al menú?
Tal y como decíamos, con
esta funcionalidad podremos cambiar lo colores, el tamaño de las fuentes y
hasta modificar la tipografía de nuestro menú, pero para ello debemos alterar el CSS de nuestra página.
Existen diferentes métodos:
-
Emplear el módulo JetPack
CSS personalizado
y activar el módulo de CSS, teniendo un completo editor CSS del tema a nuestro
alcance.
-
Usar el plugin Simple
Custom CSS
– También muy sencillo. Consiste en instalar Simple Custom CSS y activar el
plugin.
-
Crear un Child Theme – Se basa en cargar una hoja de estilos
propia justo después de la hoja de estilos del tema padre.
-
Editar directamente el
style.css de tu tema
–Sé consciente de que optando por esta vía, tanto si es un tema premium como un
tema gratuito, los cambios que realices desaparecerán cuando el tema se
actualice. Además, si no tienes conocimiento de CSS, ten mucho cuidado con las
puntuaciones y los cierres de reglas, porque podrías provocar que tu hoja de
estilos sea ilegible para algunos navegadores.
Editar el CSS de theme
WordPress
- Además de los problemas mencionados anteriormente, este método no te dará
acceso a todo el CSS en algunos temas.
De esta manera, podrás
insertar las características que desees en tu menú y lograr que sea más
atractivo para tus usuarios.