Seleccionar página

shortcodesSi utilizas WordPress, seguro que has usado un shortcode alguna vez. Es un pequeño texto encapsulado entre corchetes que sirve para añadir funcionalidad a tus entradas. Algo como así [shortcode]. Puedes usarlas en cualquier tipo de entrada personalizado (entrada, página…) en la que uses un editor o un wysiwyg.

Si tu intención es crear tus propios shortcodes, hoy aprenderás que es algo muy sencillo. Lo veremos en tres partes: El shortcode básico, el shortcode con atributos y el shortcode con contenido.

Antes de empezar

Es evidente que hay que definir los shortcodes en alguna parte. Este lugar es, o bien, un plugin nuevo, o bien, el archivo functions.php de tu Theme. Como siempre digo, si no eres el creador del Theme, lo mejor es que crees un plugin nuevo (y lo actives), puesto que podrías perder tu código si actualizas el Theme o lo reinstalas.

El shortcode básico

Este es un shortcode que va a devolver una información básica. Por poner un ejemplo, vamos a crear un shortcode para imprimir la fecha actual en cualquier punto de nuestra entrada o página. Podríamos hacer cualquier otra cosa, pero es para que entendáis cómo funciona.

Para empezar, crearemos la función que ejecuta la acción que queremos.

Simple y para toda la familia. Obtenemos la fecha con formato dd/mm/YYYY, y la devolvemos con un return.

Lo siguiente es añadir el shortcode a la lista de shortcodes de WordPress. Esto se hace con la función add_shortcode en cualquier punto de nuestro archivo functions.php o nuestro archivo principal del plugin:

La función add_shortcode tiene dos parámetros: el primero es el shortcode en sí, lo que vamos a escribir entre corchetes. El segundo, la función a la que llama (en este caso, la función que hemos creado antes).

Cuando ahora escribamos [fecha] en una entrada, nos aparecerá la fecha actual. Hay que tener en cuenta que lo que devolvemos con return se imprime directamente en el código HTML tal cual lo devolvemos. Por lo tanto, si queremos devolver la fecha dentro de un span, div, o cualquier cosa similar, hay que incluirlo en el código:

Y ya en el CSS de vuestro Theme le podéis modificar el estilo.

Shortcode con atributos

Alguno me dirá “Yo he visto shortcodes en los que podías establecer parámetros y opciones”. Cierto, es lo siguiente que vamos a hacer. Vamos a modificar nuestra función shortcode_fecha para que acepte parámetros. Ahora que nuestra fecha aparece con estilo dentro de un span (bueno, supongo que vosotros la habéis estilizado con CSS), vamos a hacer que en lugar de aparecer la fecha actual, aparezca la fecha que nosotros establezcamos. Y si no establecemos ninguna, que aparezca la actual:

El primer bloque de código extrae la información de la variable $atts a otras variables. Si ahora escribimos por ejemplo [fecha date="31/12/2012"], en la variable $date se guardará “31/12/2012”. Si sólo escribimos [fecha], en la variable $date se guardará el resultado de date(‘d/m/Y’), es decir, la fecha actual. Igualamos $fecha a $date y lo devolvemos con return.

El add_shortcode no hay que cambiarlo más, se queda tal como está.

Esto es aplicable a todos los atributos que pongamos. Si queremos separar día, mes y año en atributos separados, algo como [fecha dia="31" mes="12" year="2012"], también es posible:

Shortcode con contenido

Por último, es interesante saber que hay shortcodes que pueden englobar un contenido. Por ejemplo, ahora que hemos creado un estilo para el span#fecha, igual queremos usar este estilo para escribir el texto que queramos. Algo como [fecha]Lunes, 31 de diciembre de 2012[/fecha].

Esto es muy sencillo:

Añadimos un segundo parámetro a la función: $content. Este parámetro por defecto será nulo. He eliminado los atributos porque no les veía sentido para el ejemplo, pero en realidad, también podríamos dejarlos y usarlos donde nos convenga. Es decir, los atributos y el contenido son totalmente compatibles. Por ejemplo, voy a añadir una clase al span…

Por tanto, [fecha class='clasefecha']Contenido[/fecha] devolverá <span id=’fecha’ class=’clasefecha’>Contenido</span> (si no establezco el atributo class, por defecto $class contendrá ‘fecha’).

Y de esta forma tan simple hemos aprendido a crear nuestros propios shortcodes para WordPress. ¿A que ha sido fácil?

“La función de un buen software es hacer que lo complejo aparente ser simple”
.- Grady Booch