Cómo crear tus propios Shortcodes de Wordpress

shortcode


La versión 2.5 de WordPress introdujo los shortcodes (códigos cortos) y seguro que alguna vez lo has utilizado en algún momento. Por lo general vienen por defecto con plugins, o temas, y su función es insertar algún elemento sin tener conocimientos de programación.

Los shortcodes son una gran herramienta ya que te ayudan a ir rápido a la hora de hacer tu diseño web, ¿te gustaría saber cómo crear tus propios shortcodes?.

En este artículo te ayudaré a crear tus propios shortcodes.

El funcionamiento de la API shortcode es muy sencillo: primero tienes que crear una función de devolución de llamada que se ejecutará cada vez que se utilice el código abreviado (el código abreviado siempre va entre [corchetes]), una vez hecho esto unes esa función a un código corto específico para que quede listo para su uso.

Normalmente el código se coloca en el archivo functions.php de tu WordPress, pero si tienes en mente crear gran cantidad de shortcodes vale la pena crear un archivo separado e incluir ese archivo en el archivo functions.php.

En el primer ejemplo quiero crear un código corto o shortcode que va a crear algunos "lorem ipsum" cada vez que inserte el siguiente shortcode [lorem] en el editor.

Primero tienes que crear la función de devolución de llamada que devolverá el lorem ipsum.

function  lorem_function () { 
  return  "Lorem ipsum dolor sit amet, elit adipiscing consectetur. Donec nec nulla vitae lacus mattis volutpat eu al sapiens. Nunc Interdum congue libero, quis laoreet elit sagittis ut. Erat Pellentesque Lacus, condimentum dictum pharetra vel, risus volutpat malesuada. Nunc dolor sit amet risus. Etiam posuere nisl tellus. Ligula lorem Integer, tempor eu laoreet ac, diam quis eleifend. Cursus Proin, NIBH eu varius vehicula, lacus elit elit eleifend, felis ante commodo eget al ñeque. Entero sit amet justo sed elit porta convallis una a 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 egestas turpis. Nullam sed nisl ligula. Ullamcorper Nam Identificación elit magna hendrerit sit amet dignissim elit sodales. Aenean accumsan consectetur rutrum '. ; }

A continuación tienes que añadir este shortcode a WordPress utilizando la función add_shortcode, ya sea en el archivo functions.php o un archivo externo que deberás incluir 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.

Al código add_shortcode hay que indicarle dos parámetros, el primero es el nombre que le quieres dar al shortcode (lo que escribiras entre corchetes en el editor de texto) y el segundo es la función que vas a dar a ese código corto:

add_shortcode ( 'lorem' , 'lorem_function' );

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

Adición de parámetros

A menudo necesitamos imágenes  cuando estamos preparando nuestra web, y estas imágenes deben ser de diferentes tamaños, por lo que ahora voy a crear un código abreviado para insertar una imagen:

[Picture width="500" height="500" ]

WordPress necesita leer los atributos de altura y anchura de una imagen, pero también voy a proporcinar al código valores predeterminados para que pueda ser utilizado sin los atributos de altura por anchura.

Si no tienes un banco de imagenes disponible vamos a utlizar el loremipsum.com que ofrece un servicio de imágenes aleatorias.

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 . '" />';
}

He llamado a esta función random_picture y le estoy diciendo que coja los argumentos del parámetro $Atts. Los shortcode_atts es una función de WorPress que combina los atributos 'width' y 'height' y rellena por defecto cuando no ponemos en el shortcode estos parámetros de alto por ancho, por otra parte tenemos el extracto de la función PHP, que como su nombre indica extrae aquellos atributos que estableceremos en nuestro shortcode, por último la función devuelve el valor que queremos, en este caso HTML, mostrando la imagen que queremos con la anchura y altura solicitada del shortcode.

Lo único que queda por hacer es registrar este shortcode:

add_shortcode('picture', 'random_picture');

Nuestro shotcode está completo, cuando escribamos en nuestro editor WordPress [picture] nos dará una imagen aleatoria de 400 por 200, y si utilizas los atributos te devolverá una imagen con el tamaño que quieras.

Compartir

Compartir

Compartir