En este tutorial aprenderás a crear un botón en el menú de WordPress utilizando solo unas pocas líneas de CSS, sin necesidad de plugins ni modificaciones complejas en el código.
Un botón en el menú puede ser útil para diversas funciones, como:
- Enlace de contacto
- Acceso y registro de usuarios
- Botón de WhatsApp para comunicación directa
- Acceso rápido a Mi perfil / Mi cuenta
- Entrada a una intranet o área privada
Añadir un Elemento al Menú de WordPress
Antes de aplicar estilos, lo primero que debes hacer es agregar el elemento al menú desde el panel de administración:
- Ve a Apariencia > Menús.
- Selecciona el menú donde quieres agregar el botón.
- Añade el enlace que deseas convertir en botón (por ejemplo, «Contacto» o «Mi cuenta»).
- Guarda los cambios.
Asignar una Clase CSS al Elemento del Menú
Para aplicar estilos específicos al botón, necesitas asignarle una clase CSS personalizada:
- Dentro de Apariencia > Menús, haz clic en el elemento del menú que añadiste.
- Busca la opción «Clases CSS».
- Si no la ves, actívala en la parte superior de la pantalla, en el apartado «Opciones de pantalla».
- Escribe un nombre de clase en el campo correspondiente.
- Puedes elegir cualquier nombre, pero en este ejemplo usaremos «boton-menu».
- Guarda los cambios.
Con esto, ya tienes el elemento del menú listo para aplicarle los estilos CSS que lo convertirán en un botón visualmente atractivo.
Aplicar Estilos al Botón del Menú con CSS
Ahora que hemos agregado la clase CSS al elemento del menú, es momento de darle estilo para que se vea como un botón llamativo.
Para ello, iremos a Apariencia > Personalizar y accederemos a la pestaña CSS Adicional, donde podremos insertar nuestro código sin modificar archivos del tema.
El código CSS que utilices dependerá de tus necesidades, pero los principales elementos que puedes personalizar incluyen:
background-color→ Define el color de fondo del botón.max-height→ Controla la altura máxima del botón dentro del menú.color→ Cambia el color del texto del botón.border→ Personaliza el borde del botón, ya sea con un color sólido o eliminándolo por completo.border-radius→ Permite redondear las esquinas del botón para darle un estilo más moderno.
Aquí tienes un código base que puedes copiar y pegar en CSS Adicional para empezar a personalizar tu botón:
.boton-menu a{
background-color:red;
border-radius:5px;
max-height:50px;
}
.boton-menu a:hover{
background-color:white;
color:red !important;
border: 1px solid red;
}
.boton-menu .menu-link{
color:white !important;
}
Si quieres ver todo el proceso en detalle y entender mejor cómo funciona cada instrucción, te recomiendo que veas el siguiente vídeo. En él explico paso a paso cómo agregar el botón al menú de WordPress, aplicar los estilos en CSS Adicional y personalizar cada aspecto para que se adapte a tu diseño.
Además, podrás ver en acción cómo modificar los valores de color de fondo, altura, bordes y efectos al pasar el cursor, para que puedas ajustar el botón exactamente a tu gusto.
No dudes en hacer pruebas con los estilos CSS y adaptarlos a la identidad visual de tu sitio web. Con un poco de personalización, lograrás un botón atractivo y funcional en el menú de tu WordPress.
Como has visto, crear un botón en el menú de WordPress es un proceso sencillo que no requiere plugins ni modificaciones complejas. Con solo unas pocas líneas de CSS, puedes transformar cualquier elemento del menú en un botón llamativo y funcional.
Espero que este tutorial te haya sido útil y que ahora tengas claro cómo personalizar tu menú según tus necesidades. Recuerda que puedes ajustar los estilos CSS para adaptar el botón al diseño de tu sitio web, modificando colores, tamaños y efectos.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.