WordPress: Usando shortcodes

por | Feb 9, 2012 | Wordpress

Los shortcodes son una de las herramientas más potentes que nos brinda WordPress y que nos hace la vida más fácil ya que pueden ser usados dentro de plugins, como funciones de nuestra plantilla o para dar formato al texto. Primero voy a explicar que son y luego daré un ejemplo de shortcodes que podemos utilizar.

Supongamos que por ejemplo quisiera insertar unos sliders dentro de un post, pegar código javascript resulta complicado porque el editor tiende a filtrarlo además de lo sucio que quedaría el código y si alguna vez quisiera editar la presentación tendría que hacerlo post por post en resumen toda una pesadilla pero si fuera un shortcode podria ser algo como

1
[migaleria id="33"]

Y wordpress podría reemplazar ese sencillo código por nuestra galería que a suvez podría ser un plugin y por lo tanto una galería editable

 

¿Cómo crear mis propios shortcodes?

Veamos primero la estructura básica para crear un shortcode

1
2
3
4
function mifuncion( $atts ){
return "foo and bar";
}
add_shortcode( 'mishortcode', 'mifuncion' );

Esas líneas de código lo que hacen es crear un shortcode [mishortcode] que al ser colocado en cualquier post lo reemplazaría por el texto «foo and bar»

 

Shortcodes con parámetros

Hasta ahí luce interesante pero sería aún mejor si pudiera enviarle parámetros por ejemplo el tamaño, el id, un código, lo que se nos ocurra, ese caso la función quedaría así:

1
2
3
4
5
6
7
8
9
function mifuncion( $atts ) {
extract( shortcode_atts( array(
'parametro1' => 'something',
'parametro2' => 'something else',
), $atts ) );

return "respueesta = {$parametro1}";
}
add_shortcode( 'mishorttag', 'mifuncion' );

En este segundo ejemplo podría enviar parámetros de la siguiente forma [mishorttag parametro1=»xxx» parametro2=»yyy»]

Los shorttags se pueden aplicar a cualquier función lo que incluye las funciones de los plugins, si encuentras uno que carezca de short tags podrías agregarle fácilmente uno invocando a la función que imprime

Ejemplo de Shortcode para crear columnas

Supongamos que necesitamos fácilmente dividir el texto en 2 columnas sin recurrir a CSS3, pues necesitariamos un div por cada columna, el tamaño lo asignariamos por css algo tipo width 40% con un margen derecho de 5%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function doscolumnas($atts, $content){

extract(shortcode_atts(array(
'end' => ''
), $atts));

if ( $end == 'true' ) {
return '
<div class="mitad end">'.$content.'</div>
';
} else {
return '
<div class="mitad">'.$content.'</div>
';
}

}
add_shortcode('columna', 'doscolumnas');

Ese código permite que el texto se divida a 2 columnas, una con margen derecho y la otra sin margen (eso se maneja via CSS), y su uso sería:

1
2
3
[columna]Mi texto de la primera columna[/columna]

[columna end="true"]Mi texto de la segunda columna[/columna]

Y bueno así podemos hacer mil cosas jugando con shortcodes