Clicky

Cómo crear tus propios códigos cortos de WordPress (shortcodes)

shortcodes en Wordpress

Con los shortcodes puedes hacer lo que quieras: pueden ser tan simples como devolver una frase, o tan complejos como la adición de un formulario

En la versión 2.5 de WordPress introdujo los códigos cortos (abreviados o "shortcodes", que son pequeños fragmentos de código que usamos habitualmente en los post y que luego son sustituidos por un texto o código más complejo cuando se genera la página), y probablemente todos nosotros los hayamos utilizado en un momento u otro. Por lo general vienen incluidos con plugins, o incluso temas, y lo que hacen es mirar algo que está insertado entre corchetes y, a continuación, reemplazan eso con otro contenido, que podría ser una simple frase o una función PHP compleja, todo depende de lo que le indiquemos a WordPress qué tiene que hacer.

Los shortcodes empaquetados son estupendos, y aceleran las cosas considerablemente, pero ¿no sería bueno saber cómo crear tus propios códigos cortos?.

En este artículo te llevará a través de la creación de algunos códigos cortos de WordPress simples para ayudarte a crear cualquier funcionalidad que desees.

Un shortcode sencillo

El funcionamiento de la API shortcode es muy sencilla: primero tienes que crear una función de devolución de llamada que se ejecutará cada vez que se utiliza el código corto, entonces necesitarás unir esa función a un código corto específico dejándolo listo para su uso. El código se coloca con frecuencia en el archivo functions.php, pero si vas a tener un montón de códigos cortos, tiene sentido crear un archivo separado e incluirlos ese archivo en el archivo functions.php.

En nuestro primer ejemplo queremos crear un código corto que va a imprimir algunos párrafos de texto "lorem ipsum" cada vez que se escribe [lorem] en el editor. Primero tenemos que crear la función de devolución de llamada que devolverá el lorem ipsum (en códigos cortos no repetimos nada, todo se devuelve) :

function lorem_function() {
  return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus mattis volutpat eu at sapien. Nunc interdum congue libero, quis laoreet elit sagittis ut. Pellentesque lacus erat, dictum condimentum pharetra vel, malesuada volutpat risus. Nunc sit amet risus dolor. Etiam posuere tellus nisl. Integer lorem ligula, tempor eu laoreet ac, eleifend quis diam. Proin cursus, nibh eu vehicula varius, lacus elit eleifend elit, eget commodo ante felis at neque. Integer sit amet justo sed elit porta convallis a at metus. Suspendisse molestie turpis pulvinar nisl tincidunt quis fringilla enim lobortis. Curabitur placerat quam ac sem venenatis blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed ligula nisl. Nam ullamcorper elit id magna hendrerit sit amet dignissim elit sodales. Aenean accumsan consectetur rutrum.';
}

A continuación tenemos que añadir este código corto para WordPress utilizando la función add_shortcode en nuestro archivo functions.php, o un archivo que se esté incluido en el mismo, esta función añade el código corto y también se vincula a la función que acabamos de crear. add_shortcode sólo toma dos argumentos, el primero es el nombre que deseamos tenga este código corto (lo que vamos a escribir entre corchetes) y el segundo es la función que queremos conectar a ese código corto:

add_shortcode('lorem', 'lorem_function');

Eso es todo lo que se necesita para crear un código corto simple en WordPress.

Adición de parámetros

Siguiendo con esta idea de prueba, a menudo necesitamos imágenes en nuestro contenido cuando preparamos nuestros maquetas y estas imágenes deberán ser de diferentes tamaños, por lo que ahora vamos a crear un código corto para insertar una imagen, algo como esto:

[picture width="500" height="500"]

Cuando WordPress se encuentra con esto queremos una función que inserte una imagen. Se necesita leer los atributos "width" y "height", pero por si acaso vamos a proporcionar también valores por defecto para que puedan ser utilizados sin los atributos. Debido a que, a lo mejor,  no podamos tener una imagen válida, vamos a utilizar el servicio lorempixel.com para que nos proporcione una imagen aleatoria.

En primer lugar tenemos que crear la función:

function random_picture($atts) {
   extract(shortcode_atts(array(
      'width' => 400,
      'height' => 200,
   ), $atts));
return '<img src="http://lorempixel.com/'. $width . '/'. $height . '" />';
}

Hemos llamado a esta función random_picture y desde este shortcode se podrán tener los argumentos que nos de el parámetro $atts. Con el fin de utilizar los atributos necesitamos dos funciones: la shortcode_atts que es una función de WordPress que combina los atributos con atributos conocidos y los rellena por defecto cuando sea necesario, y la función PHP extract que, como su nombre indica, extrae los atributos que nos propusimos para nuestro código corto. Por último, la función devuelve el valor que queremos, en este caso el código HTML para nuestra imagen, combinado con las variables de anchura y altura.

Lo único que queda por hacer es registrar este código corto:

add_shortcode('picture', 'random_picture');

Nuestro código corto es completo, cuando se escribe [picture] nos dará una imagen aleatoria de 400 por 200 y, si se utilizan los atributos, se puede crear una imagen de cualquier tamaño que queramos.

Conclusión

La creación de pequeños códigos cortos de cosas que usamos frecuentemente sin duda nos ayudará a la hora de escribir entradas de blog, ya que con los shortcodes puedes hacer lo que quieras: pueden ser tan simples como devolver una frase, o tan complejos como la adición de un formulario o los últimos mensajes ordenados por mes.

Jesus_Caceres