Guía definitiva sobre los Shortcodes en WordPress: Cómo crearlos y usarlos

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:

		
		

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 deseadoUsoResultado
Texto en negritaEscribe: Be [b]bold[/b], but not too [b]bold[/b].Be bold, but not too bold.
Texto tachadoEscribe: Lightning [s]never[/s] strikes twice.Lightning never strikes twice.
Cambiar color de textoEscribe: Go [color=green]green[/color], or we scream!Go green, or we scream!
Texto subrayadoEscribe: Happiness [u]underlines[/u] success.Happiness underlines success.

Tipos de Shortcodes en WordPress

Existen dos tipos principales de shortcodes:

  1. Shortcodes autocontenidos (Self-closing): No requieren una etiqueta de cierre.
  2. 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 ShortcodeEjemploDescripció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:

  1. En páginas y entradas: Se insertan directamente en el editor de WordPress.
  2. En widgets: Algunos widgets de texto permiten la ejecución de shortcodes.
  3. 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.

David Carrero Fernández-Baillo

Experimentando con un sitio web sobre WordPress, este popular gestor de contenidos, entre otros muchos proyectos.

Te puede interesar...

    Comments are closed

    WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

    © 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.