Los shortcodes en WordPress son una herramienta poderosa que permite agregar funcionalidades complejas con un simple fragmento de código. Gracias a ellos, es posible insertar galerías, formularios, tablas de precios y otros elementos interactivos sin necesidad de escribir código HTML extenso o complicado.
¿Qué es un Shortcode?
Un shortcode es una pequeña porción de código que WordPress reconoce y reemplaza con una función específica. Su sintaxis utiliza corchetes cuadrados ([ ]) y permite a los usuarios agregar contenido dinámico sin conocimientos avanzados de programación.
Por ejemplo, para insertar una galería de imágenes se puede utilizar:
[gallery ids="10,21,32,43,54,65,76,87" columns="4" size="medium"]
Esto mostrará una galería con las imágenes especificadas, en cuatro columnas y con tamaño mediano.
Historia y evolución de los Shortcodes
Los shortcodes fueron introducidos en WordPress 2.5 en 2008 con la llegada de la Shortcode API. La inspiración provino del BBCode de foros en línea, que permitía a los usuarios formatear texto de forma sencilla sin utilizar HTML. Desde entonces, los shortcodes se han convertido en una característica fundamental para la extensión de WordPress.
| Formato deseado | Uso | Resultado |
|---|---|---|
| Texto en negrita | Escribe: Be [b]bold[/b], but not too [b]bold[/b]. | Be bold, but not too bold. |
| Texto tachado | Escribe: Lightning [s]never[/s] strikes twice. | Lightning |
| Cambiar color de texto | Escribe: Go [color=green]green[/color], or we scream! | Go green, or we scream! |
| Texto subrayado | Escribe: Happiness [u]underlines[/u] success. | Happiness underlines success. |
Tipos de Shortcodes en WordPress
Existen dos tipos principales de shortcodes:
- Shortcodes autocontenidos (Self-closing): No requieren una etiqueta de cierre.
- Shortcodes envolventes (Enclosing): Tienen una etiqueta de apertura y otra de cierre, permitiendo envolver contenido dentro.
Este es un texto con formato especial.
| Tipo de Shortcode | Ejemplo | Descripción |
|---|---|---|
| Shortcodes autocontenidos | [myshortcode] | Etiqueta de apertura de un shortcode sin cierre. |
| [myshortcode attr1=»abc» attr2=»123″ attr3=»xyz»] | Shortcode con atributos y valores definidos. | |
| Shortcodes envolventes | [myshortcode ]TU CONTENIDO[/myshortcode] | Shortcode con contenido entre la etiqueta de apertura y cierre. |
| [myshortcode attr1=»abc» attr2=»123″ attr3=»xyz»]TU CONTENIDO[/myshortcode] | Shortcode con atributos y contenido dentro del bloque. |
Shortcodes predeterminados de WordPress
WordPress incluye varios shortcodes por defecto que facilitan la inserción de contenido multimedia y estructurado. Algunos de los más utilizados son:
- audio: Insertar un archivo de audio con controles de reproducción.
- caption: Agregar subtítulos o descripciones a imágenes.
- embed: Permite incrustar contenido externo con opciones personalizadas.
- gallery: Insertar una galería de imágenes con diferentes configuraciones.
- playlist: Crear listas de reproducción de audio o video.
- video: Insertar un video con soporte para varios formatos.
Cómo usar shortcodes en WordPress
Los shortcodes pueden utilizarse en diferentes áreas del sitio web:
- En páginas y entradas: Se insertan directamente en el editor de WordPress.
- En widgets: Algunos widgets de texto permiten la ejecución de shortcodes.
- En el encabezado y pie de página: Usando la función
do_shortcode()en archivos de tema.<?php echo do_shortcode("[nombre_del_shortcode]"); ?>
Cómo crear un shortcode personalizado
Crear shortcodes personalizados es una excelente forma de extender la funcionalidad de WordPress. Para ello, se usa la función add_shortcode() en el archivo functions.php del tema o dentro de un plugin.
Ejemplo de shortcode para mostrar el año actual:
function mostrar_ano_actual() {
return date('Y');
}
add_shortcode('current_year', 'mostrar_ano_actual');
Usando [current_year], se mostrará automáticamente el año en curso.
Ejemplo de un shortcode con atributos personalizados:
function boton_cta_shortcode($atts) {
$atributos = shortcode_atts(
array(
'texto' => 'Haga clic aquí',
'url' => '#'
),
$atts
);
return '<a href="' . esc_url($atributos['url']) . '" class="boton-cta">' . esc_html($atributos['texto']) . '</a>';
}
add_shortcode('boton_cta', 'boton_cta_shortcode');
Para usarlo:
[boton_cta texto="Visitar sitio" url="https://ejemplo.com"]
Ventajas y desventajas de los Shortcodes
Ventajas
- Facilitan la inserción de contenido dinámico sin necesidad de programación.
- Son reutilizables en diferentes partes del sitio.
- Se pueden agrupar en plugins, facilitando su uso en múltiples sitios web.
Desventajas
- Pueden hacer que el contenido dependa de un plugin o tema específico.
- No siempre son intuitivos para usuarios sin experiencia.
- Con la llegada de Gutenberg, su uso ha disminuido en favor de los bloques personalizados.
Shortcodes y el editor de bloques de WordPress (Gutenberg)
Aunque Gutenberg ha reducido la dependencia de los shortcodes, sigue existiendo un bloque específico para ellos. Sin embargo, la tendencia en WordPress apunta hacia la creación de bloques reutilizables en lugar de shortcodes.
Conclusión
Los shortcodes han sido una de las funciones más útiles de WordPress durante años, permitiendo a usuarios y desarrolladores agregar funcionalidades avanzadas con facilidad. Aunque el futuro de WordPress está cada vez más orientado hacia el editor de bloques, los shortcodes siguen siendo una herramienta poderosa y vigente en la creación de contenido dinámico.
