Párate a pensar en los contenidos que se repiten en tu web. Quizá uses frases para hacer una llamada a la acción al terminar un post, el número de suscritos a tu newsletter o un banner para que se apunten a tu curso gratuito.

Cada vez que redactas un post (o una página) tienes que volver a crear ese contenido que ya tienes creado. Esto supone una pérdida de tiempo importante. Además, sabes que ese trabajo ya lo hiciste, por lo que mentalmente te supone una frustración tener que repetirlo.

¿No sería maravilloso poder añadir ese contenido en cualquier sitio con simplemente insertar un código? Así tú podrías dedicarte a seguir generando contenidos de calidad en vez de tener que estar volviendo a crear el mismo.

¡Estás de enhorabuena! Esto se puede hacer gracias a los shortcodes.

Vamos a verlo.

 

Qué es un shortcode

Un shortcode es un código abreviado que puedes insertar en el editor de tu web para añadir funcionalidades al contenido de tu página sin necesidad de tener que insertar lenguaje de programación.

Dicho de otra forma, es una etiqueta (tag) que llama a un script para que se ejecute en el lugar en el que la pongas. Los shortcodes funcionan como las etiquetas HTML, con la diferencia de que en vez de usar los símbolos de menor y mayor que (<>) van entre corchetes.

Tendría un aspecto de este tipo: [shortcode id=‘1’]

El término “shortcode” es el nombre del mismo y puede ser el que elijamos o el que venga predeterminado si utilizamos algún plugin. La ID es el identificador de cada shortcode. Es único, como si fuera su documento de identidad.

Hay shortcodes que incorporan contenido y requieren de una etiqueta de cierre. Estos no tienen identificador, ya que su función es dar formato al contenido.

Su aspecto es de este estilo: [shortcode]Contenido[/shortcode]

Por ejemplo, el plugin de captación de suscriptores Thrive Leads, utiliza shortcodes con este formato: [thrive_leads id=’157’]

Se podría definir un shortcode como un acceso directo a un script PHP, que es una porción de código en dicho lenguaje de programación. Una vez ejecutado, no se muestra el shortcode sino la función que contiene el script, bien sea un texto, un botón o un banner.

El código que añaden los shortcodes es HTML y CSS, que son lenguajes de marcado que transforman el contenido dinámico del script en contenido estático. Te pongo un ejemplo:

Si creo un shortcode y lo vinculo con mi proveedor de email marketing a través de su API, puedo mostrar en tiempo real en mi blog el número de suscriptores que tengo. Añado la función en mi página y luego inserto el shortcode en el footer. De este modo, el script crea un contenido dinámico (el número de suscriptores varía) y el shortcode lo transforma en contenido estático (ahora tengo 1.237 suscriptores). Mañana el resultado podría ser distinto. El shortcode muestra el resultado que le da el script.

Los shortcodes tienen bastante semejanzas en su funcionamiento con las etiquetas HTML. Esto se refleja en que pueden utilizar atributos. Por ejemplo, puedes hacer que un nombre propio se muestre negrita.

También puede anidarse, por lo que puedes establecer una jerarquía entre ellos y aplicar uno dentro de otro.

Con una sola línea de código puedes añadir funcionalidades como tablas, botones personalizados, carruseles de imágenes, recuadros, contenido multimedia, etc.

 

Cómo usar los shortcodes en WordPress

Desde la versión 2.5, WordPress incorpora la API de shortcodes para que cualquier usuario de la plataforma pueda añadir funciones a través de códigos desde el propio panel de control sin necesidad de conocimientos sobre programación.

Esta potente herramienta facilita mucho la configuración de ciertos parámetros y permite mostrarlos en cualquier sitio de tu web (posts, páginas, widgets, etc.) solamente con añadir el shortcode correspondiente.

Para ello, WordPress emplea los hooks, que son lugares del núcleo de este CMS en los que se pueden añadir o modificar sus funcionalidades.

Los ‘hooks’ pueden insertarse en el archivo functions.php (siempre en el tema hijo para no perder los cambios) o a través de un plugin de funcionalidades.

El archivo functions.php es delicado y un error puede hacer que tu web deje de funcionar. Crear un plugin no es complicado pero requiere cierta destreza y no tener miedo a tocar código. Por eso hay una tercera opción: utilizar un plugin.

Antes de recomendarte uno, debes saber que el plugin hace lo mismo que harías manualmente pero tú ni te enteras. Los pasos para crear un shortcode son:

• Crear la función primaria PHP
• Vincular dicha función a WordPress mediante el conector add_shortcode
• Insertar el shortcode donde quieras

En realidad, el último paso no es para crear el shortcode, sino para mostrarlo. Tendrás que hacerlo utilices plugin o no. Este código abreviado será reemplazado automáticamente por la función que has creado.

WordPress incorpora sus propios shortcodes por defecto. Permiten ejecutar algunas funcionalidades básicas del core, como insertar un audio o una galería de fotos.

Para ello, basta con ir a la sección de tu página donde quieras insertar el contenido y escribir el shortcode correspondiente. Por ejemplo, para añadir un audio en un post, accede al editor de entradas y añade el término:

Podrías hacer lo mismo con los shortcodes:

 

Cómo crear un shortcode en WordPress

Como has visto, WordPress ya trae algunos shortcodes incorporados, sin embargo, no tienes porqué limitarte a esos sino que puedes añadir muchos más.

Esta tarea la puedes hacer de dos maneras: utilizando un plugin o añadiendo código.

WordPress viene preparado para que cualquier desarrollador, mediante un plugin o theme, pueda registrar en una instalación sus propios shortcodes y utilizarlos desde el propio editor.

Para cubrirte las espaldas y evitar  problemas, es recomendable contratar un hosting que ofrezca soporte técnico especializado en WordPress. Además, para evitar que un error se convierta en irreparable, es imprescindible contar con copias de seguridad automáticas. Así, por mucho que se tuerzan las cosas, siempre podrás volver atrás.

 

Crear un shortcode en WordPress con un plugin

Existen muchos plugins que añaden packs de shortcodes preconfigurados con los que puedes mejorar el aspecto de tu página web insertando nuevos elementos visuales.

Los hay gratis y de pago. De los plugins gratuitos, el más potente y conocido es Shortcodes Ultimate, que cuenta con más de 800.000 instalaciones activas y una valoración de 4,9 estrellas sobre 5.

Esta extensión de Vladimir Anokhin es un auténtico cajón de sastre en el que puedes encontrar más de 50 shortcodes preparados para optimizar tanto la estética como la funcionalidad de tu web. Además, puedes añadir más a través de addons.

Permite insertar botones, cabeceras, pestañas, columnas, acordeones, divisores, cajas, etc.

A cada elemento se le pueden añadir iconos y cambiar su posición, color y tamaño.

La personalización alcanza su máximo esplendor con la incorporación de un editor de shortcodes con el que puedes insertar los de tu propia cosecha y un editor de CSS.

Es 100% responsive y compatible con el editor Gutenberg.

Una vez instalado y activo, aparecerá un nuevo botón en el editor de WordPress. Con el editor clásico, se ve a simple vista.

Al hacer clic, se abre una ventana emergente en la que se encuentran todos las funcionalidades que puedes añadir.

Los filtros no son del todo precisos. Si selecciono contenido, no aparece la opción ‘Nota’, algo que llama la atención.

En Gutenberg, hay que seleccionar la opción “Clásico” dentro de la navegación por bloques.

Una vez hecho este paso, sale la opción en la esquina superior derecha del bloque.

Además, en el menú lateral de tu panel de control, tienes una nueva pestaña llamada “Shortcodes” desde la que puedes configurar el plugin y crear nuevos shortcodes para insertarlo donde quieras. Por ejemplo, puedes crear uno para añadirlo en un widget.

Como ejemplo, voy a crear un texto que invite a compartir en las redes sociales. De este modo, cada vez que publique un post, solo tengo que añadir este shortcode al final.

Para ello, voy al menú lateral “Shortcodes” y elijo la opción Nota.

Aparece una ventana con el shortcode que tengo que copiar y las instrucciones para cambiar los parámetros de color y el contenido.

Así que copio y pego ese código en un widget del tipo ‘Texto’ y modifico el contenido. Sustituyo “Texto de cabecera” por la frase que he elegido: Gracias por llegar al final. Si te ha gustado, comparte 😉.

Este es el resultado.

Con Shortcodes Ultimate podrás mejorar el aspecto de tu sitio web de forma rápida y sencilla.

Crear un shortcode en WordPress sin plugins

Si tienes conocimientos técnicos puedes optar por crear un shortcode mediante código.

Para ello, tienes que utilizar lenguaje PHP y crear una función. Si te atreves con este método pero no eres muy ducho en el tema, puedes buscar funciones concretas en Internet o pedirle a alguien que te ayude.

Una vez que tengas la función preparada, llega el momento de incorporarla a tu web.

En primer lugar, ve al archivo de funciones de tu tema hijo (functions.php). Suele estar en la ruta /wp-content/themes/temahijo/functions.php Por el contrario, si has optado por crear un plugin de funciones (o ya tienes uno), añade ahí tu función.

Ahora, voy a hacer lo mismo que antes, un texto que invite a compartir en las redes sociales. Esta vez de forma manual.

El código sería el siguiente:

Te explico el código:

• El término ‘function’ es la función en PHP
• El nombre del shortcode es ‘redes’
• El término ‘add-shortcode’ estamos vinculado la función con el shortcode ‘redes’

Recuerda guardar los cambios.

Por último, solo falta incorporar el shortcode [redes] que acabo de crear donde te apetezca. Por ejemplo, en un widget a pie de página.

Guardas los cambios y ya debería mostrarse la frase.

Obviamente, esa frase tiene sentido al final de un post y no tanto en un widget lateral. Es un ejemplo para que veas las posibilidades que tiene usar estos códigos cortos.

El uso que hagas de él, depende de tu imaginación.