Imagínese esto: está añadiendo una galería de 20 imágenes a un artículo. Sin shortcodes, eso supone decenas de líneas de HTML con contenedores, clases, atributos de datos y enlaces de miniaturas. Con un shortcode, es una sola línea: [gallery]. Fue precisamente por este contraste entre el volumen rutinario y los resultados que WordPress 2.5 introdujo los shortcodes, y casi dos décadas después, el mecanismo sigue siendo indispensable.

El problema es que la mayoría de los usuarios o bien temen los shortcodes como «magia de programador» o los copian a ciegas sin entender la sintaxis. Mientras tanto, un solo shortcode personalizado puede reemplazar un plugin de cuarenta megabytes o ahorrar una hora de trabajo rutinario al mes. Este desglose, desde los integrados [gallery] y [audio] hasta su propio shortcode en functions.php, le dará un control completo sobre la herramienta.

💡 Resumen rápido:

• Qué es un shortcode: una etiqueta entre corchetes que WordPress reemplaza con el resultado de una función PHP al cargar una página.
• Shortcodes integrados: gallery, audio, video, caption, embed y playlist funcionan justo después de instalar WordPress, sin plugins.
• Parámetros de shortcode: la sintaxis key="value" le permite personalizar la salida sin cambiar el código.
• Crear su propio shortcode: desde un simple reemplazo de URL hasta un shortcode de imagen con atributos, código PHP listo para functions.php.
• Shortcodes en widgets y plantillas: cómo habilitar el soporte con una línea y dónde resulta útil.

Qué es un shortcode y cómo funciona

Un shortcode es una etiqueta breve entre corchetes que WordPress reemplaza con el resultado de ejecutar una función PHP en el momento en que se renderiza una página. Usted escribe [gallery] en el editor, los visitantes ven una cuadrícula ordenada de imágenes. No hay magia: detrás de cada shortcode hay una función registrada mediante add_shortcode() en el núcleo, el tema o un plugin.

La diferencia clave frente a las inserciones de HTML estático: un shortcode se ejecuta en el lado del servidor. Usted le pasa parámetros y el resultado se genera dinámicamente. El contenido cambia, la salida cambia, sin editar manualmente docenas de páginas.

Desde la perspectiva del editor, hay un matiz. El editor visual (Gutenberg o el clásico TinyMCE) renderiza inmediatamente el shortcode como vista previa, así que para trabajar con parámetros y etiquetas anidadas, cambie al modo de texto. Solo allí puede ver la estructura real: etiqueta de apertura, atributos, contenido, etiqueta de cierre.

Shortcodes integrados de WordPress: qué hay disponible sin plugins

WordPress viene con seis shortcodes registrados. No necesita habilitarlos ni configurarlos, solo insértelos en una entrada y obtenga resultados.

El más flexible entre ellos es [gallery]. El atributo ids le permite especificar imágenes concretas por ID, incluso aquellas no adjuntas a la entrada actual. El atributo size establece el tamaño de la miniatura (thumbnail, medium, large o full). La combinación de estos dos parámetros cubre la mayoría de los escenarios para los que antes se instalaba un plugin de galería independiente.

[audio] y [video] admiten múltiples fuentes, el navegador elegirá un formato compatible. Las listas de reproducción mediante [playlist] se ensamblan a partir de IDs de archivos adjuntos de forma similar a una galería, pero muestran un reproductor con cambio de pista.

Parámetros de shortcode: cómo controlar la salida

La mayoría de los shortcodes aceptan atributos en formato key="value". Sustituir valores cambia la lógica de la función sin interferir en el código.

Tomemos [gallery]. Sin parámetros, muestra todas las imágenes de la entrada en tamaño estándar. Añada especificaciones:

1
[gallery ids="12,34,56" size="large" columns="3"]

Ahora la salida se limita a tres imágenes especificadas, el tamaño se aumenta a large y la cuadrícula se organiza en tres columnas. Los parámetros pueden combinarse arbitrariamente, aquellos no especificados reciben valores predeterminados.

Algunos shortcodes usan etiquetas de apertura y cierre cuando es necesario pasar contenido entre ellas. Por ejemplo, un plugin de Google Maps podría esperar una construcción como:

1
[maps]New York, USA[/maps]

La etiqueta de cierre siempre comienza con una barra diagonal /. WordPress usa esta notación para distinguir el contenido entre etiquetas de los atributos dentro de la etiqueta de apertura.

Cómo crear su propio shortcode

Cuando ha insertado la misma URL, bloque HTML o llamada a la acción en artículos por décima vez en una semana, es momento de escribir un shortcode. Esto no requiere ser desarrollador PHP: la construcción básica cabe en tres líneas.

Shortcode simple para URL

Añada este código al final del archivo functions.php de su tema (Apariencia → Editor de temas → functions.php):

1
function techblog_short_url() {
2
    return 'https://techblog.sdstudio.top';
3
}
4
add_shortcode( 'techblog', 'techblog_short_url' );

Ahora, en cualquier entrada, [techblog] se reemplazará automáticamente por la URL del sitio. La función devuelve una cadena, WordPress la sustituye en lugar del shortcode.

Dos reglas de importancia crítica de la documentación oficial:

• La función devuelve un valor mediante return, no lo imprime con echo. La salida directa rompe el orden de renderizado y provoca resultados inesperados.
• Registre los shortcodes en el hook init para que WordPress tenga tiempo de cargar todas las dependencias:

1
add_action( 'init', 'techblog_register_shortcodes' );
2
function techblog_register_shortcodes() {
3
    add_shortcode( 'techblog', 'techblog_short_url' );
4
}

Shortcode para imagen con atributos personalizables

Un escenario un poco más complejo: usted quiere insertar una imagen, definiendo el ancho y el alto directamente en el editor. En functions.php:

1
function techblog_img_shortcode( $atts, $content = null ) {
2
    $atts = shortcode_atts(
3
        array(
4
            'width'  => '',
5
            'height' => '',
6
        ),
7
        $atts,
8
        'img'
9
    );
10
    return '<img src="' . esc_url( $content ) . '" width="' . esc_attr( $atts['width'] ) . '" height="' . esc_attr( $atts['height'] ) . '" alt="" />';
11
}
12
add_shortcode( 'img', 'techblog_img_shortcode' );

Uso en el editor:

1
[img width="800" height="600"]https://example.com/photo.jpg[/img]

La función shortcode_atts() combina los atributos pasados con los valores predeterminados; esta es la forma estándar y segura de manejar parámetros. Observe esc_url() y esc_attr(): el escapado es obligatorio al mostrar datos ingresados por el usuario en el frontend. Una lista completa de los atributos de imagen disponibles se encuentra en la especificación del W3C.

Merece una mención aparte la validación de atributos. Cuando usted acepta valores desde el editor y los inserta en HTML, verifique siempre los tipos de datos. Para atributos numéricos como width y height, use intval(); esto eliminará cualquier letra accidental. Para cadenas de texto, defina un conjunto permitido de valores mediante in_array(), por ejemplo, los tamaños de miniatura (thumbnail, medium, large). De este modo, la maquetación se mantiene intacta y los resultados en el frontend serán predecibles, incluso si el autor comete un error en el valor del atributo.

Shortcodes en widgets de texto y archivos PHP

Desde la versión de WordPress 4.9 (noviembre de 2017), los shortcodes funcionan automáticamente en los widgets de texto. Pero si usted usa un tema personalizado sin soporte incorporado, puede activarlo con una línea en functions.php:

1
add_filter( 'widget_text', 'do_shortcode' );

Para evitar la inserción automática de etiquetas <p> y <br> alrededor del shortcode en un widget (WordPress da formato automático a los saltos de línea), añada también:

1
add_filter( 'widget_text', 'shortcode_unautop' );

El mismo principio funciona para las plantillas PHP. Si necesita ejecutar un shortcode directamente en header.php u otro archivo del tema, envuélvalo en do_shortcode():

1
echo do_shortcode( '[techblog]' );

De esta manera, la misma lógica está disponible en el editor, el widget y la plantilla, sin duplicar código.

Cómo mostrar el texto de un shortcode sin ejecutarlo

A veces necesita no ejecutar un shortcode, sino mostrar su sintaxis al lector, como en este artículo. Si simplemente inserta [gallery] en el editor, WordPress lo ejecutará de inmediato o mostrará un marcador de posición. Hay dos maneras de evitarlo.

Doble corchete. El método más simple: duplique los corchetes exteriores:

1
[[gallery]]

Para etiquetas emparejadas, se duplican el primer corchete de apertura y el último de cierre:

1
[[maps]New York, USA[/maps]]

Códigos de caracteres HTML. En el editor de texto, puede reemplazar los corchetes por sus códigos ASCII: [ en lugar de [ y ] en lugar de ]. La entrada [gallery] se mostrará como texto [gallery], pero no se ejecutará.

El primer método es más simple y legible en el código fuente; el segundo es más fiable con formatos complejos. Elija doble corchete para ediciones rápidas en el editor de texto y códigos ASCII cuando el shortcode esté junto a otros corchetes, por ejemplo dentro de bloques de código o descripciones de meta campos. En ambos casos, los visitantes del sitio ven exactamente el texto del shortcode y WordPress no lo ejecuta.

Vídeo: análisis completo de los shortcodes de WordPress

Para quienes prefieren una explicación visual, aquí tiene un tutorial detallado del equipo de Kinsta. El autor muestra la creación, depuración y ejemplos reales de shortcodes en un proyecto en vivo, desde la instalación del tema hasta la salida en el frontend.

⁉️🤔 Preguntas frecuentes

¿Se pueden usar shortcodes en Gutenberg?

Sí, mediante el bloque "Shortcode" en el panel de inserción de bloques. Usted inserta el shortcode en el campo del bloque y WordPress lo ejecuta durante el renderizado. Sin embargo, los shortcodes complejos con contenido anidado pueden funcionar de forma impredecible; en esos casos es más fiable cambiar al modo de edición de código. Gutenberg renderiza los shortcodes mediante una llamada de retorno del servidor, así que los resultados dependen de que la función devuelva HTML correcto. Los temas de bloque (edición completa del sitio) con theme.json pueden restringir parcialmente la salida de shortcodes en las plantillas; verifique la compatibilidad del tema específico.

¿Qué hacer si un shortcode no funciona?

Revise tres causas típicas. Primera: insertó el shortcode en el editor visual, que convirtió los corchetes en entidades HTML; cambie al modo de texto y asegúrese de que los corchetes sean rectos. Segunda: el plugin que registra el shortcode está desactivado; vaya a "Plugins" y compruebe el estado. Tercera: la función del shortcode usa echo en lugar de return; esto es un error del desarrollador, la salida aparece en un lugar incorrecto de la página. Método de diagnóstico sistemático: abra wp-config.php, active WP_DEBUG y WP_DEBUG_LOG. Después de cargar la página con el shortcode, revise wp-content/debug.log; allí encontrará errores PHP específicos que indican archivo y línea.

¿Se puede insertar código PHP directamente en un shortcode?

No. Un shortcode es un disparador, no un contenedor para código arbitrario. Lo que se ejecuta es la función registrada en el servidor mediante add_shortcode(). Si necesita lógica personalizada, escríbala en functions.php (o en un plugin independiente) y vincúlela al shortcode. Entre corchetes solo puede pasar contenido y atributos, no código ejecutable. Para una ejecución segura de PHP en el contenido, explore plugins como "Code Snippets": le permiten gestionar fragmentos desde la interfaz de administración sin editar functions.php y con protección contra errores fatales.

¿Los shortcodes ralentizan el sitio?

Por sí mismos, no. add_shortcode() se limita a registrar la correspondencia entre etiqueta y función en el array global $shortcode_tags. La sobrecarga surge cuando la función del shortcode realiza consultas pesadas a la base de datos o llamadas a API externas en cada carga de página. El problema no está en el mecanismo del shortcode, sino en la implementación concreta del plugin. Pauta: si una página contiene más de 20 shortcodes y cada uno ejecuta WP_Query o wp_remote_get(), almacene en caché los resultados mediante la API de transitorios. Para escenarios típicos (uno o dos shortcodes por página), el impacto en el rendimiento es insignificante.

¿Cómo eliminar un shortcode de la salida sin borrarlo de la entrada?

Use remove_shortcode() en functions.php. Por ejemplo, para desactivar la galería incorporada: remove_shortcode( 'gallery' ). Después de esto, [gallery] en el texto de la entrada se mostrará como texto normal entre corchetes, sin ejecutarse. Resulta útil al migrar a otra solución o al depurar conflictos. Desactivación parcial: puede anular un shortcode registrando su propio manejador con la misma etiqueta mediante add_shortcode(). El último manejador registrado tiene prioridad.

¿Vale la pena aprender shortcodes en 2026?

Gutenberg y el editor de bloques resolvieron muchas tareas para las que antes se escribían shortcodes: columnas, botones, inserción de medios, contenedores. Pero los shortcodes no han desaparecido. Los plugins aún los registran por cientos, desde formularios de suscripción hasta carritos de WooCommerce. Y lo más importante: un shortcode personalizado puede reemplazar un plugin y hacer exactamente lo que su proyecto necesita, sin sobrecargar el panel de administración con ajustes ajenos.

Si repite con frecuencia el mismo bloque HTML, enlace o plantilla en los artículos, dedique 10 minutos a add_shortcode() en functions.php. El retorno de la inversión: decenas de horas al año que no gasta en copiar y pegar. Los shortcodes son retrocompatibles; el código escrito hoy funcionará en futuras versiones de WordPress, porque la API de shortcodes no ha cambiado desde su aparición y sigue siendo uno de los elementos centrales más estables.