Como crear botones en CSS para WordPress
Para crear botones en WordPress podemos utilizar plugins o incluso la gran mayoría de themes ya los lleva por defecto en sus builders o shortcodes, pero en el post de hoy vamos a hacerlo de forma manual, es bastante sencillo, solo tenemos que seguir unas pautas, añadir un poco de código a nuestra hoja de estilos y jugar con los colores para que se adapten al diseño de nuestra web.
Mi primera recomendación es trabajar sobre un child theme, por qué ? porque si trabajamos directamente sobre la hoja de estilos de nuestro theme cuando tengamos que hacer una actualización del mismo perderemos todas nuestras personalizaciones.
Para crear un child theme podemos seguir estos dos post anteriores:
– Que es y como crear un Child Theme en WordPress.
– Como duplicar un Theme o crear un Child Theme para WordPress en un clic.
Una vez tenemos nuestro child theme operativo y hemos importado nuestra hoja de estilo style.css tal y como se refleja en uno de los post podemos trabajar directamente sobre ella para añadir las lineas de CSS que necesitamos para generar nuestros botones.
Yo me he surtido de código ya creado en un tutorial del framework Genesis (aunque es válido para cualquier theme, no necesariamente tiene que ser el framework Genesis) y le he añadido algunas lineas para personalizar los botones, como por ejemplo las esquinas redondeadas, el color y el tamaño del texto, lo bueno de esto es que es muy fácil modificar estos parámetros y hacer los cambios que queramos, color, tamaño, redondeo de esquinas, etc.
Al lio, abrimos nuestra hoja de estilos style.css, lo podemos hacer en local con nuestro editor favorito o bien lo podemos hacer directamente en WordPress, si lo hacemos en WordPress vamos directamente a la sección de Apariencia y pulsamos en Editor, por defecto se suele abrir nuestra hoja de estilos.
Podemos utilizar este código en nuestro style.css y guardamos cambios.
En este ejemplo he creado solo dos botones, uno azul con unas características y otro amarillo, siguiendo los patrones del código podemos añadir mas botones con otros colores y otros comportamientos, te invito a que hagas tus propias creaciones, juega con los colores, el tamaño y color de los bordes del botón, el tamaño de la fuente, las esquinas redondeadas etc.
Ya tenemos nuestras reglas CSS personalizadas en nuestro style.css, ahora vamos a ver que fácil es insertar nuestros botones en cualquier parte de nuestro WordPress, un post, una página o un widget.
Simplemente tenemos que añadir esta línea de código en la modalidad texto de nuestro editor de post o página para llamar a nuestro botón:
A tener en cuenta que la almohadilla la tenemos que sustituir por la url de destino a donde nos lleva después de pulsar el botón.
Si queremos que el botón aparezca en un widget solo tenemos que añadir el widget de texto a nuestro sidebar y pegar el código del botón dentro de la caja de texto del widget.
Como puedes ver no es nada complicado, no necesitamos ningún plugin que sobrecargue nuestro WordPress, cuando actualizamos nuestro theme no se pierden nuestros cambios y podemos personalizarlo como queramos.
