Cómo dinamizar tu proyecto con shortcodes de WordPress
Equipo editorial de IONOS
WordPress se cuenta entre los sistemas de gestión de contenido más utilizados a nivel global. Gracias a un gran número de plugins, el antaño software de blogueros se ha convertido en una competente herramienta con una paleta de funciones tan amplia que permite la realización de los proyectos más diversos. Sin embargo, hay algo en lo que se ha mantenido fiel, y es que sigue siendo un sistema que los blogueros y redactores pueden usar aun sin conocimientos en HTML o CSS, por lo que se erige en una solución rápida y sencilla para difundir contenidos en la red. Quien quiera dar sus primeros pasos como autor en la web puede confiar en WordPress. En 2008, los desarrolladores del software dan un paso más allá con la introducción de los llamados shortcodes, una función con la cual es muy fácil añadir elementos dinámicos a los contenidos. Sigue leyendo a continuación.
¿Qué son los shortcodes?
Estos shortcuts (acceso directo) o “códigos abreviados”, introducidos en el CMS con la versión 2.5, son comandos cortos que se pueden integrar 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 del 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. Por ejemplo, para limitar el número de entradas recientes que se han de mostrar, es posible ampliar el código de esta manera: [posts-actuales posts="5"].
Por qué deberías usar los shortcodes de WordPress
Son dos los aspectos que hacen a los shortcodes de WordPress especialmente prácticos. Por un lado, con ellos los usuarios que no disponen de ningún tipo de conocimiento sobre JavaScript o CSS, también pueden aportar dinámica a su proyecto web. No hay que dominar PHP, el lenguaje de base de los códigos, puesto que, por defecto, el mismo CMS ya incluye varios shortcodes con sus scripts correspondientes listos para usarse. En la página oficial de WordPress se encuentra una lista detallada de todos ellos en inglés, además de instrucciones para activarlos y usarlos.
Muchos usuarios, además, ponen a disposición de otros usuarios los shortcodes que ellos mismos han creado en plataformas como SNIPPLR o WPdevSnippets de forma gratuita. Sin contar que muchos plugins y plantillas también disponen de sus propios shortcodes. En definitiva, tú mismo puedes programar la modificación de un script ya existente o, de ser necesario, uno totalmente nuevo.
La segunda gran ventaja de los shortcodes de WordPress va ligada al uso del tiempo. Si, por ejemplo, usas un determinado pasaje de texto, un logo u otro elemento de forma recurrente en tus entradas, la colocación de un shortcode puede significar un ahorro considerable de tiempo. Y si se quiere modificar algo de este elemento con posterioridad, no hace falta hacerlo por separado para cada artículo. Los cambios se aplican a todas las páginas del proyecto que contienen este comando ajustando el código de PHP.
Aprende a crear tus propios shortcodes en WordPress
Ya se ha aclarado que el corazón de un shortcode consiste en el archivo de PHP que es ejecutado tan pronto como el gestor de contenidos se encuentra con este código simplificado. 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 párrafos aspiran más bien a ilustrar cómo integrar shortcodes en WordPress, utilizarlos para tu proyecto y desactivarlos cuando ya no los necesites. Los códigos en PHP han de ser añadidos en el functions.php en el directorio del tema que se usa o en un archivo .php separado enlazado a aquél. Para garantizar que este shortcode no desaparecerá con la próxima actualización del tema, hay que depositar un tema Child, un trámite sencillo que puedes llevar a cabo siguiendo el tutorial en el foro de soporte de 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, 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 ilustramos 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
Tenemos que indicar a WordPress que la función que se ha creado consiste en una función para un shortcode, que ha de ser ejecutada automáticamente cuando Wordpress detecte el código [posts-actuales] en alguna página. 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 cuántas entradas exactamente 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 nuestro ejemplo un poco más, añadiendo un elemento de contenido muy específico como parámetro. En nuestro 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
Hasta ahora se ha tratado de la aplicación de shortcodes en el editor de textos de WordPress, pero a menudo también resulta interesante su implementación en widgets como las barras laterales. Por defecto, WordPress no reconoce los shortcodes aquí, pero añadiendo una línea de código en el archivo PHP logramos superar este obstáculo:
add_filter('widget_text', 'do_shortcode');Con este código indicamos a WordPress que también ha de examinar los elementos de texto en los widgets en busca de shortcodes.
Desactivar shortcodes
Hay dos opciones a la hora de desactivar códigos que ya no son necesarios. La solución óptima 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 opción 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), anchura (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
Si no se quieren crear shortcodes propios, pero tampoco utilizar aquellos ya elaborados, listos para ser añadidos manualmente en el archivo functions.php o en otro archivo PHP, existe una tercera vía con la que activar estos atajos de código en un proyecto web. En la página oficial de WordPress dispones de una gran selección de extensiones que enriquece tu instalación de WordPress con diversidad de shortcodes, como la extensión Last Updated Shortcode, que recurre al código homónimo [lastupdated] para mostrar la fecha de la última actualización de un artículo o una página. Con una colección de más de 50 shortcodes y un editor de CSS propio, el plugin Shortcodes Ultimate es algo más completo y permite ampliar un proyecto de WordPress con shortcodes para Tabs (pestañas), Buttons (botones), Boxes (cajas de contenido) o Sliders (galerías). Si usas plugins para shortcodes deberías considerar, sin embargo, que estas extensiones hacen uso de los recursos del ordenador, por lo que si abusas de ellos podrías frenar tu proyecto. Tampoco es posible saber si un plugin se continúa desarrollando en la actualidad, si se actualiza con regularidad o si representa una vulnerabilidad en seguridad. Por último, no solo existen plugins para implementar shortcodes, sino también para crear tus propias funciones callback y gestionar tus shortcodes. Para este objetivo estas tres extensiones son especialmente recomendables:
- Shortcoder: puedes crear tu propio shortcode en un editor y añadirle fácilmente snippets de HTML y JavaScript.
- Shortcodes in Use: con esta herramienta de administración puedes obtener una visión general de los artículos o las páginas donde estás usando shortcodes y cuál es su origen (plugins, estándar o definidos por el usuario).
- Shortcode Reference: Con este plugin obtienes una panorámica detallada de todos los shortcodes disponibles durante la redacción del contenido.