Cómo dinamizar tu proyecto con sho­r­t­co­des de WordPress

En 2008, el equipo de de­sa­rro­llo de WordPress introdujo los llamados sho­r­t­co­des, una función que permite añadir fá­ci­l­me­n­te 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 di­s­po­ni­bles mediante sho­r­t­co­des, estos siguen siendo una parte fu­n­da­me­n­tal en numerosos plugins y temas.

¿Qué son los sho­r­t­co­des?

Los sho­r­t­co­des o “códigos cortos o abre­via­dos”, que WordPress incorporó a partir de la versión 2.5, son comandos cortos que se pueden integrar di­re­c­ta­me­n­te en los textos y que están co­ne­c­ta­dos a un código PHP que se guarda bien en el archivo functions.php o en un archivo .php in­de­pe­n­die­n­te integrado en el functions.php. Cuando se abre una página que contiene uno de estos sho­r­t­co­des, WordPress ejecuta e in­te­r­pre­ta el código co­rre­s­po­n­die­n­te, 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 re­se­r­va­n­do el espacio para elementos sencillos como podrían ser un extracto de texto o co­n­te­ni­dos dinámicos como ventanas eme­r­ge­n­tes o una galería de imágenes.

Su im­ple­me­n­ta­ción no supone, en absoluto, un gran desafío, ya que se insertan en el texto en el editor del gestor de co­n­te­ni­dos. Para que WordPress reconozca estos códigos como sho­r­t­co­des se escriben entre corchetes [ ], re­su­l­ta­n­do 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 pu­bli­ca­das. Con ayuda de pa­rá­me­tros adi­cio­na­les es posible es­pe­ci­fi­car estos códigos más de­ta­lla­da­me­n­te.

Aunque los sho­r­t­co­des siguen fu­n­cio­na­n­do, WordPress ofrece ahora una al­te­r­na­ti­va más intuitiva a través del editor de bloques. Muchas de las funciones clásicas que antes requerían sho­r­t­co­des se han re­em­pla­za­do por bloques de Gutenberg, lo que permite a los usuarios añadir co­n­te­ni­dos dinámicos de forma aún más sencilla y sin necesidad de escribir código. Aun así, si prefieres seguir uti­li­za­n­do sho­r­t­co­des, WordPress incluye un bloque es­pe­cí­fi­co llamado Shortcode-Block, que permite in­se­r­tar­los di­re­c­ta­me­n­te en el editor de bloques.

Por qué deberías usar los sho­r­t­co­des de WordPress

Con la llegada del editor de bloques, el uso de los sho­r­t­co­des ha cambiado. Muchas de las funciones que antes requerían sho­r­t­co­des se han su­s­ti­tui­do por bloques, lo que permite a los usuarios añadir contenido fá­ci­l­me­n­te mediante la función de arrastrar y soltar, sin tener que escribir código. Sin embargo, los sho­r­t­co­des siguen siendo muy útiles, sobre todo cuando se trata de plugins es­pe­cia­li­za­dos o funciones pe­r­so­na­li­za­das que aún no cuentan con una al­te­r­na­ti­va en forma de bloque.

En in­s­ta­la­cio­nes de WordPress ya exi­s­te­n­tes, los sho­r­t­co­des siguen siendo una solución práctica para mantener la co­m­pa­ti­bi­li­dad con temas y plugins antiguos. Muchos de estos siguen re­cu­rrie­n­do a sho­r­t­co­des, es­pe­cia­l­me­n­te si todavía no se han adaptado co­m­ple­ta­me­n­te al sistema de bloques. Además, los sho­r­t­co­des son ideales para contenido dinámico y funciones avanzadas. Las personas que de­sa­rro­llan sus propias fu­n­cio­na­li­da­des también pueden be­ne­fi­ciar­se de ellos, ya que permiten integrar ca­ra­c­te­rí­s­ti­cas es­pe­cí­fi­cas sin tener que modificar di­re­c­ta­me­n­te el código del tema.

Por tanto, aunque WordPress evo­lu­cio­na cada vez más hacia un sistema basado en bloques, los sho­r­t­co­des siguen siendo un recurso muy valioso para usuarios avanzados y casos de uso concretos.

Aprende a crear tus propios sho­r­t­co­des 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 pre­via­me­n­te definido. Lo que sigue a co­n­ti­nua­ción no pretende enseñarte a programar este archivo, puesto que supondría alejarse del tema para in­tro­du­ci­r­te en un curso básico de pro­gra­ma­ción en PHP. Los si­guie­n­tes apartados aspiran más bien a ilustrar cómo integrar sho­r­t­co­des en WordPress, uti­li­zar­los para tu proyecto y des­ac­ti­var­los cuando ya no los necesites. Puedes añadir el código PHP co­rre­s­po­n­die­n­te en el archivo functions.php del tema que estés uti­li­za­n­do o en un archivo .php in­de­pe­n­die­n­te que incluyas ma­nua­l­me­n­te. Para ga­ra­n­ti­zar que este shortcode no des­apa­re­z­ca con la próxima ac­tua­li­za­ció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 de­no­mi­na­da función de de­vo­lu­ción de llamada o callback, que es la que devolverá el contenido. Esta es entregada como parámetro a otra función y so­li­ci­ta­da bajo unas co­n­di­cio­nes es­pe­cí­fi­cas con unos pa­rá­me­tros 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 im­ple­me­n­ta­do 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 eje­cu­tar­se au­to­má­ti­ca­me­n­te 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 re­co­me­n­da­ble escoger nombres claros y únicos para los sho­r­t­co­des para evitar co­n­fli­c­tos entre ellos.

Ampliar el campo de acción de un shortcode con pa­rá­me­tros

La inclusión de pa­rá­me­tros op­cio­na­les es una forma de aportar fle­xi­bi­li­dad a los sho­r­t­co­des de WordPress. Siguiendo el ejemplo anterior, se puede indicar en el código exac­ta­me­n­te 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 au­to­má­ti­ca los valores estándar re­que­ri­dos, y la función extract() por el otro, para extraer el atributo. En el caso de que el campo de argumento pe­r­ma­ne­z­ca 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 es­pe­ci­fi­cas 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 co­n­te­ni­dos como pa­rá­me­tros para los sho­r­t­co­des

Aún es posible modificar un poco más el ejemplo, añadiendo un elemento de contenido muy es­pe­cí­fi­co como parámetro. En el ejemplo este parámetro de contenido ha de definir al título como <h3>. Esto lo co­n­se­gui­mos ampliando el archivo callback con la variable $content y, antes de la enu­me­ra­ción <ul>, añadimos el en­ca­be­za­do 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, en­ma­r­ca­mos 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 sho­r­t­co­des en un widget

Antes era necesario activar ma­nua­l­me­n­te los sho­r­t­co­des para poder usarlos en los widgets. Sin embargo, desde WordPress 5.8, muchos co­n­te­ni­dos pueden añadirse di­re­c­ta­me­n­te a los widgets mediante el editor de bloques, lo que, como ya se ha me­n­cio­na­do, elimina en muchos casos la necesidad de recurrir a sho­r­t­co­des. Si aun así se desea utilizar uno, basta con in­se­r­tar­lo en un bloque de tipo Shortcode dentro del widget co­rre­s­po­n­die­n­te.

Des­ac­ti­var sho­r­t­co­des

Hay dos opciones a la hora de des­ac­ti­var códigos que ya no son ne­ce­sa­rios. 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, re­pro­du­cié­n­do­lo como texto plano dentro del artículo. Como este método conlleva un gran trabajo en el caso de aquellos códigos muy uti­li­za­dos, se puede recurrir a una al­te­r­na­ti­va: 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 sho­r­t­co­des de WordPress para tu blog

Una vez has adquirido una visión general sobre la es­tru­c­tu­ra de los sho­r­t­co­des y has aprendido cómo re­gi­s­trar­los e in­te­grar­los en WordPress, los si­guie­n­tes 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 de­te­r­mi­na­do 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 se­n­ci­lla­me­n­te 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 co­rre­s­po­n­die­n­te shortcode, que pertenece a los códigos estándar, está vinculado ne­ce­sa­ria­me­n­te a los tres pa­rá­me­tros: 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 sho­r­t­co­des de WordPress: el camino fácil

Para quienes no quieran crear sus propios sho­r­t­co­des ni insertar ma­nua­l­me­n­te ejemplos ya pre­pa­ra­dos en el archivo functions.php o en un archivo PHP es­pe­cí­fi­co, existe otra forma sencilla de activar estos prácticos comandos en un proyecto web: en la página oficial de WordPress en­co­n­tra­rás una amplia selección de plugins que permiten añadir uno o varios sho­r­t­co­des a tu in­s­ta­la­ción de WordPress.

Algunos ejemplos de­s­ta­ca­dos son:

• Sho­r­t­co­der: con un editor visual, puedes generar tu propio shortcode e incluir fra­g­me­n­tos de HTML o Ja­va­S­cri­pt de forma sencilla.
• Sho­r­t­co­des Ultimate: este plugin incluye más de 50 sho­r­t­co­des pre­de­fi­ni­dos muy útiles y es co­m­pa­ti­ble con el editor de bloques.