Cómo crear códigos cortos de WordPress y trabajar con ellos

Los códigos cortos de WordPress son pequeñas etiquetas que se utilizan como atajos para ejecutar funciones específicas en las entradas y páginas. Puedes reconocer los shortcodes por los corchetes que rodean una simple palabra o una frase. Se introdujeron en la versión 2.5 con la misión de ayudar a la gente a ejecutar funciones de forma sencilla.

Como ya debes saber WordPress utiliza el lenguaje de programación PHP para impulsarse. Por lo tanto, cuando quieras añadir una función específica directamente a las publicaciones y páginas, tendrás que escribir el código en el editor de texto. En cambio, los shortcodes permiten a los usuarios sustituir todo el bloque de código por un simple término y ejecutarlo con sólo publicar un post. Increíble, ¿verdad?

Cómo utilizar los códigos cortos de WordPress

Para utilizar los shortcodes, no hay que saber codificar ni entender cómo funcionan en el backend. El propio WordPress, así como la mayoría de los temas y plugins de WordPress, utilizan diferentes códigos cortos para permitir el uso de muchas funciones avanzadas.

Por ejemplo, para mostrar toda la galería de imágenes, sólo tienes que utilizar

Parámetros del código corto

La mayoría de las veces, los códigos cortos pueden tener parámetros adicionales. Al añadirles información adicional, puedes personalizar y cambiar la salida. Por ejemplo, mientras que el trivial

Además, es posible definir el tamaño de la galería, y muchas otras cosas proporcionando parámetros adicionales. Aquí tienes un ejemplo:

La galería de este ejemplo mostraría sólo las imágenes con los números de identificación especificados. En este caso, el tamaño se cambiaría automáticamente a mediano. Y todo eso lo consigues con un simple shortcode. Ahora imagina cómo sería todo si tuvieras que añadir manualmente el código PHP, que tendría decenas, si no cientos, de líneas. ¡Gracias, shortcodes!

Etiquetas de inicio y fin

Por ejemplo, un plugin de Google Maps puede permitirte mostrar una ubicación en los mapas a través del shortcode. La mayoría de estos plugins tendrán etiquetas de inicio y fin, mientras que la dirección debe escribirse en medio. Aquí tienes un ejemplo:

[[maps]]Nueva York, EE.UU[[/maps]]

Como puedes ver en el ejemplo, la etiqueta final siempre empieza con el signo de barra "/". Al tener ambas etiquetas, WordPress puede identificar las partes de los códigos cortos más fácilmente.

Trabajar en el editor de texto

Aunque sólo son accesos directos a funciones, los shortcodes son en realidad criptogramas específicos de WordPress por sí mismos. Así, si intentas escribir un shortcode en el editor visual, WordPress te mostrará inmediatamente la salida (o sólo el marcador de posición) de ese shortcode. Si siguieras el ejemplo de la galería y escribieras el shortcode en el editor visual, verías que WordPress muestra inmediatamente su contenido (mira la primera imagen de este post para ver cómo funciona).

Códigos cortos predeterminados de WordPress

Los shortcodes suelen ser gestionados por temas y plugins. Cada desarrollador registra los shortcodes por su cuenta, por lo que cada uno es diferente. Lo que hace un shortcode, cuáles son sus parámetros y funciones, depende exclusivamente del plugin y del tema específico que estés utilizando.

Por ejemplo, un plugin que te ayuda a mostrar una ubicación en Google Maps puede tener [[maps]]shortcode, uno que muestre los formularios de suscripción utilizará [[form]]y así sucesivamente.

Sin embargo, WordPress viene con un conjunto de códigos cortos por defecto que puedes utilizar sin necesidad de instalar extensiones adicionales. Por defecto, son códigos cortos con los que puedes trabajar:

Escapar los shortcodes (mostrar el texto de los shortcodes sin ejecutarlo)

A veces, puedes querer mostrar el texto que representa un shortcode en lugar de ejecutarlo. Si has intentado añadir un shortcode tanto en el editor de texto como en el visual, te habrás dado cuenta de que se ha ejecutado en ambas ocasiones.

Si quieres mostrar un shortcode con etiquetas de inicio y fin, utiliza sólo el primer y el último corchete doble [[maps]Nueva York, EE.UU[/maps]]

Cuando trabajes en el editor de texto, también puedes sustituir los corchetes por sus códigos. Así, en lugar de "[” you can use “[”, and instead “]" utiliza "]". Por ejemplo [shortcode]; mostrará el shortcode también sin ejecutarlo.

Cómo crear un shortcode sencillo

Cuando escribes artículos en WordPress a diario, hay veces que te repites y tienes que escribir algo una y otra vez. No importa si se trata de la URL de un sitio web, una frase larga o tal vez un trozo de código HTML que escribes constantemente desde cero, deberías considerar la posibilidad de escribir un shortcode para ello.

Y con esta sencilla función, no tienes que ser un programador o ni siquiera contratar a uno para que te simplifique las cosas. Sigue los siguientes pasos y hazte un shortcode personalizado:

1. Abre el archivo function.php en el menú Apariencia -> Editor
2. Coloca el siguiente código al final del archivo:

function fsg_shortURL() {
return 'http://www.firstsiteguide.com';
}
add_shortcode('fsg', 'fsg_shortURL');

Go to Text Editor and type [fsg] to get the URL instead of the shortcode
It wasn’t that hard, right?
More advanced example: Add image shortcode
By placing the following code in the functions.php, you can create the shortcode for placing an image with custom width and height attributes:
Go to functions.php file
Paste the following code:
function img_shortcode( $atts , $content = null ) {

	extract( shortcode_atts(
		array(
			'width' => '',
			'height' => '',
		), $atts )
	);
return '';
}
add_shortcode( 'img', 'img_shortcode' );
Open Text Editor:
Here you can use [img width=’x’ height=’y’] http://… [/img] shortcode where “x” and “y” are numbers which represent width and height in pixels.
You can easily add other image attributes if you need any; check out the list of all image attributes on W3 Schools.
How to use shortcodes in Text Widget
With WordPress version 4.9 that has been released on November 15th, 2017, shortcodes automatically work in Text Widgets. But if you’re still using an older version of WordPress, this part of the tutorial will help you get the result.
Shortcodes can contain different functionalities that you can add to your WordPress website. Whether you have created one for yourself or it came with a theme or a plugin you’ve just installed, you will be probably using shortcodes all the time. Since you can really save time and benefit from them, there isn’t a reason not to use shortcodes.
If you have just started building your WordPress website, you may have used shortcodes only in the Post editor. But, the truth is that you can use shortcodes practically anywhere.
For example, if you are using 5sec Google Maps PRO plugin which allows you to effortlessly create maps with numberless pins on it, you may want to insert the map via shortcode directly in your Text Widget and show your location on the sidebar instead of a single post. But if your theme doesn’t support shortcodes in widgets, you will need to enable the function by yourself and that’s what we’re going to show in this article.
If you need to use a shortcode in your PHP files (for example, if you want to run the code in your header.php file and run the shortcode wherever the header is present), you can do that easily by wrapping the code around it. But if you have tried to use a shortcode in your Text Widget like in the example we have mentioned above, you ended up disappointed because that simply doesn’t work and the widget displayed the shortcode instead it’s content. Unless your theme already has the feature registered, you will need to enable it by yourself.
So, if you want to be able to put a shortcode into a Text Widget and make it run, don’t worry; you can make it happen in a matter of seconds:
Open functions.php
Copy and paste the following two lines:
add_filter( 'widget_text', 'shortcode_unautop');
add_filter( 'widget_text', 'do_shortcode');

Guarda los cambios

Aunque en realidad es suficiente con utilizar sólo la segunda línea que hace funcionar el shortcode, querrás la primera línea para evitar que WordPress inserte automáticamente las etiquetas de párrafo y de ruptura cuando crees inconscientemente saltos de línea al formatear el texto en un widget. Por si acaso, pon un shortcode en una línea separada, unautop eliminará esas etiquetas de párrafo y el shortcode funcionará a las mil maravillas.
Ahora puedes navegar a Apariencia -> Widgets y arrastra el Widget de Texto donde quieras que esté. Después de todo esto, cuando escribas un shortcode directamente en tu Widget de Texto (que está registrado en tu sitio, por supuesto) se ejecutará igual que si lo hubieras escrito en el Editor de Mensajes.
Del mismo modo, puedes ejecutar código PHP desde tu Widget de Texto. Ha sido bastante fácil, ¿verdad? Disfruta de tus códigos cortos.
Los códigos cortos están por todas partes
Si estás empezando un blog de WordPress, los shortcodes pueden parecer redundantes y difíciles de entender. La mayoría de las veces será posible evitar los shortcodes utilizando una interfaz fácil de usar proporcionada por un plugin. Pero cuando te involucres más con el blog, y cuando empieces a utilizar más plugins, comprenderás el verdadero poder de los shortcodes.
Utilizarlos se convertirá en una rutina, y te acostumbrarás rápidamente a escribir corchetes en cada nuevo post que crees. Así que tómate unos minutos y utiliza este artículo para aprender lo básico.