Trazar hooks y acciones con Debug Bar

Contents

Introducción a los Hooks y Actions en WordPress

En el ecosistema de WordPress, los hooks son puntos de anclaje que permiten modificar o extender la funcionalidad sin tocar el núcleo. Se dividen en dos tipos principales:

  • Actions: Permiten ejecutar código en puntos específicos del flujo de ejecución.
  • Filters: Permiten modificar datos antes de que se muestren o se guarden.

Esta arquitectura brinda gran flexibilidad, pero también complejidad, especialmente cuando queremos saber exactamente qué hooks se ejecutan y en qué orden. Aquí entra en juego Debug Bar.

¿Qué es Debug Bar

Debug Bar es un plugin gratuito que añade un panel de depuración al Administrador de WordPress. Ofrece información detallada sobre:

  • Consultas a la base de datos (queries).
  • Solicitudes HTTP.
  • Uso de memoria y tiempo de ejecución.
  • Hooks y actions ejecutados.

Se puede descargar desde el repositorio oficial: Debug Bar.

Instalación y Configuración

  1. Accede a Plugins gt Añadir nuevo en tu Escritorio de WordPress.
  2. Busca Debug Bar, instala y activa.
  3. Opcionalmente, instala extensiones como Debug Bar Actions and Filters Addon para mayor detalle.

Tras la activación, en la barra de administración aparecerá un nuevo elemento Debug.

Panel de Hooks y Actions

Dentro del panel Debug gt Hooks amp Actions (disponible si instalaste el addon), verás:


Hook/Action Orden de Ejecución Archivo Origen
init 1, 5, 10 … wp-includes/plugin.php
wp_enqueue_scripts 10 functions.php

Este listado te muestra en tiempo real los hooks que se disparan en cada petición, su prioridad y procedencia.

Trazado de Hooks y Actions Personalizados

Para depurar tus propios ganchos, sigue estos pasos:

  • Activa el Debug Bar Actions and Filters Addon.
  • Añade en tu código una acción personalizada:
    add_action(mi_custom_hook, mi_funcion_debug, 10)
    function mi_funcion_debug() {
      // Código a depurar
    }
  • En el lugar deseado de tu tema o plugin, dispara la acción:
    do_action(mi_custom_hook)
  • Recarga la página y revisa en Debug gt Hooks amp Actions el punto mi_custom_hook.

De esta forma puedes verificar si se invoca y en qué orden, detectando posibles conflictos con otros plugins o funciones.

Ejemplos Prácticos

Ejemplo 1: Depurar Enqueue de Scripts

Queremos saber si nuestro script custom.js se carga correctamente:

add_action(wp_enqueue_scripts, cargar_custom_js, 20)
function cargar_custom_js() {
  wp_enqueue_script(custom-js, get_template_directory_uri()./js/custom.js, array(), 1.0, true)
  do_action(after_enqueue_custom_js)
}

Luego trazamos:

add_action(after_enqueue_custom_js, function() {
  error_log(custom.js enqueued)
})

En el panel de Debug Bar verás wp_enqueue_scripts y after_enqueue_custom_js con su prioridad.

Ejemplo 2: Seguimiento de Filters

Para filtros pueden usarse de igual manera, activando el addon y buscando en el listado. Por ejemplo:

add_filter(the_content, mi_filter_debug, 15)
function mi_filter_debug(content) {
  error_log(Filter the_content aplicado)
  return content
}

Buenas Prácticas y Recomendaciones

  • No abuses de priorities muy bajos o muy altos. Mantén un rango coherente para evitar solapamientos.
  • Documenta cada hook con comentarios claros sobre su propósito.
  • Usa prefijos únicos en nombres de hooks propios para evitar colisiones.
  • Desactiva Debug Bar en producción para optimizar rendimiento.

Conclusión

El trazado de hooks y actions con Debug Bar facilita enormemente la labor de depuración y optimización en WordPress. Te permite:

  • Visualizar el orden de ejecución.
  • Identificar conflictos entre plugins o temas.
  • Mejorar tiempos de carga al ajustar prioridades.

Incorpora esta herramienta en tu flujo de desarrollo y eleva la calidad de tus proyectos.

Referencias



Acepto donaciones de BAT's mediante el navegador Brave 🙂



Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *