![\"Softaculous\"](\"http:\/\/www.host-fusion.com\/blog\/wp-content\/uploads\/2013\/06\/Captura-de-pantalla-2013-06-22-a-las-10.09.19.png\")
<\/p>\n<\/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>. 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 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 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":[],"_links":{"self":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts\/6564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/comments?post=6564"}],"version-history":[{"count":0,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts\/6564\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/media?parent=6564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/categories?post=6564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/tags?post=6564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n– Como duplicar un Theme o crear un Child Theme para WordPress en un clic<\/strong><\/a>.<\/p>\n![\"Botones](\"http:\/\/www.host-fusion.com\/blog\/wp-content\/uploads\/2014\/02\/Captura-de-pantalla-2014-02-20-a-las-09.43.28.png\")
<\/p>\n![\"bot\u00f3n](\"http:\/\/www.host-fusion.com\/blog\/wp-content\/uploads\/2014\/02\/Captura-de-pantalla-2014-02-20-a-las-09.50.07.png\")
<\/p>\n