Cómo dinamizar tu proyecto con shortcodes de WordPress

En 2008, el equipo de desarrollo de WordPress introdujo los llamados shortcodes, una función que permite añadir fácilmente elementos dinámicos a las entradas y páginas. Aunque desde la versión 5.0 WordPress utiliza el editor de bloques Gutenberg, que incorpora muchas funciones que antes solo estaban disponibles mediante shortcodes, estos siguen siendo una parte fundamental en numerosos plugins y temas.

¿Qué son los shortcodes?

Los shortcodes o “códigos cortos o abreviados”, que WordPress incorporó a partir de la versión 2.5, son comandos cortos que se pueden integrar directamente en los textos y que están conectados a un código PHP que se guarda bien en el archivo functions.php o en un archivo .php independiente integrado en el functions.php. Cuando se abre una página que contiene uno de estos shortcodes, WordPress ejecuta e interpreta el código correspondiente, de tal forma que el lector, en lugar del código, ve el contenido generado por la función de PHP. El shortcode, de alguna manera, estaría reservando el espacio para elementos sencillos como podrían ser un extracto de texto o contenidos dinámicos como ventanas emergentes o una galería de imágenes.

Su implementación no supone, en absoluto, un gran desafío, ya que se insertan en el texto en el editor del gestor de contenidos. Para que WordPress reconozca estos códigos como shortcodes se escriben entre corchetes [ ], resultando algo así: [posts-actuales]. Enlazado a la función PHP correcta, este código debería mostrar, en el lugar del texto donde se ha insertado, las últimas entradas publicadas. Con ayuda de parámetros adicionales es posible especificar estos códigos más detalladamente.

Aunque los shortcodes siguen funcionando, WordPress ofrece ahora una alternativa más intuitiva a través del editor de bloques. Muchas de las funciones clásicas que antes requerían shortcodes se han reemplazado por bloques de Gutenberg, lo que permite a los usuarios añadir contenidos dinámicos de forma aún más sencilla y sin necesidad de escribir código. Aun así, si prefieres seguir utilizando shortcodes, WordPress incluye un bloque específico llamado Shortcode-Block, que permite insertarlos directamente en el editor de bloques.

Por qué deberías usar los shortcodes de WordPress

Con la llegada del editor de bloques, el uso de los shortcodes ha cambiado. Muchas de las funciones que antes requerían shortcodes se han sustituido por bloques, lo que permite a los usuarios añadir contenido fácilmente mediante la función de arrastrar y soltar, sin tener que escribir código. Sin embargo, los shortcodes siguen siendo muy útiles, sobre todo cuando se trata de plugins especializados o funciones personalizadas que aún no cuentan con una alternativa en forma de bloque.

En instalaciones de WordPress ya existentes, los shortcodes siguen siendo una solución práctica para mantener la compatibilidad con temas y plugins antiguos. Muchos de estos siguen recurriendo a shortcodes, especialmente si todavía no se han adaptado completamente al sistema de bloques. Además, los shortcodes son ideales para contenido dinámico y funciones avanzadas. Las personas que desarrollan sus propias funcionalidades también pueden beneficiarse de ellos, ya que permiten integrar características específicas sin tener que modificar directamente el código del tema.

Por tanto, aunque WordPress evoluciona cada vez más hacia un sistema basado en bloques, los shortcodes siguen siendo un recurso muy valioso para usuarios avanzados y casos de uso concretos.

Aprende a crear tus propios shortcodes en WordPress

Ya se ha aclarado que el corazón o núcleo de un shortcode es el archivo de PHP que se ejecuta tan pronto como Wordpress encuentra un shortcode previamente definido. Lo que sigue a continuación no pretende enseñarte a programar este archivo, puesto que supondría alejarse del tema para introducirte en un curso básico de programación en PHP. Los siguientes apartados aspiran más bien a ilustrar cómo integrar shortcodes en WordPress, utilizarlos para tu proyecto y desactivarlos cuando ya no los necesites. Puedes añadir el código PHP correspondiente en el archivo functions.php del tema que estés utilizando o en un archivo .php independiente que incluyas manualmente. Para garantizar que este shortcode no desaparezca con la próxima actualización del tema, hay que depositar un tema hijo (child theme), un trámite sencillo que puedes llevar a cabo siguiendo el tutorial sobre cómo crear un tema hijo en WordPress.

Crear una función callback

La función de PHP que se ejecuta tan pronto como WordPress registra un shortcode es la denominada función de devolución de llamada o callback, que es la que devolverá el contenido. Esta es entregada como parámetro a otra función y solicitada bajo unas condiciones específicas con unos parámetros definidos. La función que se ilustra en el siguiente ejemplo explora la base de datos y genera un enlace a la última entrada para el shortcode [posts-actuales]:

function posts_actuales_function() { 
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1)); 
if (have_posts()) : 
while (have_posts()) : the_post(); 
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>'; 
endwhile; 
endif; 
wp_reset_query(); 
return $return_string; 
}

El texto que ha de sustituir al shortcode se encuentra en la variable $return_string (PHP marca todas las variables con $). La función PHP (posts_actuales_function) devuelve a esta variable con return. Si por error, utilizas en su lugar el comando echo, el elemento implementado por el shortcode se coloca delante del contenido en sí.

Registrar el shortcode en WordPress

Es necesario indicar a WordPress que la función creada consiste en una función de shortcode que debe ejecutarse automáticamente cuando una página visitada contenga el comando corto [posts-actuales]. Para ello añade a tu archivo de PHP el siguiente código:

add_shortcode('posts-actuales', 'posts_actuales_function');

Con él se define, por un lado, el nombre del shortcode [posts-actuales], que más tarde se usará también en el editor y, por otro, la función posts_actuales_function() que se va a aplicar. Es recomendable escoger nombres claros y únicos para los shortcodes para evitar conflictos entre ellos.

Ampliar el campo de acción de un shortcode con parámetros

La inclusión de parámetros opcionales es una forma de aportar flexibilidad a los shortcodes de WordPress. Siguiendo el ejemplo anterior, se puede indicar en el código exactamente cuántas entradas deberían mostrarse. Para ello necesitas dos funciones más: la función shortcode_atts(), por un lado, que combina atributos generados por usuarios con otros nativos e introduce de forma automática los valores estándar requeridos, y la función extract() por el otro, para extraer el atributo. En el caso de que el campo de argumento permanezca vacío, has de formular el valor estándar 1 ('posts' => 1):

function posts_actuales_function($atts){ 
extract(shortcode_atts(array( 
'posts' => 1, 
), $atts)); 
 
$return_string = '<ul>'; 
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts)); 
if (have_posts()) : 
while (have_posts()) : the_post(); 
$return_string .='<li><ahref="'.get_permalink().'">'.get_the_title().'</a></li>'; 
endwhile; 
endif; 
$return_string .= '</ul>'; 
 
wp_reset_query(); 
return $return_string; 
}

Si ahora especificas el shortcode, por ejemplo, así: [posts-actuales posts="5"], aparecerá, no solo el último texto publicado, sino una lista con las cinco últimas entradas.

Utilizar ciertos contenidos como parámetros para los shortcodes

Aún es posible modificar un poco más el ejemplo, añadiendo un elemento de contenido muy específico como parámetro. En el ejemplo este parámetro de contenido ha de definir al título como <h3>. Esto lo conseguimos ampliando el archivo callback con la variable $content y, antes de la enumeración <ul>, añadimos el encabezado de HTML <h3>:

function posts_actuales_function($atts, $content = null) { 
extract(shortcode_atts(array( 
'posts' => 1, 
), $atts)); 
 
$return_string = '<h3>'.$content.'</h3>'; 
$return_string .= '<ul>'; 
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts)); 
if (have_posts()) : 
while (have_posts()) : the_post(); 
 
$return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>'; 
endwhile; 
endif; 
$return_string .= '</ul>'; 
 
wp_reset_query(); 
return $return_string; 
}

De forma similar a una etiqueta de HTML, enmarcamos el título en el texto con un shortcode de apertura y otro de cierre:

[posts-actuales posts ="5"]Título del listado de artículos recientes[/posts-actuales]

Usar shortcodes en un widget

Antes era necesario activar manualmente los shortcodes para poder usarlos en los widgets. Sin embargo, desde WordPress 5.8, muchos contenidos pueden añadirse directamente a los widgets mediante el editor de bloques, lo que, como ya se ha mencionado, elimina en muchos casos la necesidad de recurrir a shortcodes. Si aun así se desea utilizar uno, basta con insertarlo en un bloque de tipo Shortcode dentro del widget correspondiente.

Desactivar shortcodes

Hay dos opciones a la hora de desactivar códigos que ya no son necesarios. La mejor solución sería eliminar la función callback del archivo PHP y todas las entradas del código de los textos porque, si solo eliminas la función, WordPress no reconoce el shortcode como tal cuando lo encuentra, reproduciéndolo como texto plano dentro del artículo. Como este método conlleva un gran trabajo en el caso de aquellos códigos muy utilizados, se puede recurrir a una alternativa: ampliando la función callback con una orden que no devuelve nada, de forma que la función quedaría anulada, por así decirlo. Este sería el resultado:

add_shortcode('posts-actuales', '__return_false');

Prácticos shortcodes de WordPress para tu blog

Una vez has adquirido una visión general sobre la estructura de los shortcodes y has aprendido cómo registrarlos e integrarlos en WordPress, los siguientes ejemplos han de servirte para que conozcas la gran variedad de opciones que permite esta técnica.

Añadir un botón enlace (link button)

Para incluir un botón con un mensaje personal en tu proyecto basta un shortcode con la siguiente función callback:

function link_button_function( $atts, $content = null ) { 
return '<button type="button">'.do_shortcode($content).'</button>'; 
} 
add_shortcode('link-button', 'link_button_function');

El mensaje que figurará en este botón lo debes escribir entre un shortcode de apertura y otro de cierre:

[link-button]¡Haz clic aquí![/link-button]

Mostrar el menú de WordPress

Este código permite mostrar un determinado menú de tu proyecto bajo un artículo:

function menu_function($atts, $content = null) { 
extract( 
shortcode_atts( 
array( 'name' => null, ), 
$atts 
) 
); 
return wp_nav_menu( 
array( 
'menu' => $name, 
'echo' => false 
) 
); 
} 
add_shortcode('menu', 'menu_function');

Para usar este shortcode se escribe sencillamente el nombre del menú como parámetro:

[menu name="Menú principal"]

Insertar Google Maps

Con esta técnica, integrar el mapa de Google en un proyecto de WordPress se convierte también en una tarea muy sencilla, sin tener que ajustar el código fuente. Este es el aspecto que tiene el código para el archivo PHP:

function googlemap_function($atts, $content = null) { 
extract(shortcode_atts(array( 
"width" => '640', 
"height" => '480', 
"src" => '' 
), $atts)); 
return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=TU_CLAVE_API"></iframe>'; 
} 
add_shortcode("googlemap", "googlemap_function");

El correspondiente shortcode, que pertenece a los códigos estándar, está vinculado necesariamente a los tres parámetros: altura (height), ancho (width) y fuente en Google Maps (src). Por este motivo, el código debería mostrarse así en el editor de textos:

[googlemap width="640" height="480" src= https://goo.gl/maps/T4qEupgycZ32]

Plugins para shortcodes de WordPress: el camino fácil

Para quienes no quieran crear sus propios shortcodes ni insertar manualmente ejemplos ya preparados en el archivo functions.php o en un archivo PHP específico, existe otra forma sencilla de activar estos prácticos comandos en un proyecto web: en la página oficial de WordPress encontrarás una amplia selección de plugins que permiten añadir uno o varios shortcodes a tu instalación de WordPress.

Algunos ejemplos destacados son:

• Shortcoder: con un editor visual, puedes generar tu propio shortcode e incluir fragmentos de HTML o JavaScript de forma sencilla.
• Shortcodes Ultimate: este plugin incluye más de 50 shortcodes predefinidos muy útiles y es compatible con el editor de bloques.