Shortcode

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

que viene por defecto con WordPress.

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

shortcodes_02

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

tiene el parámetro columns, veamos cómo utilizarlo:

shortcodes_03

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.

Ver código_01

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.

shortcodes_04

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:

Ver código boton_02

$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]
shortcodes_05

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

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 🙂

5 respuestas a «Tutorial para crear tu primer shortcode en WordPress»

  1. Avatar de Fachi

    Muy buenos ejemplos, y excelente explicación, Muchas gracias!
    Saludos!

  2. Avatar de Yass
    Yass

    Muy interesante!!
    Gracias.

  3. Avatar de Felipe

    Excelente articulo justo lo que estaba buscando muy explicado.

    Se agradece.

  4. Avatar de jose

    hola, tengo esto

    function boton_shortcode( $atts, $content = null ) {
    $boton = »;
    return $boton;
    }
    add_shortcode( ‘boton’, ‘boton_shortcode’ );

    como podran notar es un boton en javascript q estoy haciendo y lo quiero hacer como un shortcode para manejarlo mas facil, el problema esta es en que en donde va la URL hay q insertarlo con ‘ ‘ y no es posible porque ya el mismo codigo del short code los usa como apertura y cierre, como hago en este caso? ya he intentado de todo y nada, en el ejemplo q puse les deje los ‘ ‘ q estan al final y al principio de los $boton, espero me puedan ayudar, saludos

    1. Avatar de Antonio Villegas

      Hola Jose. Revisa bien el código de nuestro amigo Emili, que está bien explicado y te muestra cómo implementar el shortcode. En tu caso, lo que devuelve el shortcode en tu código es una cadena vacía.

Deja una respuesta

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