Los shortcodes en WordPress permiten a usuarios y desarrolladores insertar funcionalidades complejas dentro del contenido de páginas o entradas sin recurrir a código extenso. Esta guía detalla su funcionamiento, casos de uso, buenas prácticas y cómo desarrollar tus propios shortcodes personalizados.
Los shortcodes han sido, desde su introducción en WordPress 2.5, una de las formas más eficientes de extender las capacidades de un sitio sin modificar directamente plantillas o escribir código PHP en bruto. En esencia, permiten insertar componentes dinámicos y reutilizables desde el editor, y son ampliamente usados tanto por principiantes como por desarrolladores avanzados.
Un shortcode es una función envoltorio en forma de texto, encerrada entre corchetes ([ ]), que WordPress interpreta en tiempo de ejecución. Cuando el sistema detecta un shortcode, ejecuta la función PHP asociada y reemplaza el texto por el resultado correspondiente.
Ejemplo básico:
[contact-form id="123" title="Formulario de contacto"]
Lenguaje del código: JSON / JSON con comentarios (json)Este código puede generar un formulario completo sin necesidad de insertar HTML ni modificar archivos de plantilla. Internamente, WordPress busca un shortcode registrado con el nombre contact-form y ejecuta la función asociada, pasando los atributos como argumentos.
Los shortcodes pueden ser auto-cerrados o de apertura y cierre:
[galeria id="456"]
Lenguaje del código: JSON / JSON con comentarios (json)[resaltar color="rojo"]Este texto aparece destacado[/resaltar]
Lenguaje del código: CSS (css)El contenido entre etiquetas es accesible mediante el segundo parámetro de la función que define el shortcode.
WordPress incorpora varios shortcodes listos para usar. Entre los más comunes:
| Shortcode | Función |
|---|---|
| Inserta una galería de imágenes. |
| Añade pie de imagen con formato. |
| Muestra un reproductor de audio. |
| Inserta un reproductor de vídeo. |
| Crea una lista de reproducción de audio o vídeo. |
| Forza la inserción de contenido embebido como YouTube o Vimeo. |
Crear shortcodes propios permite encapsular funcionalidades y reutilizarlas con facilidad.
1. Define la función:
function shortcode_saludo($atts, $content = null) {
return '<p>Hola, este es un mensaje personalizado.</p>';
}
Lenguaje del código: PHP (php)2. Regístralo en WordPress:
add_shortcode('saludo', 'shortcode_saludo');
Lenguaje del código: JavaScript (javascript)3. Utilízalo en cualquier entrada:
[saludo]
Lenguaje del código: JSON / JSON con comentarios (json)4. Añade atributos opcionales:
function shortcode_resaltado($atts, $content = null) {
$a = shortcode_atts(array(
'color' => 'amarillo'
), $atts);
return '<span style="background-color:' . esc_attr($a['color']) . ';">' . $content . '</span>';
}
add_shortcode('resaltar', 'shortcode_resaltado');
Lenguaje del código: PHP (php)Uso:
[resaltar color="verde"]Este texto tiene fondo verde[/resaltar]
Lenguaje del código: CSS (css)return, nunca echo: Los shortcodes deben devolver contenido, no imprimirlo directamente.sanitize_text_field(), esc_html() y esc_attr() para proteger la salida.shortcode_atts(): Define atributos predeterminados para evitar errores si se omiten.wp_cache_get() y wp_cache_set() si necesitas almacenar datos temporalmente.| Problema | Causa probable | Solución |
|---|---|---|
| El shortcode aparece como texto | No está registrado o hay error en el nombre | Verifica add_shortcode() |
| No acepta atributos | Falta uso de shortcode_atts() | Define valores predeterminados correctamente |
| Rompe el diseño visual | Contiene etiquetas HTML mal cerradas o uso de echo | Usa return y ob_get_clean() si es necesario |
| No funciona tras cambiar de tema | Definido en functions.php del tema anterior | Pasa el código a un plugin personalizado |
Aunque Gutenberg ha desplazado parte del uso tradicional de shortcodes con sus bloques visuales, los shortcodes siguen siendo útiles por su portabilidad, compatibilidad con código y facilidad de uso en contextos personalizados (por ejemplo, campos ACF, widgets o plantillas PHP).
Además, muchos bloques de Gutenberg internamente utilizan shortcodes para representar su funcionalidad, lo que demuestra que ambos sistemas pueden coexistir y complementarse.
Los shortcodes son una herramienta fundamental para cualquier desarrollador o creador de contenido que quiera extender las funcionalidades de WordPress sin necesidad de modificar directamente su código base. Su versatilidad, bajo coste de implementación y compatibilidad con múltiples entornos los convierte en un recurso imprescindible.
Para proyectos que requieren repetición de funciones, personalización rápida o integración de servicios externos, el uso adecuado de shortcodes puede suponer una mejora significativa en la eficiencia y calidad del desarrollo web en WordPress.
