| Suscribir mediante RSS

Conociendo los Shortcodes

19 April 2009 Diseño web

shortcodeSi alguna vez has usado Hojas de Cálculo, programas de diseño gráfico o algún otro tipo de aplicaciones en las que tienes que realizar ciertas tareas repetitivas sabrás de la existencia de las macros que tanto nos facilitan estas tareas.

Los Shortcodes se pueden considerar como las macros de WordPress. Fueron incluidas en su versión 2.5 y aunque su uso no está muy extendido nos permiten ahorrarnos mucho tiempo a la hora de escribir nuestros Post y Páginas.

Usar Shortcodes es muy fácil aunque requiere saber PHP, cosa que ya no resulta tan sencillo. Pero realmente no requiere un gran esfuerzo sobro todo sabiendo las ventajas que nos aporta su uso.

Para crear un Shortcode en WordPress debemos definir una función y asociarla con la palabra o shortcode que queramos emplear. La función la situamos en el archivo functions.php del theme. Para llamar a la función desde el Post sólo debemos teclear el shortcode entre corchetes [mishortcode].

Imagina que haces uso constantemente de un Logo en determinados Post, podrías teclear [logo] y automáticamente WordPress sustituirá el shortcode con la imagen y el código asociado que has predefinido antes en el archivo functions.php.

Por ejemplo:

function logotipo() {
   return '<img src="http://enralados.com/imagenes/logos/logo1.jpg"
 alt="Logo" title="Logo" style="margin:0 7px 2px 0; padding:4px;"
 align="left" height="200" width="200" />';  
}

add_shortcode('logo', 'logotipo');

Creamos una función llamada logotipo que contiene el código que queremos mostrar. La función add_shortcode es de WordPress y se emplea para asociar el shortcode [logo] con la función logotipo.

Como puedes observar el mismo código que pondrías manualmente en HTML lo colocas dentro de la función.

Además los Shortcode también pueden admitir parámetros. Imagina ahora que quieres una función similar a la anterior pero que te permita mostrar diferentes imágenes. Podrías pasarle el nombre de la imagen.

Por ejemplo:

[logo]’logo3.jpg'[/logo]

function imagenes($atts,$contenido=null) {  
     extract(shortcode_atts(array( ), $atts));
return '<img src="http://enralados.com/imagenes/logos/03/'
.$contenido.'" alt="'.$contenido.'" title="'.$contenido.'" 
style="margin:0 7px 2px 0; padding:4px;" align="left" 
height="200" width="200" />';

}  

add_shortcode("logo", "imagenes");  

Pero todavía podemos complicar más el asunto. Los Shortcode permiten también atributos además del parámetro.

Ejemplo:

[logo ancho=’250′ alto=’150′]’logo2.jpg'[/logo]

Es decir, le decimos que imagen mostrar y además le pasamos el ancho y el alto de la misma como atributos.

El código sería el siguiente:

function imagenes($atts,$contenido=null) {  
     extract(shortcode_atts(array( 
       'ancho' => '200',
       'alto' => '200' ), $atts));  
return '<img src="http://enralados.com/imagenes/logos/03/
'.$contenido.'" alt="'.$contenido.'" title="'.$contenido.'" 
style="margin:0 7px 2px 0; padding:4px;" align="left" 
height="'.$alto.'" width="'.$ancho.'" />';

}  

add_shortcode("logo", "imagenes");

La función extract se encarga de rellenar las variables asignadas desde el shortcode con la función shortcode_atts. Esta a su vez se encarga de convertir los atributos pasados a variables para poder manejar los datos. Si no especificamos los atributos la función imagenes pondrá los valores por defecto definidos en ella, en este caso 200 pixels para en ancho y 200 pixels para el alto de la imagen.

¿Qué más se puede hacer con Shortcode?

Una vez mostrada la potencia de los shortcodes habrás observado que se pueden hacer tantas cosas como imaginación le echemos al asunto. Escribir texto y aplicarle estilo, Contar el número de Posts, obtener los posts de una categoría, ejecutar código PHP, insertar RSS, insertar publicidad de adsense, etc, etc.

Tags: ,

Otros artículos de Diseño web

Menús personalizados en WordPress
WordPress como la vida misma
Qué es RSS conceptos básicos
BuddyPress para WordPress
Trackbacks y Pingbacks