Como todos sabrán los shortcodes son esos pequeños atajos que podemos crear para que Wordpress los reconozca con una sintaxis simple.

El día de hoy tenia ganas de crear una serie de botones solo con CSS y CSS3 e implementarlos con shortcodes. Supongamos que queremos resaltar un link de descarga, usualmente tendríamos que crearlos dentro de la vista HMTL para poder utilizar etiquetas como div, span o class. Por suerte con unos pequeños hacks podemos crear un shortcode y así reducir nuestra sintaxis.

Lo que vamos a crear un shortcode dentro del cual podemos asignarle al botón diferentes colores, tamaños y una URL de salida

Editando nuestro archivo functions.php

Este la piedra angular de nuestra receta. Aqui vamos a definir el comportamiento, los valores y la sintaxis de nuestro shortcode.

function miboton( $atts, $content = null ) { //definimos nuestro shortcode
    extract(shortcode_atts(array(
    	'url' => '#',//el campo para nuestra URL
        'color' => 'naranja', //el color por defecto
        'size' => 'normal', // el tamaño por defecto
    ), $atts));
   return '<a href=" '.$url.'" class="button '. $color . ' '. $size . '">' . $content . '</a>';// el output
}
add_shortcode('boton', 'miboton'); //sintaxis

Como veras la dirección default para nuestra URL sera #, esto en caso de olvidarnos de asignar una URL para que “rompa el código”. Por ultimo, y por defecto se mostrara un botón de color naranja y un tamaño normal

Aplicamos un poco de formato

Si lo recordaras hace unos días atrás te mostré como crear unos botones con CSS y CSS3. El articulo al que hago referencia es Crea simples botones con CSS3 Te suguiero que lo releas para tenerlo más fresco.

Esta técnica es tomada de Zurb y solo necesitamos una solo imagen: overlay-button
Manos a la obra

.button {
background:#222 url(images/overlay-button.png) repeat-x 0 0;
border-bottom: 1px solid rgba(0,0,0,0.25);/* Borde negro con transparencia en 25%*/
color: #fff !important;
cursor: pointer;
display: inline-block;/* Alinear corectamente el boton*/
font-size: 13px;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;/* Borde para Firefox */
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Firefox*/
overflow: visible;/* contedido sobrante visible*/
padding: 5px 15px 6px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);/* Sombra negra en 25% para el texto */
webkit-border-radius: 5px;/* Borde para Webkit*/
webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Webkit*/
width: auto;/* Importante para que el boton se ajuste a nuestro texto */
}
 
.button:hover {
background-color:#111;
color:#fff;
}
 
.button:active {
top:1px;
}
 
.small.button {
font-size:11px;
}
 
.large.button {
font-size:14px;
padding:8px 19px 9px;
}
 
.naranja.button {
background-color:#ff5c00;
}
 
.naranja.button:hover {
background-color:#d45500;
}
 
.azul.button {
background-color:#2daebf;
}
 
.azul.button:hover {
background-color:#007d9a;
}
 
.rojo.button {
background-color:#e33100;
}
 
.rojo.button:hover {
background-color:#872300;
}
 
.verde.button {
background-color:#91bd09;
}
 
.verde.button:hover {
background-color:#749a02;
}

Para este caso estamos creando cuatro colores para nuestro botón: Azul, Verde, Narnaja y Rojo; y tres tamaños: normal, small y large

Implementación y Demos

Ya la parte ardua ha pasado y solo queda implementar nuestro botón. Podemos usar los siguientes formatos:

Este es un boton rojo large

[boton url="http://eliseos.net" color="rojo" size="large"]Este es un boton rojo large[/boton]

Este es un boton azul small

[boton url="http://eliseos.net" color="azul" size="small"]Este es un boton azul small[/boton]

Este es un boton por defecto

[boton]Este es un boton por defecto[/boton]

Tambien podemos apilarlos

Demo Download Otro Download

<p>
[boton color="rojo" size="medium"]Demo[/boton] [boton url="http://eliseos.net" color="verde" size="medium"]Download[/boton] [boton url="http://eliseos.net" size="medium"] Otro Download[/boton]
</p>

Palabras finales

En menos de 5 minutos hemos creado unos hermosos botones con una sintaxis muy sencilla y fácil de recordar. Espero que les sea de utilidad