Si no es un gran fanático de trabajar con el editor de HTML en WordPress o desea proporcionar algunas mejoras geniales para sus temas premium, los códigos abreviados son una excelente solución para expandir las capacidades de su editor de publicaciones y mantener las cosas simples.
Estaba pensando que sería genial agregar algún tipo de botón a mi sitio al proporcionar enlaces a archivos gratuitos u otros sitios (usando códigos abreviados, por supuesto), así que después de agregar el código abreviado a mi tema, pensé que compartiría el código aquí en el blog para que otras personas interesadas en agregar códigos abreviados de botones a su sitio puedan simplemente copiar y pegar mi código en su tema y no tener que dedicar demasiado tiempo a crear el código abreviado y diseñar el botón.
¿Qué son los códigos cortos?
Los códigos cortos se introdujeron en WordPress 2.5 y le permiten crear códigos macro para usar en el contenido de las publicaciones. Un shortcode simple se vería así:
[shortcode]
Que, cuando se agrega al editor de publicaciones, devolverá el valor del código abreviado tal como se define en los archivos de su tema. Le mostraré cómo crear un código abreviado que le permitirá agregar fácilmente botones a su editor de publicaciones sin tocar ningún código.
Agregar un código abreviado de «botón» personalizado
Lo primero que debe hacer es agregar el código php para su shortcode a su tema. El siguiente código se puede usar para agregar un botón simple a su sitio. Este código se puede colocar en el archivo functions.php. Si está utilizando un tema de terceros, es mejor hacerlo a través de un tema secundario de WordPress.
function myprefix_button_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts( array(
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $atts ) );
// Use text value for items without content
$content = $text ? $text : $content;
// Return button with link
if ( $url ) {
$link_attr = array(
'href' => esc_url( $url ),
'title' => esc_attr( $title ),
'target' => ( 'blank' == $target ) ? '_blank' : '',
'class' => 'myprefix-button color-' . esc_attr( $color ),
);
$link_attrs_str = '';
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
}
// No link defined so return button as a span
else {
return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';
}
}
add_shortcode( 'button', 'myprefix_button_shortcode' );
Usando el código abreviado en su editor de publicaciones
Ahora que tiene un código abreviado, puede agregar el nuevo «botón» (que ahora parece un enlace simple, ya que no lo hemos diseñado) a su editor de publicaciones.
// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]
// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]
Estilo del botón
¿Cuál es el punto de crear un código abreviado si solo se verá como un enlace simple? Nada. Es por eso que te mostraré cómo agregar un poco de CSS3 genial para darle estilo al botón de descarga y hacer que se vea sexy.
Como notó en el código abreviado, agregué la clase «myprefix-button» para que pueda diseñarlo fácilmente a través de su archivo style.css. Inserte el siguiente código en su hoja de estilo para hacer un bonito botón azul como el de la imagen.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
Soporte de múltiples colores
Si notó que el código abreviado tiene un parámetro de color que puede usar para agregar estilos CSS para diferentes colores de botones. Por ejemplo, si puede agregar una opción de color azul agregando este CSS adicional:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }
Ahora simplemente usa el parámetro de color en el shortcode:
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]