{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Hooks y shortcodes: conectar tu plugin al flujo real de WordPress

Aprendes a registrar hooks con criterio y a crear un shortcode profesional que reutiliza lógica, valida atributos y produce salida segura.

Los hooks son el sistema nervioso de WordPress: si los usas bien, tu plugin se integra de forma limpia; si los usas mal, introduces efectos laterales difíciles de rastrear.

En esta lección vas a implementar un shortcode real para WP Avisos Contextuales y lo conectarás al ciclo de ejecución sin mezclar capas.

La clave profesional es no meter lógica de negocio dentro del callback del shortcode: el callback debe delegar en un renderer común.

Ese patrón te permite reutilizar la misma salida en shortcode, bloque dinámico y endpoints API.

  • Saber cuándo usar acción o filtro evita código frágil.
  • Usa acciones (`add_action`) cuando quieras ejecutar tareas en un momento del ciclo (registrar shortcode, encolar assets, preparar contexto).
  • Usa filtros (`add_filter`) cuando quieras modificar un dato que WordPress o un plugin ya está generando.
  • Caso real: registrar shortcodes dentro de `init` con prioridad controlada evita errores de orden al cargar dependencias.
  • Acción: efecto lateral o registro.

Modelo mental: acciones ejecutan, filtros transforman

Saber cuándo usar acción o filtro evita código frágil.

Usa acciones (`add_action`) cuando quieras ejecutar tareas en un momento del ciclo (registrar shortcode, encolar assets, preparar contexto).

Usa filtros (`add_filter`) cuando quieras modificar un dato que WordPress o un plugin ya está generando.

Caso real: registrar shortcodes dentro de `init` con prioridad controlada evita errores de orden al cargar dependencias.

  • Acción: efecto lateral o registro.
  • Filtro: transformar entrada -> salida.
  • Evita lógica pesada en callbacks anónimos largos.

Shortcode profesional: atributos, defaults y salida segura

Un shortcode no es solo imprimir HTML: es una interfaz pública de tu plugin.

Siempre define defaults con `shortcode_atts` para que el comportamiento sea predecible.

Valida valores permitidos (por ejemplo, `tone` solo acepta `info|warning|success`) y aplica fallback seguro.

Devuelve siempre string. No hagas `echo` dentro del callback del shortcode.

Reutiliza renderer para evitar duplicidad

El renderer compartido es la diferencia entre plugin mantenible y plugin parcheado.

Si el shortcode tiene una lógica de salida y el bloque dinámico otra distinta, tarde o temprano divergen y generan inconsistencias.

Centraliza render en una función o clase (`NoticeRenderer`) y llama a esa pieza desde cada interfaz (shortcode, bloque, REST).

Con este patrón, cambiar una regla de negocio no implica tocar tres sitios diferentes.

Errores frecuentes en producción y cómo evitarlos

La mayoría de incidentes vienen de pequeños descuidos en callbacks.

Error común 1: usar `echo` en shortcode y romper maquetación dentro del editor.

Error común 2: no escapar contenido dinámico y abrir vector XSS en frontend.

Error común 3: depender de estado global sin defaults y romper páginas antiguas con shortcodes ya insertados.

WordPress Plugin
05

Hooks y shortcodes: conectar tu plugin al flujo real de WordPress

Aprendes a registrar hooks con criterio y a crear un shortcode profesional que reutiliza lógica, valida atributos y produce salida segura.

¿Cuánto sabes de WordPress Plugin?

Código del tema: add_shortcode

📘 Teoría

Modelo mental: acciones ejecutan, filtros transforman

Saber cuándo usar acción o filtro evita código frágil.

Usa acciones (`add_action`) cuando quieras ejecutar tareas en un momento del ciclo (registrar shortcode, encolar assets, preparar contexto).

Usa filtros (`add_filter`) cuando quieras modificar un dato que WordPress o un plugin ya está generando.

Caso real: registrar shortcodes dentro de `init` con prioridad controlada evita errores de orden al cargar dependencias.

  • Acción: efecto lateral o registro.
  • Filtro: transformar entrada -> salida.
  • Evita lógica pesada en callbacks anónimos largos.

Shortcode profesional: atributos, defaults y salida segura

Un shortcode no es solo imprimir HTML: es una interfaz pública de tu plugin.

1

Siempre define defaults con `shortcode_atts` para que el comportamiento sea predecible.

2

Valida valores permitidos (por ejemplo, `tone` solo acepta `info|warning|success`) y aplica fallback seguro.

3

Devuelve siempre string. No hagas `echo` dentro del callback del shortcode.

Callback robusto de shortcode
add_shortcode('wpac_notice', function ($atts = []): string {
    $atts = shortcode_atts([
        'tone' => 'info',
        'title' => '',
    ], (array) $atts, 'wpac_notice');

    $allowed_tones = ['info', 'warning', 'success'];
    if (!in_array($atts['tone'], $allowed_tones, true)) {
        $atts['tone'] = 'info';
    }

    return wpac_render_notice($atts);
});

Reutiliza renderer para evitar duplicidad

El renderer compartido es la diferencia entre plugin mantenible y plugin parcheado.

Si el shortcode tiene una lógica de salida y el bloque dinámico otra distinta, tarde o temprano divergen y generan inconsistencias.

Centraliza render en una función o clase (`NoticeRenderer`) y llama a esa pieza desde cada interfaz (shortcode, bloque, REST).

Con este patrón, cambiar una regla de negocio no implica tocar tres sitios diferentes.

1

Sin renderer compartido

Cada interfaz genera su HTML por separado.

  • Más bugs por divergencia.
  • Mantenimiento caro.
  • Difícil testear salidas.
2

Con renderer compartido

Un único punto de verdad para la salida.

  • Consistencia visual y funcional.
  • Menos retrabajo.
  • Más fácil escalar.

Errores frecuentes en producción y cómo evitarlos

La mayoría de incidentes vienen de pequeños descuidos en callbacks.

1

Error común 1: usar `echo` en shortcode y romper maquetación dentro del editor.

2

Error común 2: no escapar contenido dinámico y abrir vector XSS en frontend.

3

Error común 3: depender de estado global sin defaults y romper páginas antiguas con shortcodes ya insertados.

🧪 Aprende probando

Ejemplo Ejemplo guiado: registrar shortcode en init y delegar render Creamos una clase de hooks que registra el shortcode y delega la salida a un renderer común.
⌄

🏁 Retos

Reto Reto real: shortcode con validación estricta Añade validación de atributos y evita valores inválidos en `tone`.
⌄

🧰 Recursos

Enlaces útiles

Hooks (Actions and Filters) Shortcode API add_shortcode() WordPress Plugin: estructura de archivos WordPress Plugin: bloque dinámico PHP: funciones
Test

Comprueba tus conocimientos con un test sobre WordPress Plugin.

Test de WordPress Plugin
Recursos del curso 15
📘 Glosario 🎬 Vídeos 🔗 Enlaces
‹
Lección 04
Activación, desactivación y uninstall: ciclo de vida sin sustos en producción
Lección 06
Settings API en serio: una pantalla de ajustes clara, segura y mantenible
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .