Cómo añadir un botón en tu menú de cabecera en cualquier tema y sin plugins

Si necesitas añadir un botón al menú de la cabecera de tu web no necesitas cambiar a un tema que incorpore esta funcionalidad ni instalar ningún plugin, puedes hacerlo fácilmente con lo que ya incorpora WordPress.

Lo único que vas a necesitar es lo siguiente:

  1. Añadir una clase CSS al elemento de nuestro menú que queramos convertir en botón.
  2. Añadir un poco de CSS personalizado.

¡Venga, que es fácil!

Personalizar el elemento del menú

Lo primero que vamos a hacer es crear un nuevo elemento en nuestro menú o modificar uno existente, pero antes debemos asegurarnos de que tenemos todo lo necesario.

Abre el personalizador de WordPress desde Apariencia → Personalizar o desde la parte visible de tu web, lo que prefieras, y ve a Personalizar → Menús y haz clic en el icono de la ruedita de arriba para activar la propiedad «Clases CSS» como en la siguiente captura…

Con esto activo ya tenemos todo lo que necesitaremos para nuestro menú.

Ahora abre el menú en el que quieras añadir el botón y selecciona el elemento que quieras convertir en menú o añade uno nuevo, esto da igual.

Lo importante es que ahora verás un campo nuevo, llamado «Clases CSS», pon dentro boton-menu, como en la siguiente captura…

Añadir el CSS

Ahora, sin salir del personalizador de WordPress, ve a la sección de «CSS adicional» y añade el siguiente código CSS de ejemplo:

/* Elemento de menú como botón */
.boton-menu { 
background-color:#6dacff;
border:1px;
border-radius:9px;
-webkit-box-shadow:1px 1px 0px 0px #919191;
-moz-box-shadow:1px 1px 0px 0px #919191;
box-shadow:1px 1px 0px 0px #919191;
}
.boton-menu a, .boton-menu a:hover, .boton-menu a:active { 
color:#fff !important;
}

Deberías ver de inmediato como tu elemento del menú cambia y adquiere el aspecto de botón

Nota: Puede que no se visualice al instante el botón en el personalizador, pasa con algunos temas. Si no lo ves tras añadir el CSS publica los cambios y revisa la web, ya deberías ver el botón.

¿Qué puedo cambiar del código CSS de ejemplo?

¡Todo, prácticamente!

Lo más importante es que la clase CSS sea la misma que usaste en la caja de «Clases CSS» del elemento del menú.

A partir de ahí puedes personalizar el aspecto a tu gusto:

  • background-color – El color de fondo del botón en hexadecimal, en el ejemplo de un azul claro.
  • border – Ancho del borde del botón en píxeles.
  • border-radius – Si quieres que el botón tenga esquinas redondeadas, puedes jugar con la cantidad de píxeles o incluso ponerlo a cero o quitar esta línea si lo quieres totalmente cuadrado.
  • box-shadow – Totalmente opcional, puedes definir mostrar una sombra y el color en hexadecimal.
  • IDs a, a:hover y a:active – Puedes personalizar el color del bonito subrayado al pasar el cursor, o ponerlo como prefieras.

Si no te atreves aún a añadir o modificar CSS te recomiendo echar un vistazo a esta guía:

CSS básico y sencillo que todo usuario de WordPress debería conocer

Y ya está. Ya sabes cómo añadir botones a tus menús, de manera sencilla, sin plugins, ni cambiar de tema ni nada parecido, solo con WordPress y un poco de CSS.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(7 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido