La Última Guía de Shortcodes de WordPress (con Ejemplos para Crear Sus Propios)

Los shortcodes de WordPress son una característica poderosa para hacer cosas geniales con poco esfuerzo. Puede hacer casi cualquier cosa con ellos. Con los shortcodes, la incorporación de elementos interactivos o la creación de diseños de página complejos es tan fácil como insertar una sola línea de código.

Si quiere añadir una galería, simplemente tiene que escribir el siguiente código:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Esto producirá una galería con los ID de las imágenes mencionadas. Tendrá 4 columnas y su tamaño máximo será ‘medio’ (según la definición de WordPress).

No hay necesidad de ningún código HTML feo.

Los shortcodes eliminan la necesidad de scripts complicados. Incluso si no tiene conocimientos de programación, puede añadir contenido dinámico sin esfuerzo con su ayuda.

Son muy populares entre los desarrolladores de WordPress, ya que ayudan enormemente a automatizar la creación de contenidos y diseños. Los shortcodes son para los desarrolladores de WordPress lo que los Macros son para los analistas de datos, o los atajos de teclado para los diseñadores gráficos profesionales.

En esta guía, aprenderá todo lo que hay que saber sobre los shortcodes. Descubrirá cómo trabajar con la API de shortcodes creando sus propios shortcodes. Al final, discutiremos el futuro de los shortcodes y donde encajan con el nuevo editor de Bloques de WordPress.

¿Emocionado? Vamos a empezar!

¿Qué es un Shortcode?

En pocas palabras, Shortcode = Atajo + Código.

Típicamente, los shortcodes usan etiquetas entre corchetes [] para definir cómo se usan. Cada uno de los códigos abreviados realiza una función particular en un centro. Puede ser tan simple como dar formato al contenido o tan complejo como definir toda la estructura del sitio web.

Por ejemplo, puede utilizar los atajos para incrustar deslizadores, formularios o tablas de precios. Incluso puede usarlos para crear plantillas de diseño de página reutilizables.

Una breve Historia de los Shortcodes

Los shortcodes se hicieron populares por primera vez gracias a un software de foros en línea llamado Ultimate Bulletin Board (UBB). En 1998, introdujeron el BBCode (Bulletin Board Code), una colección de etiquetas fáciles de usar para que los usuarios puedan dar formato a sus mensajes.

Como lenguaje de señalización ligero, BBCode opera con los mismos principios que HTML, excepto que es mucho más simple.

El uso de etiquetas predefinidas también es mucho más seguro, ya que los usuarios no pueden insertar código HTML e introducir vulnerabilidades de seguridad. Por ejemplo, un usuario con intenciones maliciosas podría utilizar la etiqueta <script> para ejecutar código JavaScript y romper la funcionalidad del sitio.

Poco después, otros programas de foros en línea como phpBB, XMB Forum y vBulletin añadieron la funcionalidad de BBCode en sus tableros de mensajes.

Los shortcodes permitieron a los administradores tener un mayor control sobre lo que sus usuarios pueden y no pueden hacer. Además, permitieron a los usuarios dar formato a su contenido mediante etiquetas simples.

Debido a las mismas razones de seguridad, WordPress impide que el código PHP se ejecute dentro del contenido del sitio. Para superar esta limitación, WordPress 2.5 introdujo la funcionalidad de los shortcodes en 2008 con el lanzamiento de la API de shortcodes. Ha demostrado ser una de las características más utilizadas por muchos desarrolladores de plugins y temas de WordPress.

¿Qué son los Shortcodes de WordPress?

Los shortcodes de WordPress son cadenas de corchetes ([ ]) que mágicamente se transforman en algo fascinante en el frontend. Ofrecen a los usuarios una forma fácil de crear y cambiar contenido complicado sin preocuparse por códigos HTML complejos o incrustados.

Los 2 Tipos de Shortcodes

Hay principalmente dos tipos de shortcodes en WordPress.

• Shortcodes de cierre automático: Estos no necesitan una etiqueta de cierre.

Ejemplo: El shortcode de la galería no necesita una etiqueta de cierre. Añadimos todo lo que necesita con diferentes atributos.

• Shortcodes de cierre: Estos necesitan una etiqueta de cierre. Los shortcodes de cierre generalmente manipulan el contenido entre las etiquetas de apertura y cierre.

Ejemplo: El shortcode caption (pie de foto) se utiliza para envolver un caption alrededor de cualquier contenido. Se utiliza principalmente para añadir un caption a las imágenes, pero funciona con cualquier elemento HTML.

Algunos shortcodes funcionan con o sin atributos. Depende de cómo se definan.

Los Shortcodes Predeterminados de WordPress

WordPress viene con 6 atajos predeterminados:

• • audio: Incrustar archivos de audio en su sitio web. Incluye controles de reproducción sencillos como Reproducir y Pausar.
  • caption (pie de foto):Envuelva los pies de foto con su contenido. Se utiliza principalmente para agregar subtítulos de imágenes, pero puede utilizarlo para cualquier elemento HTML.
  • embed : Ampliar la función oEmbed por defecto. Este atajo le permite establecer diferentes atributos para sus incrustaciones, como establecer sus dimensiones máximas.
  • galería : Inserte una simple galería de imágenes en su sitio. Puede utilizar atributos para definir qué imágenes se utilizan y personalizar el aspecto de la galería.
  • lista de reproducción : Muestre una colección de archivos de audio o vídeo con este atajo de cierre automático. Puede darle un modo ‘oscuro’ fresco con su atributo de estilo.
  • video: Incruste un archivo de vídeo y reprodúzcalo utilizando un simple reproductor de vídeo. Este atajo permite incrustar vídeos con estos formatos: mp4, webm, m4v, webm, ogv, wmv, flv.

Para más detalles acerca de cómo puede usar los atajos predeterminados y qué atributos soportan, puede consultar los documentos del Codex vinculados.

¿Cómo Usar los Shortcodes de WordPress?

El uso de shortcodes en WordPress es un proceso sencillo. Pero depende de dónde quiera añadirlos en su sitio. Asegúrese de leer la documentación de los shortcodes para entender cómo funciona. Aprenda los atributos que soporta, para que pueda obtener exactamente lo que desea.

Uso de Shortcodes de WordPress en Páginas y Mensajes

En primer lugar, vaya al editor de páginas/postes en el que desea insertar el shortcode.

Si utiliza el editor de Gutenberg, puede añadir la etiqueta de shortcode en el bloque independiente Shortcodes. Podemos encontrarlo en la sección de Widgets.

¿Sigue utilizando el Classic Editor (o el plugin)? Puede escribir sus etiquetas de shortcodes de la manera clásica. Unos pocos shortcodes pueden incluso tener un botón en la pantalla del editor para insertarlos fácilmente.

Uso de los Shortcodes de WordPress en los Widgets de la Barra Lateral

Los códigos cortos también pueden ser insertados en los widgets de la barra lateral. Para añadirlos, vaya a Apariencia » Widgets y añada un widget de Texto a la sección donde quiera añadir el atajo.

Pegue el shortcode dentro del widget de Texto y Guárdelo. Puede visitar el frontend de su sitio y ver la salida del shortcode en su barra lateral.

Nota: Las versiones de WordPress 4.8 y posteriores no soportan los shortcodes en los widgets de la barra lateral. Lea las Mejoras del Widget en la actualización de WordPress 4.9 para más información.

Uso de los Shortcodes de WordPress en la Cabecera y el pie de Página

Los shortcodes de WordPress están en general destinados a páginas, posts y widgets. Pero usted tiene una manera fácil de insertar los atajos en cualquier lugar de su sitio.

Digamos que quiere añadir un botón de llamada a la acción en su pie de página o en todos sus mensajes antes de la sección de comentarios. La función de devolución de llamada do_shortcode() es muy útil aquí.

Necesita añadir el siguiente código a los archivos header.php, footer.php o cualquiera de sus plantillas:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Esto hará que el shortcode salga en el lugar donde usted insertó el código.

Debe incluir los corchetes entre las comillas para que se haga referencia al shortcode. Incluir sólo su nombre no funcionará.

De la misma manera, puede utilizar la función de devolución de llamada do_shortcode() para habilitar los shortcodes en cualquier lugar de WordPress, como en la sección de comentarios.

Una rápida Introducción a la API de Shortcodes

La API de shortcodes de WordPress define cómo puede usar los shortcodes para personalizar y expandir la funcionalidad de su sitio. Permite a los desarrolladores crear contenido único (por ejemplo, formularios, carruseles, deslizadores, etc.) que los usuarios pueden añadir a sus sitios web pegando el shortcode correspondiente.

Puede agregar casi cualquier característica que pueda imaginar a su sitio web con la ayuda de los shortcodes.

API admite tanto el autocierre como el cierre. Maneja todo el análisis sintáctico complicado e incluye funciones de ayuda para establecer y recuperar los atributos predeterminados.

Gracias a  API, puede sumergirse directamente en el desarrollo y la personalización de los shortcodes, en lugar de perder un tiempo precioso en la definición de expresiones regulares para cada shortcode que haga.

Comprensión de los Fundamentos de API de Shortcodes

Cada vez que se abre una página o un post en WordPress, se buscan los shortcodes registrados mientras se procesa el contenido del sitio.

Si se encuentra un shortcode registrado, la API de shortcodes toma el control y devuelve la salida de los shortcodes. La cadena de salida devuelta sustituye a la etiqueta de shortcode en la ubicación en la que se añadió.

Se registra un shortcode en WordPress con la función add_shortcode(). Así es como se hace:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• • • shortcode_name: La etiqueta que buscará WordPress mientras analiza el contenido del mensaje. La API de shortcodes le recomienda utilizar sólo letras minúsculas, números y guiones bajos para definir su valor (evitar los guiones).
    • shortcode_handler_function: La función de devolución de llamada que se ejecutará después de que WordPress confirme la presencia de un shortcode registrado.

La función del manejador de atajos se define como tal:

function shortcode_handler_function( $atts, $content, $tag ){ }

• • • $atts: Un conjunto asociativo de atributos (es decir, un conjunto de pares clave-valor). Si no define ningún atributo, por defecto será un string vacío.
    • $content: El contenido adjunto, si está definiendo un atajo adjunto. Es responsabilidad de la función del manejador asegurarse de que el valor $content se devuelva a la salida.
    • $tag: El valor de la etiqueta del atajo (nombre_abreviado en el ejemplo anterior). Si dos o más códigos comparten la misma función de devolución de llamada (que es válida), el valor $tag le ayudará a determinar qué código abre la función del manejador.

La API analiza la etiqueta, los atributos y el contenido incluido (si lo hay) del shortcode, pasando por alto los valores a la función del manejador, que los procesa y devuelve una cadena de salida.

Esta cadena de salida sustituye a la macro de código abreviado en el frontend de su sitio. Lo que finalmente se ve en el navegador es esta salida.

¿Dónde Añadir sus Scripts de Shortcodes Personalizados?

Puede añadir sus scripts de atajos personalizados al archivo functions.php del tema o incluirlos en un plugin.

Si lo agrega a un archivo de tema, puede ejecutar la función add_shortcode() tal como está.

Pero si lo agrega a un plugin, le recomiendo que lo inicialice sólo después de que WordPress se haya cargado completamente. Puede asegurarse de ello envolviendo la función add_shortcode() dentro de otra función. Esto se llama una función de envoltura:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La función add_action() engancha la función shortcodes_init para que se dispare sólo después de que WordPress haya terminado de cargar (se llama el gancho ‘init’).

¿Cómo Crear un Shortcode Personalizado en WordPress (Nivel Principiante)

Ahora que hemos cubierto lo básico, es hora de crear un atajo personalizado.

Para seguir los pasos que se indican a continuación, es necesario estar familiarizado con el código PHP y con la edición de los archivos de temas de WordPress. Para cuando termine el tutorial, tendrás su primer atajo personalizado de WordPress listo para disparar.

Empezaremos con el atajo más simple posible y luego pasaremos a otros más complejos. Disfrute de sus cortos hitos en su camino hacia el dominio de los atajos!

Ejemplo 1: Uso del Shortcode [current_year]

Vamos a crear un atajo llamado [current_year] que da como resultado el año actual en su sitio web.

Este atajo es útil si está agregando contenido a su sitio web que necesita ser actualizado cada año. Por ejemplo, añadiendo un aviso de copyright en el pie de página de su sitio.

Usaré un plugin de barebones para añadir mis funciones de shortcodes. Puede añadirlo al archivo functions.php de tu tema y obtener los mismos resultados, pero no lo recomiendo. Sin embargo, está bien para probar y aprender!

Empecemos por crear un plugin. Cree una nueva carpeta en su directorio /wp-content/plugins/.

Voy a llamar a mi plugin «salcodes» pero puede llamarlo como quiera.

En el directorio de plugins de salcodes, cree un archivo PHP con el mismo nombre (salcodes.php). Una vez hecho esto, agregue la siguiente cabecera al archivo de su plugin:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Esta simple cabecera de plugin es lo suficientemente buena para nuestros propósitos. Puede obtener más información sobre los requisitos de encabezado de los plugins en el Codex de WordPress. Guarde este archivo y luego vaya a su panel de control de WordPress para activar el plugin.

Ahora, registremos el shortcode y su función de manejo. Para ello, añada el siguiente código a su archivo de plugin:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • La etiqueta @return en el comentario de PHP define el tipo de output de regreso. A continuación, una breve descripción de la misma.
    • current_year es la etiqueta o nombre abreviado. Esto define la etiqueta de autocierre que necesita añadir en su contenido, que en este caso sería [current_year].
    • salcodes_year es el nombre de la función del manejador de shortcodes que devolverá la cadena de salida. Definiremos esta función de devolución de llamada en las siguientes líneas. Ya que estamos creando un simple atajo de autocierre, no tiene que pasarle ningún valor de variable como $atributos, $contenido o $etiqueta.
    • salcodes_init es la función de envoltura que se engancha a ‘init’ para asegurarse de que el shortcode se registra y se ejecuta sólo después de que WordPress haya terminado de cargar. La función add_action() incorporada de WordPress lo hace posible.
    • getdate() es una función PHP que devuelve una matriz de información de fecha del timestamp actual. La clave del año contiene el valor del año en curso (como un string de 4 dígitos). Así, getdate()2024 devuelve el año actual. Esta salida es exactamente lo que queremos.

Guarde su archivo de plugin. Ahora es el momento de probar si el atajo funciona como se pretende.

Añada el código abreviado en cualquier parte de su sitio (página, post, widget de barra lateral, etc.). Lo estoy añadiendo al widget de texto de la barra lateral de mi sitio.

Y como era de esperar, funciona perfectamente.

Felicidades por haber alcanzado su primer hito!

El atajo que acaba de crear no tiene ningún $atributo o $variable de contenido asociado a él. Aprenderá a usarlos en los siguientes ejemplos.

Ejemplo 2: Shortcode para un Botón CTA

Vamos a crear un atajo de Botón CTA personalizable. Esto también se cerrará automáticamente (lo siento $contento, necesita aguantar hasta el próximo).

Quiero que los usuarios puedan personalizar el tamaño y el color del Botón CTA con los atributos del atajo.

Dado que el resultado final es un elemento de botón, sus atributos HTML como href, id, class, target & label pueden ser utilizados para personalizarlo con facilidad.

Puede usar los atributos id y class para dar estilo al botón ya que ambos son selectores comunes de CSS.

No voy a envolver mi función de controlador aquí para mantener las cosas simples de explicar.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, hay mucho que desempacar aquí. Le explicaré línea por línea, para que pueda entender cómo funciona.

• • • Hemos cubierto la función add_shortcode() y su funcionamiento en la sección anterior.
    • shortcode_atts() es una función de WordPress que combina los atributos de los shortcodes de usuario con atributos conocidos. Rellene los valores por defecto cuando es necesario (que también puede configurar usted mismo). El resultado será un array que contiene cada tecla de los atributos conocidos, fusionados con los valores de los atributos de los atajos definidos por el usuario.
    • Dentro de la función de manejo de shortcodes, definimos una variable ($a) y la asignamos al array devuelto por shortcode_atts(). Asignamos a los atributos sus valores por defecto con la sintaxis: ‘atributo’ => ‘valor por defecto’. Por ejemplo, en el código anterior, estamos estableciendo el valor por defecto del atributo label a Button con la sintaxis ‘label’ => ‘Button’.
    • Podemos extraer los valores de cada clave de atributo con la sintaxis de PHP para matrices: $a[‘attribute’].
    • La variable $output almacena el código HTML del elemento botón (<a> etiqueta con clase ‘botón’). Es la cuerda que finalmente es devuelta por la función.

Si desea establecer el enlace predeterminado como la URL de la página de inicio del sitio, puede utilizar la función home_url() de WordPress.

Intentemos usar el atajo tal cual, sin atributos definidos, y veamos qué es lo que sale.

Si se pregunta para qué sirven los corchetes dobles ([[cta_button]]), se llaman atajos de escape. Le ayudan a imprimir cualquier shortcode registrado en su sitio como texto regular, como en la imagen de abajo.

Los usuarios pueden personalizar el tamaño y el color del botón con el atajo. Ya hemos establecido sus valores por defecto en la función del handler, pero tenemos que registrar y encolar la hoja de estilos a la lista de recursos disponibles. Esta hoja de estilo debería tener todas las clases definidas en el shortcode.

También puede establecer estas clases en la hoja de estilo global de su tema, pero se recomienda cargarlas por separado. Esto asegura que aunque cambie o actualice su tema de WordPress, estas clases seguirán cargándose junto con el shortcode.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La función salcodes_enqueue_scripts() define la variable global $post, y luego confirma dos condiciones mediante:

• • • is_a(): comprueba si $post es una instancia del objeto WP_Post. Se refiere a todos los tipos de post en WordPress.
    • has_shortcode(): comprueba si el contenido del post contiene el atajo [cta_button].

Si ambas condiciones son verdaderas, la función registra y pone en cola la hoja de estilo style.css incluida en la carpeta CSS. La función plugin_dir_url( $fichero ) facilita la obtención de la URL del directorio del plugin.

No le mostraré el código CSS aquí, pero puede encontrarlo en el código fuente enlazado al final de esta sección.

Finalmente, probemos el atajo [cta_button] añadiéndolo al contenido del post:

La imagen de abajo muestra cómo se ve el Botón CTA en la parte delantera:

Ahora que ha aprendido a definir atributos personalizados y a incluir estilos, puede añadir otras funciones al shortcode del Botón CTA. Por ejemplo, puede dar a sus usuarios la opción de añadir animaciones, efectos de vuelo y otros estilos de botones.

Ejemplo 3: Shortcode Utilizando el Contenido $

Para nuestro ejemplo final, construyamos un atajo de cierre llamado [boxed] que muestra cualquier contenido entre sus etiquetas en una caja con títulos coloridos.

Comencemos registrando el atajo y definiendo su función de manejador.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• • • $content = null : registra el código abreviado como un tipo de cierre. Puede usar la variable $content dentro de la función de su handler para cambiar su salida como quiera.
    • $tag = » : esto define la variable $tag del atajo. No es necesario en este ejemplo, pero es una buena práctica incluirlo.

En este ejemplo, modificamos el contenido utilizando estilos CSS en línea.

Los estilos de las clases que se utilizan dentro del atajo se registran y se ponen en cola como hicimos en el ejemplo anterior del atajo.

Pero el hecho de tener dos shortcode que usan la misma hoja de estilo significa que tiene que cargarla si se usa cualquiera de ellos. Por lo tanto, vamos a actualizar la función salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• • • $has_shortcode: una variable definida por el usuario que comprueba si alguno de los shortcode existe en la página/correo. El || (operador OR) lo hace posible.

Ahora, tomemos nuestro atajo [boxed] para dar una vuelta.

La siguiente captura de pantalla muestra la salida que obtenemos.

Ahora que ha aprendido a hacer sus propios atajos, puede pensar fuera del  [box] y darles su propio giro. No se olvide de compartir sus creaciones con nosotros!

Si quiere, puede descargar el código fuente del Shortcode Plugin desde aquí.

Los Shortcodes de WordPress: Pros y Contras

Los Pros

• • • Los shortcodes simplifican la adición de características complejas en los sitios de WordPress. Puede añadir casi cualquier cosa escribiendo una sola línea de código.
    • Los shortcodes automatizan el flujo de trabajo de desarrollo. Eliminan la necesidad de escribir scripts complejos cada vez que se desea insertar una determinada característica.
    • Los shortcodes son más fáciles de usar que añadir código HTML o scripts PHP.
    • Los shortcodes pueden ser incluidos dentro de los plugins. Incluso si actualiza WordPress o cambia/actualiza su tema, los shortcodes seguirán siendo válidos y continuarán funcionando como antes.
    • La agrupación de los shortcodes dentro de los plugins hace que sean fáciles de usar en varios sitios web de WordPress. Si es un desarrollador que maneja muchos sitios, tener todos sus atajos personalizados listos para usar es un salvavidas.
    • Dado que los atajos también aceptan atributos, los usuarios pueden modificar cómo se comporta el mismo atajo con sólo alterar sus opciones de atributos.

Los Contras

• • • Los shortcodes no son intuitivos de usar para el usuario final, especialmente si muchos de ellos se usan en una página. En estos casos, son más adecuados para los desarrolladores.
    • Es difícil saber lo que hace un atajo con sólo mirarlo. El equipo central de WordPress los ha llamado acertadamente «códigos de incrustación de carne misteriosa» por esta misma razón.
    • Los shortcodes que vienen empaquetados con los temas dejarán de funcionar si cambia de tema.
    • Los shortcodes son ambiguos en cuanto a su sintaxis. Por ejemplo, algunos de ellos admiten el cierre opcional, por lo que puede utilizarlos como autocierre o cierre o incluso ambos si están anidados. Puede adivinar cómo puede volverse súper confuso súper rápido.
    • Los shortcodes pueden romper el HTML debido a etiquetas conflictivas o problemas de interoperabilidad. Nunca es bueno verlos en la fachada de ningún sitio.
    • Los shortcodes añaden una carga extra a su servidor. A medida que aumenta el número de accesos directos en su página/posts, también aumenta esta carga. Demasiados shortcodes pueden hacer que su sitio web se rastree (por ejemplo, el resultado de la mayoría de los creadores de páginas).

Shortcodes y Bloques de Gutenberg

La introducción de Gutenberg redujo la conveniencia de las deficiencias. Los usuarios pueden ahora añadir bloques directamente desde la interfaz del editor, en lugar de tener que ocuparse de las marcas de los shortcodes, sin importar lo simple que sea.

Y si quiere añadir shortcodes, Gutenberg incluso viene con un bloque dedicado a añadir shortcodes. Los bloques son los nuevos shortcodes.

«Si pudo hacerlo con un shortcode, puede hacerlo como un bloque.» – James Huff, Ingeniero de Felicidad de Automattic

Eso explica por qué todos los shortcodes populares se están convirtiendo en bloques. Muchos desarrolladores de WordPress se han inclinado por hacer que sus productos y servicios funcionen exclusivamente con el editor de bloques (Gutenberg).

Pero eso no significa que sea el fin del mundo para los shortcodes. El equipo central de WordPress ha prometido muchas mejoras en el editor de bloques, que se pueden ver en Twenty Twenty, pero hasta entonces, ¡los shortcodes están aquí para quedarse!

Resumen

Añadir funcionalidad compleja en cualquier lugar de su sitio de WordPress es fácil con los shortcodes. Ofrecen a los usuarios etiquetas fáciles de escribir que se pueden utilizar sin preocuparse por el uso de códigos complejos.

Aunque puede que no haya atajos en la vida, seguro que hay muchos shortcodes para usar en WordPress. Mis favoritos son Shortcodes Ultimate y Shortcodes de Angie Makes.

Y si no puede encontrar el que busca, puede crear uno usted mismo.

Incluso puede tomar un atajo para crear su shortcode personalizado usando el plugin Shortcoder. Se encarga de todo lo esencial para usted. Y recuerde: la vida es corta, ¡utilice los shortcodes!