Qué son y cómo funcionan los hooks en WordPress

Hooks en WordPress

¿Se te ha complicado alguna vez un proyecto porque el cliente te pide una funcionalidad extra y no sabes cómo modificar el comportamiento por defecto de alguna funcionalidad que está incluída en el Core de WordPress?

Si te ha pasado, no eres el único, hay muchos, entre los que me incluí alguna vez. Modificar el código fuente de WordPress durará lo que dures en actualizar. De hecho es lo primero que no debes hacer, va contra todas las buenas prácticas de desarrollo en WordPress.

No es seguro, no es fiable y no es permanente.

En esta publicación te explicaré como utilizar hooks para modificar el funcionamiento estándar de WordPress.

¿Qué son los hooks?

Los hooks, son fragmentos de código que pueden ser inyectados para modificar el contenido de WordPress, antes de almacenarlo en la base de datos o antes de imprimirlo en el navegador.

Pueden ser utilizados en el desarrollo de plugins o en el archivo functions.php del Tema de WordPress activo en tu sitio web.

Hay dos tipos de hooks, acciones (action) y filtros (filter).

Action hooks

Los action hooks son funciones PHP que se pueden ejecutar en un punto específico de la ejecución de WordPress.

Para ejecutar un action utiliza la función:

<?php add_action( 'hook', 'funcion', $prioridad, $argumentos ); ?>
view raw add_action.php hosted with ❤ by GitHub

hook: es el nombre del action que quieres interceptar.  WordPress tiene muy bien documentado todos los actions disponibles.

function: es el nombre de la función que vamos a ejecutar cuando el action sea llamado por WordPress.

Hay dos parámetros más en la función add_action pero son opcionales y los dejaremos de lado de momento. No te preocupes, más adelante hablaremos de ellos.

Cómo implementar un action hook

Para ver en acción un action hook, utiliza este código, que luego te explicaré en detalle.

<?php
add_action( 'login_enqueue_scripts', 'login_logo' );
function login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/img/logo.png);
background-size: 100%;
width: 155px;
height: 55px;
padding-bottom: 0px;
}
</style> <?php
} ?>
view raw login_logo.php hosted with ❤ by GitHub

La línea 2, ejecuta la función login_logo al ejecutarse en WordPress el action login_enqueue_scripts. Este se ejecuta cuando WordPress carga el código CSS y Javascript en la administración.

La función login_logo, en la linea 4, imprime el código CSS necesario para modificar el logo de la página de acceso de usuarios de WordPress.

Este es el resultado:

Cambio de Logo en administración de WordPress
Cambio de logo en página de acceso a usuarios [GIF animado]

Filter hooks

Los filter hooks son funciones PHP que permiten modificar el valor del contenido en un punto específico en la ejecución de WordPress.

Para ejecutar un filter utiliza la función:

<?php add_filter( 'hook', 'funcion', $prioridad, $argumentos ); ?>
view raw add_filter.php hosted with ❤ by GitHub

hook: es el nombre del filter que quieres interceptar. WordPress también ha documentado todos los filters disponibles.

function: es el nombre de la función que vamos a ejecutar cuando el filter sea llamado por WordPress.

Cómo implementar un filter hook

Para implementar un filter hook, utiliza este código:

<?php
add_filter( 'wp_title', 'hack_wp_title' );
function hack_wp_title( $title )
{
if ( empty( $title ) && ( is_home() || is_front_page() ) ) {
$title = get_bloginfo('name') . ' | ' . get_bloginfo('description');
} elseif ( is_archive() ) {
$title = get_bloginfo( 'name' ) . ' | Archivo:' . get_the_archive_title() );
} else {
$title = get_bloginfo( 'name' ) . ' | ' . get_the_title( get_the_ID() );
}
return $title;
} ?>
view raw hack_wp_title.php hosted with ❤ by GitHub

En la línea 2, le pedimos a WordPress que ejecute la función hack_wp_title antes de imprimir el titulo del sitio web que se muestra en el titulo del navegador. Es importante entender la diferencia, no estamos modificando el titulo de la noticia, página u otro contenido.

La función hack_wp_title toma el valor del titulo del sitio web y justo antes de imprimirlo, lo modifica en base a determinados criterios.

if ( empty( $title ) && ( is_home() || is_front_page() ) ) {
$title = get_bloginfo('name') . ' | ' . get_bloginfo('description');
view raw hack_wp_title.php hosted with ❤ by GitHub

Si se carga la página inicial del sitio web, imprime el nombre global del sitio web y la descripción.

} elseif ( is_archive() ) {
$title = get_bloginfo( 'name' ) . ' | Archivo:' . get_the_archive_title() );
view raw hack_wp_title.php hosted with ❤ by GitHub

Si se está mostrando el archivo, imprime el nombre global del sitio web más el nombre del archivo.

} else {
$title = get_bloginfo( 'name' ) . ' | ' . get_the_title( get_the_ID() );
view raw hack_wp_title.php hosted with ❤ by GitHub

Si no se cumple ninguna de estas condiciones, imprime el nombre global del sitio más el titulo de la publicación o página que se ha cargado.

En WordPress, el orden de los factores si altera el producto

Un gran ventaja del uso de actions y filters es que durante la llamada a un action se pueden ejecutar multiples funciones. Esto hace posible que múltiples funciones se complementen y no se anulen unas a otras.

El problema es que si queremos modificar un contenido y lo hacemos en varias funciones, perdemos el control sobre cual se ejecuta primero, cual después y así sucesivamente.

¿Recuerdas el parámetro $prioridad de las funciones add_action y add_filter? Es el parámetro que nos permitirá controlar el orden en que se ejecutan los hooks.

Revisemos este código, que aunque es poco práctico, sirve para explicar el concepto:

<?php
add_action( 'the_title', 'print_c', 30, 2 );
add_action( 'the_title', 'print_b', 20, 2 );
add_action( 'the_title', 'print_a', 10, 2 );
function print_c($title, $post_id) {
$title .= 'Press';
return $title;
}
function print_b($title, $post_id) {
$title .= 'Word';
return $title;
}
function print_a($title, $post_id) {
$title = '';
return $title;
}
?>
view raw filter_order.php hosted with ❤ by GitHub

Tenemos tres llamadas a modificar the_title en las líneas 2, 3 y 4 y cada una, con un tercer parámetro con 30, 20 y 10 sucesivamente. Aunque el orden en el código es, 2, 3 y 4, WordPress las ejecutará en orden inverso [4, 3, 2].

Por lo tanto, al ejecutarse las funciones print_a, print_b y print_c en ese orden, el titulo global del sitio web final será: “WordPress”.

Por último, para no dejar nada por ver, tenemos el parámetro $argumentos, que en las tres funciones tiene el valor 2. Esto solo le dice a WordPress que cada función acepta un máximo de dos parámetros. Este parámetro generalmente se omite.

WordPress es capaz de detectar automáticamente la cantidad de parámetros necesarios según el action o filter que se llame.

Mejorar, mejorar, mejorar

Ya tienes todo el conocimiento necesario para mejorar el funcionamiento de tu sitio web desarrollado en WordPress. Te dejo algunas ideas de lo que puedes hacer, pero el cielo es el límite:

  • Agregar la etiqueta meta:description con un resumen del contenido de cada página.
  • Agregar un texto al final de todas las entradas y/o página del sitio web que diga “Si te gusta esta publicación, comenta y comparte”.
  • Modificar la cantidad de publicaciones a mostrar por páginas en tu blog y tener otro valor diferente en los resultados del buscador de WordPress.

Si tienes alguna idea o ya has implementado algo, compártelo con otros en los comentarios. ¿Qué te parece?

2 thoughts on “Qué son y cómo funcionan los hooks en WordPress”

  1. Uno de mis hooks favoritos es ‘pre_get_posts’, ya que te permite customizar 100% como WP se va a comportar en cada pagina de forma eficiente. Otro que me gusta mucho es ‘template_redirect’. Cual es el hook favorito de ustedes?

    1. Yo últimamente utilizo mucho ‘template_redirect’ al desarrollar plugins y dar la posibilidad de utilizar plantillas propias al usuario del plugin. ‘pre_get_posts’ es poderosísima, entiendo tu favoritismo.

Deja un comentario