Shortcodes: ¿Qué son y cómo crearlos?

Los shortcodes de WordPress son pequeños códigos que puedes añadir al editor de texto WYSIWYG (también a widgets o directamente en el código fuente). Se crean bajo un identificador único, y se escriben entre corchetes: [shortcode]. Es como si fuera una etiqueta HTML, pero en lugar de utilizar los símbolos mayor y menor qué (<>), utilizamos los corchetes ([]).

Están pensados para ahorrarte tiempo en labores del día a día, para simplificarte el trabajo. Te permiten hacer cosas ingeniosas con muy poco esfuerzo, ofreciéndote una versatilidad enorme. Muchos temas utilizan shortcodes, por eso muchas veces cuando cambiamos de un tema a otro, podemos encontrarnos en el contenido que muchas cosas dejan de funcionar porque el tema antiguo tenía una serie de shortcodes que el nuevo no tiene, o simplemente se llaman de diferente manera, pero esto es tema para otro artículo.

WordPress trae de serie un listado de shortcodes bastante amplios para insertar video, audio, imágenes y documentos de plataformas de terceros como pueden ser youtube, instagram, twitter, googleapps, spotify, flickr, ustream, etc… Puedes ver el listado completo pinchando aquí.

En este site utilizamos bootstrap. Vamos a ver cómo podemos crear un shortcode que nos permita incluir los panels de bootstrap en cualquier parte de nuestro post sin necesidad de maquetar el HTML necesario en la vista Texto de nuestro editor.

El HTML básico de un panel de bootstrap es el siguiente:

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Título del panel</h3>
  </div>
  <div class="panel-body">
    Descripción del panel
  </div>
</div>

Y lo que pinta éste fragmento HTML es lo siguiente:

Con bootstrap podemos elegir diferentes opciones gráficas para mostrar un mensaje, que se establecen a partir de la clase CSS de nuestro div principal. Son estas: panel-default, panel-primary, panel-success, panel-info, panel-warning y panel-danger:

Por lo tanto necesitaríamos un shortcode que aceptara 3 parámetros: el tipo, el título y la descripción. Manos a la obra, agregamos en nuestro functions.php:

<?php

function panel_shortcode( $atts ) {
  $shortcode_atts = shortcode_atts( array(
    'type' => 'default',
    'title' => 'no se ha establecido titulo',
    'description' => 'no se ha establecido descripcion',
  ), $atts );

  $return = '<div class="panel panel-' . $shortcode_atts['type'] . '">';
  $return .= '<div class="panel-heading">';
  $return .= '<h3 class="panel-title">' . $shortcode_atts['title'] . '</h3>';
  $return .= '</div>';
  $return .= '<div class="panel-body">' . $shortcode_atts['description'] . '</div>';
  $return .= '</div>';

  return $return;
}
add_shortcode( 'panel', 'panel_shortcode' );

Creamos nuestro shortcode “panel” con la función add_shortcode(), donde llamamos a nuestra función panel_shortcode() que es la que lo construye.

Ésta función recibirá los parámetros que establezcamos dentro de nuestro shortcode, y los recuperamos a través de la función shortcode_atts(). Nos permite establecer unos valores por defecto en caso de que no los recibamos. En este ejemplo hemos definido los parámetros type, title y description.

Montamos mediante PHP el HTML necesario para crear un panel, y lo guardamos en una variable $return que será la que devolveremos. Si nuestro shortcode produce mucho HTML es recomendable usar ob_start() para capturar la salida y devolverla en el return con ob_get_clean(). Nuestro ejemplo de antes quedaría así:

<?php

function panel_shortcode( $atts ) {
  ob_start();

  $shortcode_atts = shortcode_atts( array(
    'type' => 'default',
    'title' => 'no se ha establecido titulo',
    'description' => 'no se ha establecido descripcion',
  ), $atts );?>

  <div class="panel panel-<?php echo $shortcode_atts['type'];?>">
    <div class="panel-heading">
      <h3 class="panel-title"><?php echo $shortcode_atts['title'];?></h3>
    </div>
    <div class="panel-body"><?php echo $shortcode_atts['description'];?></div>
  </div>

  <?php
  return ob_get_clean();
}
add_shortcode( 'panel', 'panel_shortcode' );

Por lo tanto, en nuestro editor de texto podremos escribir nuestro shortcode con parámetros o sin ellos:

Y lo que nos devolverá en el front será lo siguiente:

Esto es sólo un ejemplo sencillo de lo que puede hacer un shortcode. Nos permitiría añadir cualquier funcionalidad que se nos pueda ocurrir como por ejemplo tener un custom post type personalizado de productos, y asociado a cada producto una serie de campos personalizados donde mostrar sus características, precios, ofertas, etc… y con un simple shortcode, podríamos pasar el id de un producto concreto y tener acceso a toda la información.

La gran ventaja es que si tenemos este shortcode en muchos post, y un día actualizamos la información del producto, ya sea la imagen, las características o el precio…no hará falta actualizar post por post, ya que los shortcodes leerán la información actualizada del post de producto.

Podrían servirnos para crear tablas a partir de un fichero xml, o para crear tarjetas de visita que lean de un post determinado. El día que actualicemos los datos de la fuente, veremos la nueva información en todos aquellos lugares donde hayamos utilizado el shortcode de forma automática.

Es una herramienta muy útil y muy versátil que te permite añadir funcionalidad y te facilita el trabajo en el día a día.

• « Child themes en WordPress: Guía…
• He olvidado, perdido o borrado… »