{"id":6564,"date":"2014-02-20T10:02:55","date_gmt":"2014-02-20T09:02:55","guid":{"rendered":"http:\/\/www.host-fusion.com\/blog\/?p=6564"},"modified":"2014-02-20T10:02:55","modified_gmt":"2014-02-20T09:02:55","slug":"como-crear-botones-en-css-para-wordpress","status":"publish","type":"post","link":"https:\/\/www.host-fusion.com\/blog\/2014\/02\/20\/como-crear-botones-en-css-para-wordpress\/","title":{"rendered":"Como crear botones en CSS para WordPress"},"content":{"rendered":"

\"Softaculous\"<\/p>\n

Para crear botones en WordPress podemos utilizar plugins o incluso la gran mayor\u00eda 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\u00f1adir un poco de c\u00f3digo a nuestra hoja de estilos y jugar con los colores para que se adapten al dise\u00f1o de nuestra web.<\/p>\n

Mi primera recomendaci\u00f3n es trabajar sobre un child theme, por qu\u00e9 ? porque si trabajamos directamente sobre la hoja de estilos de nuestro theme cuando tengamos que hacer una actualizaci\u00f3n del mismo perderemos todas nuestras personalizaciones.<\/p>\n

Para crear un child theme podemos seguir estos dos post anteriores:<\/p>\n

– Que es y como crear un Child Theme en WordPress<\/strong><\/a>.
\n– Como duplicar un Theme o crear un Child Theme para WordPress en un clic<\/strong><\/a>.<\/p>\n

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\u00f1adir las lineas de CSS que necesitamos para generar nuestros botones.<\/p>\n

Yo me he surtido de c\u00f3digo ya creado en un tutorial del framework Genesis (aunque es v\u00e1lido para cualquier theme, no necesariamente tiene que ser el framework Genesis) y le he a\u00f1adido algunas lineas para personalizar los botones, como por ejemplo las esquinas redondeadas, el color y el tama\u00f1o del texto, lo bueno de esto es que es muy f\u00e1cil modificar estos par\u00e1metros y hacer los cambios que queramos, color, tama\u00f1o, redondeo de esquinas, etc.<\/p>\n

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\u00f3n de Apariencia y pulsamos en Editor, por defecto se suele abrir nuestra hoja de estilos.<\/p>\n

Podemos utilizar este c\u00f3digo en nuestro style.css y guardamos cambios.<\/p>\n

\"Botones<\/p>\n

En este ejemplo he creado solo dos botones, uno azul con unas caracter\u00edsticas y otro amarillo, siguiendo los patrones del c\u00f3digo podemos a\u00f1adir mas botones con otros colores y otros comportamientos, te invito a que hagas tus propias creaciones, juega con los colores, el tama\u00f1o y color de los bordes del bot\u00f3n, el tama\u00f1o de la fuente, las esquinas redondeadas etc.<\/p>\n

Ya tenemos nuestras reglas CSS personalizadas en nuestro style.css, ahora vamos a ver que f\u00e1cil es insertar nuestros botones en cualquier parte de nuestro WordPress, un post, una p\u00e1gina o un widget.<\/p>\n

Simplemente tenemos que a\u00f1adir esta l\u00ednea de c\u00f3digo en la modalidad texto de nuestro editor de post o p\u00e1gina para llamar a nuestro bot\u00f3n:<\/p>\n

\"bot\u00f3n<\/p>\n

A tener en cuenta que la almohadilla la tenemos que sustituir por la url de destino a donde nos lleva despu\u00e9s de pulsar el bot\u00f3n.<\/p>\n

Si queremos que el bot\u00f3n aparezca en un widget solo tenemos que a\u00f1adir el widget de texto a nuestro sidebar y pegar el c\u00f3digo del bot\u00f3n dentro de la caja de texto del widget.<\/p>\n

Como puedes ver no es nada complicado, no necesitamos ning\u00fan plugin que sobrecargue nuestro WordPress, cuando actualizamos nuestro theme no se pierden nuestros cambios y podemos personalizarlo como queramos.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Para crear botones en WordPress podemos utilizar plugins o incluso la gran mayor\u00eda 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\u00f1adir un poco de c\u00f3digo a nuestra hoja de […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[376],"tags":[922,921,920,1098],"class_list":["post-6564","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-child-theme","tag-codigo-css-wordpress","tag-como-crear-botones-en-wordpress","tag-wordpress"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n\t\t