¿Cómo crear shortcodes en WordPress?

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.

requerimiento visual del shortcode
Requerimiento visual de la funcionalidad que necesita el cliente.

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:

shortcode-ejemplo
Resultado visual del shortcode «sc-textbox»

¡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:

shortcode con cambios
Resultado final del shortcode.

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.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (3 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


One thought on “¿Cómo crear shortcodes en WordPress?”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¿Puedo ayudarte?