Miles de veces hemos oído hablar sobre los shortcodes pero rara vez los utilizamos o en ocasiones algún plugin nos pone estos códigos raros en el medio de nuestro texto, pero ¿para qué sirven? ¿cuándo utilizarlos y cómo? Veremos a continuación un ejemplo práctico y real para ver cómo utilizar esta gran funcionalidad de WordPress.
¿Para qué sirven los shortcodes?
En pocas palabras, los shortcodes sirven para facilitar la vida al usuario que crea contenido en WordPress. Desde un punto de vista más técnico un shortcode es una palabra clave que puede aceptar parámetros para introducir, modificar o quitar algún tipo de funcionalidad o estética de un post o página de WordPress. De esta manera con un una palabra clave el usuario puede incluir funcionalidad a su contenido sin tener que estar modificando HTML o Javascript de las plantillas.
¿Cómo identifico un shortcode?
Un shortcode puede escribirse de 4 maneras diferentes, aunque todo ellos son fácilmente identificables por estar encerrados entre corchetes en el contenido de nuestro post o página como por ejemplo [shortcode]. Pueden ser simples, con parámetros, contenedores de textos, o bien una mezcla de estas dos anteriores: con parámetros y contenedor de contenido. Veamos a continuación un ejemplo de cada uno de ellos para poder identificarlos:
Shortcode simple
[galeria]Este código muestra un shortcode simple en el que la palabra «galeria» tiene alguna funcionalidad asociada. Por ejemplo, un post con este shortcode puede convertirse en un post con una galería de fotos.
Shortcode con parámetros
[galeria ids="120,121,123"]Vemos en este ejemplo como el shortcode anterior puede recibir parámetros. En este caso la galería podría estar indicando que solo mostrará las imágenes destacadas de los posts 120, 121 y 123.
Shortcode contenedor de texto
[galeria]Exposición de Fernando Botero[/galeria]Podemos ver cómo este shortcode encierra un texto utilizando una nomenclatura de apertura y cierre: [galeria][/galeria]. Este tipo de shortcodes puede utilizarse para aplicar cualquier funcionalidad que se necesite sobre el texto. Por ejemplo: convertir el texto en un <h1> y con una clase en particular que aplique estilos CSS.
Shortcode contenedor de texto y con parámetros
[galeria ids="120,121,123"]Exposición de Fernando Botero[/galeria]En este ejemplo podemos ver los parámetros y el texto que contiene este shortcode. Adivinando un poco podríamos decir que este shortcode genera una galería de imágenes al que se le agrega un título.
¿Cómo crear un shortcode?
Para explicar cómo crear un shortcode vamos a partir de un ejemplo de un proyecto en el que estuve trabajando hace unas semanas:
El cliente me solicitó que se pudiera agregar un bloque de texto en el medio del contenido y que se pudiera configurar tanto el color de fondo como así también el color de texto.
Para maquetar esta mockup nos basta con una etiqueta <p> y una clase que dé padding, tamaño de fuente, interlineado y color de texto y background. Pero tanto el color del texto como el de fondo son dinámicos, con lo cual no podemos incluirlos en la clase de CSS. Configuramos entonces los atributos restantes en una clase a la que llamaremos sc-textbox (ShortCode Textbox):
.sc-textbox {
font-size: 20px;
line-height: 28px;
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
}Ahora solo nos resta crear el shortcode:
Registrando el shortcode
Para crear un shortcode solo debemos llamar a la función add_shortcode de WordPress en el que pasamos por parámetros el nombre del shortcode y la función asociada.
/**
* Función que implementa el shortcode [sc-textbox]
*/
function sctextbox_callback( $atts, $content = null ) {
// Genero los valores por defecto de los parámetros
$params = shortcode_atts( array(
'text-color' => '#000000',
'background-color' => '#ffffff',
), $atts );
// Genero el string con estilos en línea
$style = "style= 'color:{$params['text-color']}; background-color:{$params['background-color']}'";
// Aplico el texto y el stilo a la etiqeta <p>
return "<p class='sc-textbox' {$style}>{$content}</p>";
}
add_shortcode( 'sc-textbox', 'sctextbox_callback' );Primeras pruebas con el shortcode
Una vez general el shortcode ya podremos utilizarlo en nuestros posts y páginas con la palabra clave especificada en la función add_shortcode, ej.:
[sc-textbox]Soy un texto dentro del shortcode "sc-textbox" sin parámetros[/sc-textbox]
[sc-textbox text-color="#FFFF00" background-color="#000000"]Soy un texto dentro del shortcode "sc-textbox" con parámetro de color y de background.[/sc-textbox]obteniendo como resultado:
¡Enhorabuena! Ya tienes tu primer shortcode funcionando. Solo tienes que documentar cómo funciona y enviárselo al usuario para que pueda utilizarlo en sus posts o páginas.
Un momento, el cliente pide cambios
A último momento el cliente pide que también pueda modificarse el tamaño del texto, ¿cómo afecta esto a nuestro código?
El impacto de estos cambios son mínimos ya que solo debemos quitar el font-size de la clase .sc-textbox en el CSS, agregar el nuevo parámetro a nuestra lista de «valores por defecto» y modificar la función del shortcode para implementar la nueva funcionalidad.
Cambios en el fichero style.css:
.sc-textbox {
/* font-size: 20px; Comento la línea con el único objetivo de hacer visible el cambio aplicado */
line-height: 28px;
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
}Cambios en el fichero functions.php:
/**
* Función que implementa el shortcode [sc-textbox]
*/
function sctextbox_callback( $atts, $content = null ) {
// Genero los valores por defecto de los parámetros
$params = shortcode_atts( array(
'text-color' => '#000000',
'background-color' => '#ffffff',
'font-size' => '20',
), $atts );
// Genero el string con estilos en línea
$style = "style= 'color:{$params['text-color']}; background-color:{$params['background-color']}; font-size:{$params['font-size']}px;'";
// Aplico el texto y el stilo a la etiqeta <p>
return "<p class='sc-textbox' {$style}>{$content}</p>";
}
add_shortcode( 'sc-textbox', 'sctextbox_callback' );
Cambios en el contenido de nuestro post de ejemplo:
[sc-textbox]Soy un texto dentro del shortcode "sc-textbox" sin parámetros[/sc-textbox]
[sc-textbox text-color="#FFFF00" background-color="#000000" font-size="35"]Soy un texto dentro del shortcode "sc-textbox" con parámetro de color, background y tamaño de texto.[/sc-textbox]Obteniendo como resultado final:
Conclusión
Como hemos dicho al principio del artículo generar shortcodes para los usuarios de WordPress nos garantizará que no tengan que estar aprendiendo código HTML o CSS para implementar sus propios estilos o funcionalidad. Basta con enseñarle una simple palabra clave y algunos parámetros para modificar su comportamiento.
1 pingback