Tutorial para crear tu primer shortcode en WordPress

Publicada en WordPress.

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.

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 [gallery] tiene el parámetro columns, veamos cómo utilizarlo:

[gallery columns="5"]

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

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 🙂

FlojaNo está malBienMuy bien¡Impecable! (5 votos, promedio: 4,20 de 5)
Cargando…

5 comentarios en «Tutorial para crear tu primer shortcode en WordPress»

  1. 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

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.