Qué son los hooks o ganchos en WordPress y para qué sirven

Esta semana quería publicar en el blog de Raiola un post sobre cómo crear un plugin desde cero. Sin embargo, para aprender y comprender correctamente cómo desarrollar themes y plugins en WordPress, es MUY IMPORTANTE saber cómo funcionan los hooks o ganchos y cuál es su orden de carga.

Además, ten en cuenta que necesitas tener unos conocimientos básicos sobre PHP. Si no es tu caso, te recomiendo que antes de empezar busques algún tutorial de PHP básico para poder abarcar este tema. Sin más preámbulos… ¡Vamos al lío!

¡Suscríbete al boletín!

No te enviaremos spam, lo prometemos. Enviamos a nuestros suscriptores contenido sobre WordPress, hosting, marketing digital y programación.

Enviar

Este campo es obligatorio.

+ Información básica sobre protección de datos

• Responsable:

  RAIOLA NETWORK, S.I. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es

• Finalidad:

  Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.

• LEGITIMACIÓN:

  Consentimiento del interesado y contratación de productos y/o servicios del Responsable

• Destinatario

  No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield

• DERECHOS:

  Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.

• INFORMACIÓN ADICIONAL:

  Se puede consultar la política de privacidad de forma más detallada aquí.

Has leído y aceptas la política de privacidad *

¡Te has suscrito a nuestro newsletter!

WordPress, a diferencia de otros gestores de contenido, utiliza una arquitectura basada en eventos y procedimientos. Si quieres desarrollar tanto temas como plugins en este CMS, es esencial que aprendas a utilizar el sistema de hooks o ganchos.

Los ganchos o hooks en WordPress son puntos concretos y estratégicos dentro del core de WordPress que permiten añadir funcionalidades o modificar un comportamiento. Cuando la secuencia de carga llegue a ese punto concreto, se ejecuta la función que has “enganchado”.

De esta manera, podrás modificar el funcionamiento del código de WordPress sin ni siquiera tocarlo. Sin embargo, tienes que ser consciente de que los hooks no se ejecutan aleatoriamente, sino que siguen un orden. La siguiente imagen pertenece a Rarst.net, concretamente a un artículo que se llama “Make sense of WordPress core load”:

Me gusta mucho porque ilustra muy bien parte del orden de carga de una petición típica de WordPress (aunque no está completo, pero no importa). La idea es que entiendas cómo funciona y con esto es suficiente. He marcado con un cuadro rojo los action hooks (un tipo concreto de gancho, ahora te explico) para que puedas ver cómo se van ejecutando desde arriba hasta abajo.

En WordPress existen dos tipos de hooks: acciones (actions hooks) y filtros (filters hooks). Aunque se utilizan de la misma manera, el valor que devuelve cada uno es diferente.

Las acciones o action hooks ejecutan una función propia en un lugar preciso en un momento determinado de la línea de ejecución de WordPress. Cuando llega a un punto concreto, realiza la acción que quieras además de las que ya se van a ejecutar por defecto. En resumen, los action hooks añaden código adicional a tu WordPress.

Si te fijas en el código que aparece en la primera imagen de este post, todos los hooks se llaman con la función do_action(‘nombre_hook’).

Así es como puedes localizar en qué puntos de WordPress están los action hooks. Para verlo más claro, te voy a poner un ejemplo sencillo: imagina que necesitas agregar código CSS personalizado dentro de la cabecera de tu web.

En el código de WordPress existe una función que se llama wp_head() que se define en el archivo /wp-includes/general-template.php. Esta función utiliza do_action() para crear un punto con el que puedas trabajar con el gancho wp_head.

Si abres el archivo header.php de tu theme principal, verás que entre las etiquetas <head></head> se llama a la función wp_head().

Cuando la ejecución de tu WordPress llega a ese punto, el código que realmente ejecuta wp_head(); es do_action(‘wp_head’);, creando así un punto de anclaje justo antes del cierre de la etiqueta <head>. De esta manera, cuando tú enganches tu función al hook wp_head, se añadirá el código CSS que tienes preparado al header.php de tu theme.

Pero la función do_action(); no solo se utiliza en el core de WordPress y esto es MUY INTERESANTE. Por ejemplo, si estás desarrollando un plugin o tema para WordPress puedes “preparar” hooks para que otra persona “enganche” a tu plugin o theme sus funciones personalizadas.

Ahora, lo que me falta por enseñarte es cómo usar un action hook de WordPress. Para “engancharte” a un hook vas a utilizar la función add_action();. Para aprender a usarla, lo primero que debes conocer es la sintaxis o estructura de un action hook:

add_action( string $nombre_accion, callable $nombre_tu_funcion, int $prioridad, int $numero_parametros=1);

• $nombre_acción (requerido): El nombre de la acción a la que se va a enganchar la función que añadas en $nombre_funcion.
• $nombre_funcion (requerido): El nombre de la función que creaste para utilizar con este action hook.
• $prioridad (opcional):  Se especifica el orden en el que se ejecutan las funciones que están asociadas a ese gancho. Su valor por defecto es 10. Cuanto más pequeño es el número, antes se ejecuta esa función. Si el valor es igual entre dos funciones, se ejecutará antes la que se haya agregado primero al action hook.

• $numero_parametros (opcional): Un número que indica la cantidad de parámetros que vas a pasar a la función. Por defecto, es 1.

Ahora que conoces la estructura de un action hook, te voy a enseñar cómo es el código que tienes que usar. ¡OJO!, este tipo de experimentos tienes que hacerlos en un entorno de pruebas. No lo hagas nunca sobre tu web hasta que estés al 100% seguro de que va a funcionar y no vas a dejar caída tu página.

Para que veas cuál es el código que hay que poner y cómo se usa, vas a crear un action hook que deshabilite el widget de calendario.

Si no tienes un tema hijo en tu web ni sabes lo que es, te sugiero que le eches un ojo al siguiente artículo: Qué es un tema hijo y cómo crearlo

Primero, edita el archivo functions.php del tema hijo del entorno de pruebas y añade el siguiente código dentro de la etiqueta de apertura y cierre de PHP:

function miprimerafuncion()
{
    //Mi código personalizado
}
add_action(‘[NOMBRE_HOOK]’,’miprimerafuncion’);

En el ejemplo, he nombrado a la función como ‘mi primera funcion’ pero tú la puedes llamar como quieras. Lo único que tienes que tener en cuenta es que en WordPress el nombre de la función tiene que ser exclusivo. No puede llamarse igual que ninguna otra. De lo contrario, tu página podría dejar de funcionar.

Para poder eliminar el widget del panel de control, vas a utilizar un hook de WordPress que se activa justo después de que se hayan registrado todos los widgets: widgets_init. Por lo tanto, deberás cambiar [NOMBRE_HOOK] por widgets_init.

add_action(‘widgets_init’,’miprimerafuncion’);

Ahora solo tienes que añadir el código necesario dentro de tu función. En la documentación oficial de WordPress podrás encontrar una función que realiza la tarea que necesitas: unregister_widget();.

function miprimerafuncion()
{
    unregister_widget(‘WP_Widget_Calendar’);
}

Listo. Como ves en la siguiente imagen, ya no puedes utilizar el widget del calendario.

Si quieres ver todos los action hooks que existen, aprender a utilizarlos y saber en qué orden cargan, te recomiendo que visites la documentación oficial de WordPress sobre Action Hooks.

Los filtros o filter hooks de WordPress manipulan la información en un punto concreto de la ejecución antes de que se muestre en la pantalla o se almacene en la base de datos.

Por ejemplo, puedes cambiar el título de una página antes de que salga en la pantalla del usuario, añadir más contenido al título de un post, cambiar el texto de un botón…

Al igual que con los action hooks, te voy a enseñar cuál es la estructura o sintaxis de un filter hook:

add_filter( string $nombre_filtro, callable $nombre_tu_funcion, int $prioridad, int $numero_parametros=1);

• $nombre_filtro (requerido): El nombre de filtro con el que quieras trabajar.
• $nombre_funcion (requerido): El nombre de la función que se ejecutará cuando el filtro se active.
• $prioridad (opcional):  Se especifica el orden en el que se ejecutan las funciones que están asociadas a ese gancho. Su valor por defecto es 10. Cuanto más pequeño es el número, antes se ejecuta esa función. Si el valor es igual entre dos funciones, se ejecutará antes la que se haya agregado primero al action hook.
• $numero_parametros (opcional): Un número que indica la cantidad de parámetros que vas a pasar a la función. Por defecto, es 1.

Seguro que te resulta muy familiar. Realmente los action hooks y los filter hooks son muy similares y se utilizan de la misma forma aunque se usen para cosas diferentes:

• Los filter hooks reciben un parámetro de entrada que tú vas a modificar y devolver al hook correspondiente.
• No se llaman con la función do_action(), como en el caso de los action hooks, se utiliza apply_filters(); por lo que tendrás que localizar en el código de WordPress los puntos en los que puedes engancharte al hook con esta función.
• No se referencia con add_action(); sino que se usa add_filter();

Abre otra vez el archivo functions.php de tu tema hijo. Te voy a enseñar a cambiar el texto del botón de “Leer más” de un blog. Seguro que muchas veces te has encontrado blogs en español con el botón de Leer más en inglés. Pues la verdad es que se cambia de una manera muy rápida y fácil:

function misegundafuncion($texto)
{
     //El texto de Read More… se va a sustituir por la cadena que devuelvas en esta función
$texto=”Leer más”;   
 return $texto;
}

add_filter(‘except_more’,’misegundafuncion’);

Listo. Como ves en la siguiente imagen, el nombre del botón antes era Read More y ahora pone Leer más.

Si quieres ver todos los filter hooks que existen y aprender a utilizarlos correctamente, te recomiendo que visites la documentación oficial de WordPress sobre Filter Hooks.

Una vez que te familiarices con los hooks de WordPress, te resultarán más fáciles de usar de lo que pudiera parecerte en un principio. En este artículo apenas te he mostrado cómo se usa cada uno, pero si te interesa este tema y quieres ver más ejemplos de cosas que puedes hacer con los hooks de WordPress, te recomiendo que visites el siguiente artículo: Tweaking Avanzado con snippets en el functions.php de WordPress

¿Te ha gustado el artículo? ¿Tienes alguna duda? Mis compañeros y yo estaremos encantados de responder a tus comentarios 🙂