¿Qué son los Hooks en WordPress?

19/04/2024

foto del autor de la noticia

José Antonio Rodríguez Navarro

Cuando trabajamos en desarrollo web, particularmente dentro de WordPress, los «hooks» son una herramienta indispensable para poder trabajar de forma eficiente con este CMS. Pero, ¿qué es exactamente un hook? Imagina que estás cocinando y necesitas que alguien te avise cuando el agua comience a hervir, para que puedas añadir los espaguetis. Un hook funciona de manera similar: es un punto de señalización dentro del código que permite a otros interactuar con la aplicación o modificar su comportamiento sin cambiar el código original.

Grúa haciendo referencia a un sitio web en WordPress, el edificio es el sitio web y la grúa tiene los hooks.

Si tomamos como referencia esta imagen, el edificio es el sitio web con WordPress en el que se puede ver de qué esta compuesto y en la grúa tenemos los hooks que van a actuar sobre ese edificio.

¿Qué es un Hook?

Un hook es, básicamente, un punto de anclaje o un lugar de intervención que WordPress ofrece para permitir que tu código se «enganche» y actúe en el flujo principal de ejecución de WordPress, es decir, para que puedas añadir código propio, ya sea para modificarlo o añadir una función adicional. Piensa en ello como una farola en una calle: se puede implantar una farola en una calle (tu código) y esta farola puede iluminar una parte específica del camino (el flujo de ejecución de WordPress).

Se que quizá estos ejemplos puede ser que no te ayuden demasiado o que aún te dejen con algún tipo de dudas, pero en sí, es muy sencillo. Tu hook interviene en el código para hacer una modificación en ese espacio en concreto.

Tipos de Hooks en WordPress

En WordPress, contamos con dos tipos principales de hooks:

Actions (Acciones):

  • Descripción: Permiten que añadas tus propios scripts o modifiques el flujo de ejecución de WordPress en ciertos puntos.
  • Ejemplo cotidiano: Es como poner una alarma (tu acción) para recordarte llamar a un amigo cuando llegues a casa.
    function saludo_al_ingresar() {
        echo "¡Hola, bienvenido a mi sitio!";
    }
    add_action('wp_head', 'saludo_al_ingresar');

    Filters (filtros)

    • Descripción: Permiten modificar datos antes de que sean procesados o enviados al navegador.
    • Ejemplo cotidiano: Es como un colador que utilizas para ajustar la cantidad de azúcar que añades a tu café.
    function modificar_titulo($title) {
        return 'Prefijo - '.$title;
    }
    add_filter('the_title', 'modificar_titulo');

    Cómo funcionan los Hooks en WordPress

    Proceso de Ejecución:

    1. Definición del Hook: WordPress define puntos específicos en su código donde los usuarios pueden «enganchar» sus funciones personalizadas. Estos pueden ser tanto de tipo acción como de tipo filtro.
    2. Enganchar una función: Utilizas add_action() o add_filter() para indicar a WordPress que quieres añadir una función personalizada a uno de esos puntos definidos.
    3. Ejecución: Cuando se alcanza el punto del hook en el flujo de ejecución de WordPress, todas las funciones «enganchadas» a ese hook se ejecutan.

    Ejemplos comunes de Hooks en WordPress

    • wp_head: Se ejecuta en la sección de cabecera del HTML. Útil para añadir etiquetas de meta, scripts o estilos.
    • wp_footer: Se ejecuta cerca del cierre de la etiqueta </body>. Ideal para scripts que no afectan el tiempo de carga de la página.
    • the_content: Un filtro que te permite modificar el contenido de los posts antes de que se muestre.

    Además, dentro del portal de desarrolladores de WordPress podemos encontrar un listado de Hooks ya predefinidos. Visita el sitio y échale un vistazo para que veas cuales son y lo que hacen: WordPress Developer – Hooks

    Creando tu propio Hook en WordPress

    Aunque WordPress viene con muchos hooks, también puedes crear los tuyos propios para hacer tus temas y plugins más extensibles.

    function mi_hook_de_accion_personalizado() {
        do_action('mi_hook_personalizado');
    }
    
    function mi_funcion_para_enganchar() {
        echo "Este es un mensaje personalizado!";
    }
    add_action('mi_hook_personalizado', 'mi_funcion_para_enganchar');

    ¿Qué podemos sacar en claro?

    Los hooks son una parte integral de WordPress, proporcionando una manera flexible y potente de extender y personalizar tu sitio sin alterar los archivos core del CMS. Ya sea que estés desarrollando un tema o un plugin, entender cómo utilizar los hooks efectivamente es esencial para cualquier desarrollador de WordPress.

    En resumen, los hooks son como las notas adhesivas que te permiten agregar recordatorios, tareas o modificaciones en un gran tablero de anuncios que es el flujo de ejecución de WordPress, haciendo que todo el proceso de desarrollo sea más organizado y modular.

    Eso sí, ten en cuenta que tu hook cambiará el funcionamiento de algo y que tienen un cometido final. Por lo que siempre que los uses, revisa bien tu código y estate pendiente de lo que quieres hacer y como.