Cómo añadir shortcodes a tu theme en WordPress

Categoría: Manuales , 18/09/2011, 1 comentario

Hoy comento un truco rápido, cómo añadir shortcodes (etiquetas que al añadirlas en el contenido de un post o página se convierten automáticamente en un trozo de código html) en un theme en WordPress.

Os preguntaréis para qué puede servir esto, es más útil de lo que parece, os pongo un ejemplo práctico con mi web. Si entráis por ejemplo a la página de Nakeme, el theme de desarrollo en el que estoy trabajando, veréis que hay dos botones, uno de descargar y otro de demo. Estos dos enlaces son introducidos de la siguiente forma en el post:

[demolink url="http://themes.franmoreno.com/?themedemo=nakeme" text="DEMO"]
[downloadlink url="http://github.com/siner/Nakeme" text="DESCARGAR"]

Y se convierten en lo siguiente:

<a class="demo-link" href="http://themes.franmoreno.com/?themedemo=nakeme">DEMO</a>
<a class="download-link" href="http://github.com/siner/Nakeme">DESCARGAR</a>

De este modo, no necesito escribir el código HTML directamente en el post (se que estos ejemplos son demasiado simples, pero para captar la idea creo que vale). En el css le doy el estilo necesario para que se vean como yo quiera, y listo.

Pues bien, para implementar por ejemplo el shortcode del link de demo, añadiremos en el fichero functions.php de nuestro theme lo siguiente:

// [demolink url="http://www.franmoreno.com"]
function demolink_shortcode( $atts )
{
	extract( shortcode_atts( array(
		'url' => 'http://www.franmoreno.com',
		'text' => 'DEMO',
	), $atts ) );

	return '<a class="demo-link" href="'.$url.'">'.$text.'</a>';
}
add_shortcode( 'demolink', 'demolink_shortcode' );

Y ya está, tan simple como eso. Si os fijáis, la función extract obtiene los distintos parámetros para crear el código html correspondiente. Se pueden definir unos valores por defecto para cada atributo, así si alguno no se escribe en el shortcode podemos darle un valor.

Algunos ejemplos de usos más avanzados de shortcodes, para que os inspiréis.