Los shortcodes en WordPress son una herramienta muy potente usada por muchos plugins y themes para facilitar a los usuarios poder configurar/mostrar ciertos elementos (por ejemplo, la reproducción de un archivo de audio) en una entrada/página sin tener que tocar código, simplemente añadiendo el código (shortcode) correspondiente en el contenido del post, por ejemplo:
[mi-shortcode]
Dentro de los corchetes se encuentra el código mi-shortcode que va a ser substituido dinámicamente por la ejecución de la funcionalidad asociada a este shortcode antes de mostrar la página al usuario.
Veamos un ejemplo con el shortcode [gallery] que viene por defecto con WordPress.
Primero subimos una cuantas imágenes a la galería multimedia del post con Añadir objeto. Una vez las tenemos subidas podemos añadir el shortcode al contenido del post:
El resultado lo podemos ver en la imagen anterior. Lo que hace este shortcode es mostrar una galería con las imágenes del post en forma de miniaturas dispuestas en columnas. Podemos clicar la miniatura y nos muestra la imagen con navegación hacia la anterior / siguiente imagen.
Parámetros del shortcode
Los shortcodes pueden llevar asociados un conjunto de parámetros que nos permiten ajustar su funcionalidad, por ejemplo el shortcode [gallery] tiene el parámetro columns, veamos cómo utilizarlo:
[gallery columns="5"]
Para muestra, un botón: Crea tu primer shortcode
A continuación vamos a crear un shortcode para ver estos conceptos en acción. Concretamente vamos a crear un shortcode que encapsula un texto dentro de la etiqueta HTML a.
Para usarlo en el contenido del post, usamos [boton]texto[/boton].
Para crear el shortcode vamos a utilizar la función add_shortcode.
Para definir el shortcode nosotros vamos a crear un pequeño plugin, el código también lo podéis utilizar por ejemplo en el functions.php de vuestro theme.
add_shortcode( 'boton', 'boton_shortcode' ); crea el shortcode [boton] y lo asocia a la función boton_shortcode. Esta función añade el tag HTML y lo devuelve el texto modificado.
Esta versión del shortcode no tiene parámetros adicionales por lo que el parámetro $atts no se usa. En cambio, el segundo parámetro de la función es $content que devuelve el texto entre el inicio y el fin del shortcode (si lo hay) y que la función utiliza para saber qué texto debe rodear con el tag a.
Añadir parámetros a nuestro shortcode
De momento nuestro shortcode no hace mucha cosa, vamos a potenciarlo un poco añadiendo un parámetro url y un parámetro color que permitan, como su nombre indica, definir la url destino del tag y su color:
$boton_atts es un array que coge estos dos párametros (fijaros que podemos darles también un valor por defecto, como hacemos con el color) que luego se utilizan para crear la cadena de texto que la función devuelve. Para usar los parámetros dentro del código del shortcode utilizamos $boton_atts['color'] y $boton_atts['url']
Una vez hemos creados los parámetros, podemos utilizar el shortcode de la siguiente forma:
[boton color="#2ea2cc" url="https://neliosoftware.com/es/"]texto[/boton]
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
Conclusión
El ejemplo es muy básico pero muestra lo esencial para crear shortcodes. Si estáis interesados en aprender más cosas sobre los shortcodes puedo crear otro artículo más avanzado. Espero vuestras respuestas y dudas 🙂
Deja una respuesta