Cómo crear shortcodes personalizados en WordPress

Los shortcodes son un método más que interesante mediante el cual podemos incluir elementos específicos en nuestros contenidos publicados a través de WordPress. A nivel de usuario final, los shortcodes nos permiten, a través de combinaciones de atajos de texto poder insertar contenido que se imprimirá en el frontend de nuestro sitio web sin necesidad de intervenir en el código de los temas o plugins instalados.

La API de Shortcodes para WordPress nos permite crear de una manera sencilla este tipo de atajos de código. A nivel de desarrollo, podemos construir instrucciones sencillas para el usuario en el caso de que tenga que introducir determinados valores en el sitio web, que de otro modo sería más complejo, o en ocasiones, demasiado repetitivo.

En este artículo hablaremos un poco más del funcionamiento en sí mismo y podremos comprobar cómo podemos crear nuestros propios shortcodes a través de una serie de pasos muy sencillos.

API de Shortcodes para WordPress

La API de Shortcodes para WordPress es una herramienta para desarrolladores que nos permite generar, mediante fragmentos de texto entre corchetes, un código completo que se imprimirá en consecuencia. El propio WordPress dispone de algunos shortcodes creados por defecto que a buen seguro te van a sonar.

[audio] [caption] [embed] [gallery] [playlist] [video]

Cuando introducimos alguno de estos shortcodes en nuestro editor de texto y añadimos los correspondientes parámetros podremos mostrar cualquier tipo de información sin necesidad de depender de la actualización de código HTML o PHP para tal fin.

Esta funcionalidad añadida supone una mejora en el mantenimiento de contenidos de un sitio web y una mayor facilidad de uso para un cliente final encargado de gestionar publicaciones.

Cómo crear un Shortcode para WordPress

Después de tener una visión general de la herramienta y haber entendido su funcionamiento, vamos a proceder a crear un ejemplo sencillo pero que nos dará una buena aproximación y nos permitirá poner en práctica esta funcionalidad para WordPress.

En este ejemplo crearemos un shortcode que nos permitirá añadir una imagen por defecto a modo de placeholder en cualquier post en tan solo unos segundos. Es un proceso sencillo, pero que si lo complementamos con cierta creatividad nos podrá dar juego para nuestros desarrollos permitiendo añadir contenido de manera sencilla a través del editor de texto de WordPress.

Los pasos que deberemos llevar a cabo son los que exponemos a continuación.

Crear la función del shortcode

Tendremos que crear la función para el shortcode, y en este caso, WordPress nos da los parámetros necesarios para utilizar el hook add_shortcode.

add_shortcode( 'dummyimage', 'dummyimage_shortcode_function' );

Enlace a gist

En este caso, dummyimage es el valor que deberemos utilizar para para llamar al shortcode desde el editor, y la función que nos permitirá definir el contenido que debemos imprimir.

Añadir los atributos variables

Añadiremos a nuestra función los elementos necesarios para definir valores como el ancho de la imagen, la altura, el color de fondo y el color del texto incluido. También podemos añadir unos valores por defecto, que se utilizarán en el caso de utilizar el shortcode sin indicar ningún tipo de parámetro.

function dummyimage_shortcode_function( $atts ) {

  // Attributes
	$atts = shortcode_atts(
		array(
			'width' => '600',
			'height' => '300',
			'background' => 'eeeeee',
			'text' => 'ffffff',
		),
		$atts
	);

Enlace a gist

Código a implementar

Por último deberemos añadir el código que se va a imprimir, siendo este caso la inserción de una imagen. En el caso que nos ocupa utilizaremos el servicio gratuito para generar imágenes de dummyimage.com.

return '';

Enlace a gist

Función completa

Si recopilamos las instrucciones dadas tendremos el siguiente código que podremos añadir a nuestro archivo de funciones, functions.php, o en nuestro tema en desarrollo o plugin instalado.

// Añadir Shortcode
function dummyimage_shortcode_function( $atts ) {

	// Atributos
	$atts = shortcode_atts(
		array(
			'width' => '600',
			'height' => '300',
			'background' => 'eeeeee',
			'text' => 'ffffff',
		),
		$atts
	);

	return '

';

}

add_shortcode( 'dummyimage', 'dummyimage_shortcode_function' );

Enlace a gist

Si en este caso usamos la llamada al shortcode tal cual, lo que conseguiremos es imprimir la imagen por defecto que necesitamos tomando los valores que hayamos indicado en la creación del shortcode. Tendríamos que utilizar el shortcode sin ningún tipo de parámetro.

[dummyimage]

Si lo que buscamos es personalizar los parámetros de salida de nuestra imagen a modo de placeholder, es necesario que indiquemos esas variables del siguiente modo.

[dummyimage width="300" height="200" background="000000" text="ffffff"]

Conclusiones

Si realizar mejoras en nuestros desarrollos, uno de los objetivos que debemos tener en cuenta es el uso que van a dar a la herramienta nuestros clientes o encargados de la edición de contenidos.

Todo aquello que nos permita mejorar su flujo de trabajo podrá considerarse un éxito en el remate de un proyecto y tendrá consecuencias en una mejor adaptación a la publicación de contenidos en WordPress.