Cómo crear shortcodes personalizados en WordPress

Introducción

Los shortcodes de WordPress son pequeñas etiquetas que los usuarios pueden insertar en entradas, páginas o widgets para generar contenido dinámico sin escribir código complejo. Aprender a crear shortcodes personalizados permite extender funcionalidades, estandarizar elementos de diseño y ofrecer soluciones reutilizables.

¿Qué es un shortcode

Un shortcode es una cadena de texto con formato [etiqueta atributo=valor]contenido[/etiqueta] que WordPress procesa y reemplaza por el resultado de una función definida en functions.php o en un plugin. Su uso reduce la complejidad para el usuario final.

Ventajas de usar shortcodes

• Reutilización: Define una sola vez y usa en múltiples lugares.
• Mantenimiento: Actualiza la lógica en un solo archivo.
• Accesibilidad: Usuarios sin conocimientos de PHP pueden insertar elementos avanzados.

Preparativos

Antes de comenzar:

1. Acceso al servidor o FTP para editar archivos del tema o plugin.
2. Editor de código (VSCode, Sublime Text, PHPStorm).
3. Entorno de pruebas local o staging.

1) Creación básica de un shortcode

El método más sencillo es registrar una función y vincularla a un tag:

 
// En functions.php o en tu plugin personalizado
function mi_shortcode_basico() {
  return ¡Hola desde mi shortcode!
}
add_shortcode(saludo, mi_shortcode_basico)
  

Uso en el editor: [saludo]

2) Shortcodes con atributos

Permiten personalizar la salida directamente desde el editor:

function mi_shortcode_atributos(atts) {
  args = shortcode_atts(array(
    texto => Texto predeterminado,
    color => #000000
  ), atts)

  return ltspan style=color:.esc_attr(args[color]).gt.
         esc_html(args[texto]).
         lt/spangt
}
add_shortcode(texto_color, mi_shortcode_atributos)
  

Ejemplo de uso: [texto_color texto=Hola Mundo color=#0073aa]

3) Shortcodes con contenido interno

Algunos shortcodes necesitan procesar el contenido entre su apertura y cierre:

function mi_shortcode_con_contenido(atts, contenido = null) {
  return ltdiv class=mi-clasegt.
         do_shortcode(contenido).
         lt/divgt
}
add_shortcode(envolver, mi_shortcode_con_contenido)
  

Uso: [envolver]Contenido aquí[/envolver]

4) Estructuras basadas en clases

Para proyectos grandes, agrupar la lógica en clases facilita la organización:

class Mi_Shortcodes {
  public function __construct() {
    add_shortcode(boton, array(this, boton))
  }

  public function boton(atts) {
    args = shortcode_atts(array(
      url   => #,
      texto => Click aquí
    ), atts)

    return lta href=.esc_url(args[url]). 
              style=display:inline-block
                     padding:8px 16px
                     background-color:#0073aa
                     color:#fff
                     text-decoration:none
                     border-radius:3pxgt.
           esc_html(args[texto]).
           lt/agt
  }
}
new Mi_Shortcodes()
  

5) Shortcodes avanzados

• Integrar API de Shortcodes.
• Usar WP_Query para mostrar listados de posts.
• Combinar con enqueue_style y enqueue_script para cargar recursos específicos.
• Implementar transients para cachear resultados.

Buenas prácticas

Práctica	Descripción
Escapar datos	Usar esc_html, esc_attr, esc_url.
Prefijos únicos	Evitar conflictos con temas o plugins.
Documentación	Comentar cada función y sus parámetros.

Ejemplos prácticos

Galería personalizada

Un shortcode que muestre imágenes destacadas de un post en un carrusel simple.

function galeria_destacada(atts) {
  post_id = get_the_ID()
  images = get_post_meta(post_id, _galeria_ids, true)
  html = ltdiv class=carruselgt
  foreach(images as id) {
    img = wp_get_attachment_image(id, medium)
    html .= ltdiv class=slidegt.img.lt/divgt
  }
  html .= lt/divgt
  return html
}
add_shortcode(mi_galeria, galeria_destacada)
  

Botón estilizado

Un ejemplo minimalista con pseudo-elementos:

function boton_minimal(atts) {
  atts = shortcode_atts(array(
    texto => Enviar,
    url   => #
  ), atts)
  return lta href=.esc_url(atts[url]). 
            style=position:relative
                   display:inline-block
                   padding:10px 20px
                   color:#fff
                   background:#333
                   text-decoration:none
                   overflow:hidden
                   border-radius:4pxgt.
         esc_html(atts[texto]).
         ltspan style=position:absolute
                          top:0 left:0 width:100% height:100%
                          background:rgba(255,255,255,0.1)
                          transform:scaleX(0)
                          transform-origin:left
                          transition:transform .3sgtlt/spangt.
         lt/agt
}
add_shortcode(boton_minimal, boton_minimal)
  

Depuración y seguridad

• Activar WP_DEBUG en wp-config.php.
• Probar con diferentes roles de usuario.
• Validar que las entradas no contengan HTML malicioso.

Documentación y enlaces útiles

• API de Shortcodes – Developer WordPress
• Shortcode API – WordPress Codex
• add_shortcode() – Developer Reference

Conclusión

Crear shortcodes personalizados en WordPress es una habilidad poderosa que aumenta la flexibilidad de tu sitio y facilita la vida de editores y desarrolladores. Siguiendo las buenas prácticas de escape, prefijos únicos y documentación, podrás construir componentes sólidos, seguros y fáciles de mantener.