Completísima guía para dominar bien el uso de los shortcodes (códigos cortos) de WordPress (de 2.5 hacia adelante) los cuales con tan solo escribir [algunapalabra] (del modo que se muestra) en tu post, a la hora de publicar se devuelve en el lugar donde pusiste el shortcode, un código o un texto que hayas determinado manualmente en functions.php, muy útiles, ahorran mucho tiempo y también funcionan en los Widgets de “texto” usando un filtro. Puedes insertar fácilmente un video de youtube, insertar anuncios de Adsense en cualquier parte o mostrar un texto fácil de olvidar.

Bien, si alguna vez has soñado o te has preguntado si se puede meter código o texto en un articulo escribiendo tan solo una palabra encerrada en “ [ ] “, este articulo es un “must-read” (lectura obligatoria). Si es posible y he encontrado muchos útiles y complejos (también hay simples pero muy ahorradores de tiempo) usos para los shortcodes o “códigos cortos”; toma esto como un atajo para evitar escribir líneas de código varias veces o escribir solo lo que deseas y saltarte la parte tediosa del HTML, PHP o texto que tal vez ni si quiera recuerdes. Si aun no comprendes lo que quiero decir, tienes que saber que WordPress cuenta con un archivo fundamental llamado functions.php, en el cual puedes añadir piezas de código para usarlas después en otro lugar con una simple llamada, bien pues se puede hacer lo mismo pero dentro de un post/articulo escribiendo tan solo una palabra como esta: [palabra], la cual llamara el código que hayas insertado en functions.php y lo insertara automáticamente en el articulo, esto tiene usos increíbles como insertar un bloque de Google Adsense debajo del párrafo que quieras de tal modo que ganes unos clicks extra, o ahorrarte el tiempo de escribir o copiar el código embed de un video de youtube escribiendo solo los atributos del video como el ID, el ancho y el alto. Procederé a explicarlo mejor, hay también disponible una lista de shortcodes listos para usar con su explicación.

Los shortcodes fueron una función nueva que se incluyo con la llegada del magistral WordPress 2.5, son “ganchos (hooks)” que llaman alguna función del archivo ya mencionado antes y lo inserta en un post con tan solo escribir [unapalabracomoestas]. Sirven de mucho y son usadas principalmente para ahorrar valioso tiempo de redacción. Si eres creativo puedes darles un uso magistral, para mejorar visualmente tus artículos sin repetir código una y otra vez o mejorar tus ganancias de Adsense metiendo publicidad en el contenido.

¿Quieres probar como funciona este rodeo?

Nota: Los códigos cortos pueden ser escritos tanto en modo Visual como en modo HTML en tu editor de Wordoress, siempre y cuando no estén encapsulados en ninguna etiqueta HTML, deben estar solitos o si no, simplemente olvidate de ellos.

Vaquero… estas apunto de crear tu primer shortcode, será tan fácil como cortar un pastel! primero haremos algo como insertar una palabra, digamos [saludo], para que después cuando hagas tu magia de picar el botón “Publicar” cuando estés escribiendo un articulo, y al ver tu post en la nube de la blogosfera, veas un saludo creado por ti (puede incluir PHP y HTML, lo que te de la gana) justo donde pusiste el shortcode.

Si ya eres todo un Clint Eastwood y sabes las nociones básicas ya de shortcodes, y viniste aquí para ver ejemplos y códigos pre hechos para insertar en tu blog, sáltate hasta el próximo titulo que veas en grande, dice algo así como “Ejemplos de shortcodes utiles (simples y complejos)”. Sin embargo puedes leer esta explicación.

Primero que nada entra a tu panel de administración de WordPress, fíjate si no hay monstruos y ve a Apariencia > Editor [Appearance > Edit], una vez ahí selecciona functions.php de tu lista de archivos a editar (con un clic). Ahora estarás viendo el código, sin importar lo que diga, inserta lo siguiente debajo de la primera línea, la cual dice “<?php” (indica que inicia una secuencia de código php, no escribas antes de ella o no funcionara):

function hola() {
    return 'Hola amigos del alma queridos de mi corazon, les saluda su amigo Fulanito Perez, soy el dios todo poderoso fundador de este blog y solo pasaba a saludarlos, se han portado muy bien esta navidad.';
}

Justo debajo de ese código inserta lo siguiente, paciencia!, todo se explicará en su momento:

add_shortcode('saludo', 'hola');

Ahora dirígete (en tu panel de administración) a Entradas > Editar (en otros lugares puede ser Editar > Entradas/Posts), ahora escribe un titulo cualquiera, tags cualquieras y publícalo en la categoría que quieras, si deseas hacerlo privado (solo si tu blog tiene visitas conectadas) para que solo lo veas tu, hazlo. Mientras escribes ya sea en el Editor Visual o en el Editor HTML, escribe [saludo] y publica el articulo, ahora ve a ese articulo y dime lo que ves… lo lograste!.

WOW! Lo se… pero ¿Quieres saber que sucedió o como estuvo el proceso?, mantén tus ojos bien pegados y presta mucha atención a esta explicación que te voy a dar, no la conseguirás así afuera.

Suponiendo que tenemos escrita  la siguiente sintaxis escrita en functions.php:

function ryan() {
    return 'Chiquita bebe, ¿Me entregarias tus montañas para divertirme un rato?';
}
add_shortcode('poema', 'ryan');

1- Supongamos que tenemos a un escritor con una pluma (llamémosle a ese escritor / función “ryan” y a la orden que le de el jefe “return”) dentro de una casa de gente con talentos y cosas que hacer (digamos que esas personas con talentos se llaman “funciones” y que la casa donde viven se llama “functions.php”).

2- Ahora imagina que entra el jefe de la casa (tu) y alerta a una persona en especifico, en este caso le toco al escritor con la pluma (nótese que add_shortcode consta de dos propiedades, la primera de ellas es el nombre que se le dará y es el texto que debe ir encerrado en los “[ ]” para que se ejecute la función, el segundo atributo es eso, la función que será buscada en functions.php), según las dos ordenes del jefe las cual eran: Cuando grite “poema” quiero que tu “ryan” ejecutes la orden que se te fue encomendada soldado!.

En este caso return hace referencia al valor (código o texto) que se devolverá donde esta ese shortcode a la hora de hacer el llamado en las funciones.

3- Eventualmente tu estas escribiendo algo en digamos… una carta de amor cuando de repente quieres escribir un poema (uno que contiene las palabras mas hermosas para una mujer ) pero de mala gana se te olvido y quieres escribirlo a toda costa, ahora gritas con todas tus fuerzas “poema” y en la choza se escucha, en ese momento el soldado ryan sale corriendo a ejecutar su orden y escribe en la carta el tan maravilloso poema dejando al jefe contento.

Técnicamente todo esto, fue solamente escribir [poema] en un párrafo de alguna articulo digamos de declaración de amor y al publicarlo y verlo, en vez de [poema] sale lo que pusimos en return.

Shortcodes con atributos (atts)

Bueno, aquí no acaba la cosa, se puede extender su funcionalidad usando atributos y también condicionantes (se muestra en el ejemplo de ocultar contenido a visitantes que no están logueados en tu blog), los atributos son cosas que son sustituibles en el shortcode que se reflejan en el return, para dar un simple ejemplo vamos a analizar el siguiente código:

function yo($atts) {
	extract(shortcode_atts(array(
		"url" => 'http://',
		"nombre" => 'SinNombre',
		"pais" => 'NuncaJamas',
		"edad" => '0'
	), $atts));
	return 'Me levante en la mañana y no recordaba nada, poco a poco me fui acordando de mi identidad. Me llamo .$nombre. y soy de .$pais. porque ahi me hicieron mis padres, si no mal recuerdo tengo .$edad. años de edad y tengo una pagina web, la cual se llama <a href=".$url.">Blogfantasma</a>.';
}
add_shortcode("identidad", "yo");

Ahora el shortcode no solo debe decir [identidad], debe tener los atributos encerrados en comillas de la siguiente manera: Atributo=”valor”. En caso de que no se escriba ningún valor de atributo se desplegara en los parámetros el valor por defecto que se le dio. Los atributos siempre deben separarse por comas o si no joderas el código y tendrás que re-subir functions.php, créeme me paso y no fue muy de mi agrado, por supuesto que el ultimo atributo de la lista no lleva coma, si solo pones uno, no lleva coma. Explicando la sintaxis de forma amigable:

Tenemos que escribir el shortcode de la siguiente manera en nuestro editor de artículos:

[identidad nombre="Luis Lopez" edad="17" pais="Mexico" url="http://www.conceptopixel.com"]

Para explicarlo mejor, leyéndolo de forma comprensible de arriba a abajo, con la correcta sintaxis, usare un lenguaje menos inmaduro como el de hace rato pero igual de comprensible.

Primero se crea una función de nombre “yo”, luego se almacenan o “extraen” los valores por defecto de los atributos, cada atributo tiene un nombre clave y su valor por defecto esta después de => encerrado en comillas simples. Esto del valor por defecto es en caso de que nos pasemos de raya y se nos olvide darle un nuevo valor a esos atributos en el shortcode, escribiendo por ejemplo [identidad edad=”17”], lo que devolverá es un texto como este: “’Me levante en la mañana y no recordaba nada, poco a poco me fui acordando de mi identidad. Me llamo SinNombre y soy de NuncaJamas  porque ahí me hicieron mis padres, si no mal recuerdo tengo 17 años de edad y tengo una pagina web, la cual se llama <a href=”http://”>Blogfantasma</a>.”

Una vez extraídas los valores de los atributos están listos para ser sustituidos en el “return”, los valores de los atributos se llaman con .$nombredelatributo. y se pueden usar cuantas veces quieras, estos parámetros buscaran el valor en la extracción y lo pondrá en su lugar a la hora de devolver el código al articulo donde se puso el shortcode. Finalmente se le agrega el shortcode a WordPress cuyo nombre es “identidad” y la función que debe buscar es “yo”.

Usando “content” dentro de los atributos

Si has visto el código de los foros te darás cuenta que para publicar una dirección de internet o cambiar de color al texto tienes que escribir algo en BBCode como lo siguiente: [URL=”http://www.conceptopixel.com”]Mi Dirección Web[/URL] (esta es la sintaxis de BBCode no la de los shortcodes aunque es 80% parecida). Adivina que, llamaremos a lo que esta entre comillas como parámetros (o atributos) y a lo que queda en medio de [shortcode atributo=”valor”]Content[/shortcode] (sintaxis correcta de un atributo usando content) se le llamara contenido. Ahora procura añadir la siguiente pieza de código ejemplo para probar:

function url($atts, $content = null) {
	extract(shortcode_atts(array(
		"destino" => 'http://www.google.com'
	), $atts));
	return '<a href="'.$destino.'">'.$content.'</a>';
}
add_shortcode("direccion", "url");

[direccion destino="http://www.yahoo.com.mx"]Aqui Voy[/direccion]

Primero se crea la función llamada “url”, se define que se usaran atributos y que el contenido del shortcode será nulo, lo cual significa que tendrás que introducirlo tu mismo, luego se extraen los valores de los parámetros y en el return code cambia un poco la cosa, hay un nuevo parámetro llamado .$content. el cual tiene que llamar a lo que sea que se escriba en medio de las etiquetas []Aquí[/], funciona bien para crear direcciones complejas fácilmente o estilizar texto. En el shortcode se aprecia que el anchor text es .$content. el cual lo puse como “Aquí voy” mientras que el valor nuevo para el atributo de destino es yahoo!, distinto al defecto que era google.

Widgets con shortcodes

Si te preguntabas si cabía la pequeña posibilidad de que se pudiera hacer esto mismo pero con el texto que se escribe en los Widgets (de texto), mi respuesta es que por defecto no se puede, a menos que añadas un filtro en functions.php, de este modo podrás ahorrar el valioso tiempo también a la hora de desplegar tus habilidades con los Widgets en la barra lateral (Sidebar).

En tu editor de themes, suponiendo que aun estas editando el archivo functions.php, introduce este código donde quieras para permitir a los widgets de texto ejecutar shortcodes:

add_filter('widget_text', 'do_shortcode');

Ejemplos de shortcodes útiles

Para llegar y copiar, luego pegar en tus post, con explicación

Bien llego lo que estabas buscando, si lo que querías no era aprender a usarlos, solo usarlos estas en la sección correcta, aunque aquí encontrarás códigos que ni siquiera se te habrían ocurrido si aun no captaste la utilidad de esto, los shortcodes pueden ir mas allá si tu lo deseas e investigas mas sobre el tema, a continuación, una lista de shortcodes muy útiles listos para usar.

1- Mostrar un bloque de Adsense en la parte que quieras del contenido de tus post

Hay gente que dice que tener bloques grandes o medianos (también pequeños) podría ayudar a mejorar los clicks y por ende las ganancias, puedes ponerlos siempre y cuando cumplas con las normas, no superes el máximo de anuncios posibles en una sola pagina (normalmente según se son 5, es mi recomendación de anuncios máximos existentes en la pagina entera) y no ponerlos al lado de imagenes que inciten a dar click ni usar flechas, no modificar los anuncios de tal manera que sea difícil distinguirlos del contenido ni ponerlos en alguna frase que incite a dar click.

Ve a tu administrador de anuncios y copia el código de algún anuncio que sepas que va a caber en un post, o puedes crear uno nuevo. Luego dirígete al editor de functions.php y añade esta línea:

function adsense() {
    return '<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = numero;
google_ad_height = numero;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('ad', 'adsense');

Como puedes notar si pegas directamente ese código no servirá ya que solo esta de muestra y el Publisher ID (también el slot) fueron reemplazados con “x” para así evitar desplegar el bloque de alguien, en vez de eso pega tu código de Adsense en el return ‘aquí va tu código’. El modo de uso seria escribir [ad] en la parte que desees siguiendo las reglas antes mencionadas, yo lo que hice fue nombrar cada bloque posible de usar en posts con nombres de letras griegas, aunque también existe una alternativa, usar atributos. Si lo que piensas es lo mismo que yo entonces quedaría así:

function bloques($atts) {
        extract(shortcode_atts(array(
		"pubid" => 'escribeTUpublisherID',
                     "bloque" => 'xxxxxxxxxx',
                       "ancho" => '500',
                         "hola" => '350'
	), $atts));
         return '<script type="text/javascript"><!--
google_ad_client = "'.$pubid.'";
google_ad_slot = "'.$bloque.'";
google_ad_width = '.$ancho.';
google_ad_height = '.$alto.';
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('adsense', 'bloques');

[adsense bloque="tuBLOQUEaqui" ancho="468" alto="60"]

Esto lo que hace es insertar un solo código evitando colocar varios para cada tipo de bloque que tengas, lo que tienes que hacer es insertar el segundo código en el articulo (el primero va en functions.php como siempre), el pubid es tu Publisher ID, es una identificación de 16 dígitos/caracteres que se te da únicamente a ti, puedes ahorrar tiempo escribiéndolo si le das el valor por defecto poniendo tu numero en “pubid” => ‘mi_id_de_16_digitos’ para evitarlo en el shortcode, también tienes que usar el numero del bloque, eso es fácil, también puedes establecer el ancho y alto que ocupara en el articulo, eso no afecta al anuncio, solo al contenedor.

2- Mostrar contenido para usuarios que no están registrados y/o conectados

Añade el siguiente código en functions.php:

add_shortcode( 'visitante', 'esvisitante' );

function esvisitante( $atts, $content = null ) {
	 if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
		return $content;
	return '';
}

Lo que se hace aquí es añadir un nuevo shortcode de nombre “visitante” y de función “esvisitante”, primero al insertar en el articulo [visitante]Todo lo que ves en la imagen de arriba[visitante], no son necesarios atributos ya que nos interesa solo mostrar contenido a los visitantes y ocultárselo a los que si están conectados a tu blog. Luego entra en juego una condicionante en PHP, la cual establece que “Si es un usuario que no esta conectado y en contenido es nulo, además hay otra condicionante equivalente a un (OR en Basic) que establece que “o esta viendo desde el feed”, entonces regresa como valor lo que haya en medio del shortcode (content), si no, entonces no regreses nada para que quede vacio. A veces es útil ocultar cosas de tus queridos usuarios registrados y por ende conectados, ya sea publicidad o notas que solo están dirigidas para las visitas, ahora vamos mas adelante a lo de ocultar contenido a visitantes y mostrarlo a usuarios.

3- Mostrar contenido a usuarios conectados

Ahora uno un poco mas pedido digamos, un código en el que podamos mostrar cierto mensaje o sección HTML a usuarios que no están conectados y mostrarle otro a los usuarios que si estén conectados, recompensándolos por haberse registrado y estar en línea. Tomemos de ejemplo una pagina web de descargas (supongamos que descargas legales), siempre es tendencia de algunos bloggers a ocultarle el enlace de descarga a sus visitantes, pidiéndoles que se registren con un mensaje de invitación (normalmente muy amable, en paginas warez es algo agresivo) para poder ver el contenido, una vez conectado el usuario, se le mostrara el contenido que vino a buscar.

Hoy crearemos un shortcode que haga precisamente eso, mostrar los enlaces de descarga a los miembros y ocultarlos a los visitantes con una invitación amable (?).

Inserta este código en el archivo que ya sabes y presta atención al uso y sintaxis:

add_shortcode( 'usuario', 'ocultarenlaces' );

function ocultarenlaces( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return 'Lo sentimos pero los enlaces de descarga solo estan disponibles para <strong>usuarios registrados</strong>. Si ya tienes cuenta identificate y si aun no tienes registrate para poder ver los enlaces, y despues conectate con esa cuenta, cuando hagas eso vuelve aqui.';
}

Añade esto a tu articulo, es fácil de deducir como se va a usar:

<h2>Enlace de Descarga</h2>

[usuario]

Gimp 2.6

Enlace de descarga para Mac: http://gimp.lisanet.de

[/usuario]

Despedida del autor del articulo.

Se ve loco pero lo único que hace es comprobar si el usuario esta conectado, si es así regresará lo que insertes entre la etiqueta [usuario]Enlaces de descarga o información Premium[/usuario]. De otra manera avisara el visitante que debe estar conectado para ver el contenido, y si no es así que se registre. Muy ingenioso y se puede usar de muchas maneras, es solo cosa de imaginación.

4- Acortador de URL Automático

Este no lo inventé yo y jamás se me habría ocurrido o adaptado, es propiedad de subzane y sirve para que usando atributos y una API del acortador de URL “http://u.nu” (es una pagina web ), el API nos permita que se nos devuelva una URL mas corta de la que demos como atributo.

Código para funciones:

function subzane_shorturl($atts) {
	extract(shortcode_atts(array(
		'url' => '',
		'nombre' => '',
), $atts));
$request = 'http://u.nu/unu-api-simple?url=' . urlencode($url);
$short_url = file_get_contents($request);
	if (substr($short_url, 0, 4) == 'http')    {
		$name = empty($nombre)?$short_url:$nombre;
		return '<a href="'.$short_url.'">'.$nombre.'</a>';
	} else {
		$nombre = empty($nombre)?$url:$nombre;
		return '<a href="'.$url.'">'.$nombre.'</a>';
	}
}
add_shortcode('acortar', 'subzane_shorturl');

Para usarlo debemos escribir dos propiedades, la dirección (url) y el anchor text (nombre):

[acortar nombre="Mi Nuevo Blog" url=http://tengounenormeblog.blogspot.com/2008/08/mi-nombre-mas-largo-de-articulo-que-jamas-te-podrias-imaginar.html]

Como puedes ver toda esa dirección se acortara a una de u.nu, bastante útil.

5- Insertar videos de Internet fácilmente

Recuerdo cuando encontré un plugin que hacia esto automáticamente, nunca me interesé en desmantelarlo para aprender como funcionaba, ahora me encuentro con esto y lo recordé, funciona con shortcodes usando atributos. Simplemente necesitas conseguir el ID del video y la tendrás fácil.

function youtube($atts) {
 extract(shortcode_atts(array(
 "id" => 'idyoutube',
 "ancho" => '425',
 "alto" => '344'
 ), $atts));

 return '<object width="'.$ancho.'" height="'.$alto.'"><param name="movie" value="http://www.youtube.com/v/'.$id.'&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'.$id.'&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'.$ancho.'" height="'.$alto.'"></embed></object>';
 }

add_shortcode('yt', 'youtube');

Vamos a probarlo digamos con un video, escogeré un video de un trailer reciente (District 9), recuerda que en los videos, aunque pegues un código embed a la fuerza, si el que lo subió estableció que la incrustación esta deshabilitada, ni lo intentes. Para obtener el código sácalo así:

Ahora escribimos lo siguiente en nuestro articulo y asegúrate de escribir bien el ID:

[yt id="orCHFiWMgYo" ancho="540" alto="320"]

Ahora publicamos el articulo y veamos como ha quedado, si todo salió bien así esperamos algo como lo siguiente, recuerda que puedes obtener mas parámetros si configuras el color.

Te reto a que hagas lo mismo pero con los códigos embed de los servicios para subir videos restantes, como Vimeo, Dailymotion, Veoh y todos esos, todo salió bien así que no temas.

Se suponía que el video sería la canción “The Mechanix” de Megadeth pero me dio sueño buscarla de nuevo y mejor tome el primer trailer que tenia marcado a la mano, lo siento…

Ya acabo el articulo, siempre es bueno investigar mas sobre el tema, lo mas fácil que puedes hacer es buscar en google (si no sabes ingles no esperes mucho) las siguientes palabras: functions.php guide, shortcodes wordpress, wordpress codex, template tags, loop hacks wordpress.

Me tarde mucho haciendo esta guía así que agradecería su tweet y su comentario, ya se si tienen alguna pregunta de WordPress o de shortcodes, alguna opinión o proposición, insultos se valen pero justificados o los borro, esta vez si necesito viagra así que vendedores… bienvenidos.

Related posts:

1. Como crear una sección de autor en WordPress
2. Sobre la Universidad, el tiempo, el examen y un poco de la carrera que quiero estudiar
3. Como crear una Revista con Adobe InDesign