Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
shortcodes

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:

Título del panel

Descripción del panel

 

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:

Panel title

Panel content (default)

Panel title

Panel content (primary)

Panel title

Panel content (success)

Panel title

Panel content (info)

Panel title

Panel content (warning)

Panel title

Panel content (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:

shortcode wysiwyg

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

shortcode front

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.

Puede que también te interese

Cómo solucionar el error de sintaxis en WordPress
Cómo solucionar el error de sintaxis en WordPress
WordPress es el CMS más utilizado para crear páginas web. Además, con una diferencia notable con respecto a otras alternativas. Es por esto que la…
Cómo redireccionar a una página al usuario cuando se registra
Cómo redireccionar a una página al usuario cuando se registra
Es probable que si en tu sitio tienes abierto el registro de usuarios, quieras redirigir al usuario a una página concreta una vez finalice el…
Logo de tema, nueva característica en WordPress 4.5
Logo de tema, nueva característica en WordPress 4.5
WordPress 4.5, entre otras mejoras y resolución de incidencias y vulnerabilidades, introduce una nueva característica para agregar un logo de tema de forma nativa. Ya…
Cómo crear un formulario de registro personalizado en WordPress
Cómo crear un formulario de registro personalizado en WordPress
En entradas anteriores hemos visto cómo crear formularios de log-in / log-out personalizados, y cómo agregar campos personalizados al perfil de usuario de WordPress tanto…