Quantcast
Channel: Webempresa
Viewing all articles
Browse latest Browse all 776

¿Hooks en WordPress cómo utilizarlos? - Guía rápida

$
0
0

Hooks en WordPress


Los Hooks de Wordpress son uno de esos términos que seguramente has escuchado alguna vez y que posiblemente ya hayas usado al hacer modificaciones a tu sitio.

Es una técnica que se usa en programación, pero vamos, no necesitas ser un programador para entender qué son y cómo usarlos en casos específicos.

En este artículo aprenderemos un poco más sobre ese mundo oculto de los Hooks en WordPress y las posibilidades que se presentan cuando sabes cómo usarlos.

     

 Una técnica para no modificar el Core

¿Te imaginas que quieres agregar o cambiar alguna funcionalidad de WordPress y para ello tengas que modificar los archivos del Core o núcleo de WordPress?

Es evidente que esto te traerá problemas ya que por un lado perderás todas las modificaciones que hayas hecho cuando actualices WordPress y por otro lado, la administración de tus cambios sería difícil de mantener.

A través de los Hooks en WordPress podemos cambiar, agregar, o eliminar funcionalidad que viene con WordPress y hacerlo de manera ordenada y sin perder los cambios cuando se actualice WordPress.

El término Hook se puede traducir como gancho y la siguiente imagen representa precisamente ese concepto, enganchamos código adicional al código del core de WordPress


Esquema funcionamiento Hooks en WordPress

Evidentemente, WordPress ya viene con estos “ganchos” preparados en lugares estratégicos para que se puedas añadir código personalizado.

 

 ¿Un plugin puede tener Hooks?

Efectivamente, esta técnica puede ser usada también por plugins, especialmente plugins que tienen mucha funcionalidad y que tendrán funcionalidad extendida por otros plugins.

Por ejemplo, en el caso del plugin de tienda WooCommerce, es un plugin con mucha funcionalidad y existen muchos plugins que extienden o modifican la funcionalidad de tienda que viene por defecto como pueden ser los métodos de pago adicionales, elementos adicionales en el detalle de producto, métodos de envío adicionales, etc.

 

 ¿En dónde agrego mis modificaciones?

Si estás construyendo un plugin, será parte del código de tu plugin, sin embargo lo más común es que se hagan modificaciones puntuales a tu sitio web que no merezcan hacer un plugin desde cero, por lo tanto puedes usar un plugin de snippets o puedes hacer las modificaciones en el archivo functions.php de tu tema hijo.

 

 Tipos de Hooks

Existen básicamente dos tipos de Hooks: Actions Hooks y los Filter Hooks.

 

Actions Hooks

Ejecutas una acción cuando se lanza código adicional en un determinado punto, similar a lo que sería la ejecución de código por eventos.

Los action Hooks son Hooks que ejecutan una acción pero que no devuelven ningún valor. Básicamente es agregar funcionalidad en un punto determinado del código de WordPress.

En la siguiente imagen veremos que en el archivo del core de WordPress se define los Actions Hooks con la función do_action(), sin embargo para usar los Hooks usaremos la función add_action().


Funcionamiento action hooks

La función de WordPress add_action() entonces es la función que usaremos, le pasaremos básicamente dos parámetros, el primero es el nombre del Hook y el segundo es el nombre de nuestra función personalizada en donde irá nuestro código que se añadirá al código de WordPress.

Esto sería lo básico, sin embargo para más información puedes consular la documentación oficial de add_action

Veamos esto con un ejemplo, el siguiente código agrega un archivo javascript a nuestro sitio web:


add_action("wp_enqueue_scripts", "web_insertar_js");

function web_insertar_js(){

    wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
    wp_enqueue_script('miscript');

}

En el código anterior hemos usado el Hook wp_enqueue_scripts para agregar un archivo javascript, como puedes ver en la función add_action se hace referencia a la función web_insertar_js en donde esta toda la lógica para agregar el archivo script.js.

Este código simplemente añade a cola el nuevo script pero no modifica ningún tipo de valor de entrada.

 

Filters Hooks

En programación pasar un filtro es hacer una modificación a algún dato, por ejemplo si quieres pasar un filtro a un texto, podría ser cambiar el texto por otro, cambiar el texto a mayúsculas, etc.

Los Filters Hooks, al igual que los Actions Hooks nos permiten ejecutar código en un determinado punto, sin embargo en este caso la función tendrá obligatoriamente que devolver un valor modificado.

En la siguiente imagen vemos que en el archivo del core de WordPress se define los Fiters Hooks con la función apply_filter(), sin embargo para usar los Hooks usaremos la función add_filter()


Funcionamiento filter hooks

Para usar un filtro usaremos entonces la función de WordPress add_filter() y le pasaremos básicamente dos parámetros, el nombre del Hook y el nombre de la función que hará las modificaciones.

Para más información sobre el uso de add_filter puedes consultar la documentación oficial de add_filter.

Veamos esto con un ejemplo para modificar el enlace de leer más en el listado de entradas:

    
        function web_modificar_leer_mas() {
            return ' Leer más ';
        }
        add_filter( 'the_content_more_link', 'web_modificar_leer_mas' );
    

En el código anterior hemos usado el Hook the_content_more_link, el cual hace referencia a la función web_modificar_leer_mas dentro de esta función podemos hacer las modificaciones HTML al enlace de leer más y devolverlo modificado.

 

 Localizando los Hooks

Lo ideal es buscar en el código de WordPress e ir viendo qué Hooks tengo disponibles para determinada funcionalidad, básicamente buscaría las funciones do_action y apply_filter, que como habíamos visto son las funciones de Actions Hooks y Filter Hooks.

Una forma alterna es buscar los Hooks por orden alfabético, para esto existe el sitio web hookr.io , que clasifica alternativamente los Hooks para su fácil localización, además tiene un plugin que puedes instalar y averiguar qué Hook tienes disponible en qué momento, aunque te recomiendo que instales el plugin en un sitio de prueba no en tu sitio web final ya que es un plugin para desarrollo.


Sitio web que clasifica hooks

En el siguiente vídeo te hago un resumen de lo comentado en este artículo.

 

 

 Conclusiones

Como hemos visto la flexibilidad de WordPress se basa en los Hooks, a través de esta técnica de programación los plugins y temas extienden la funcionalidad de WordPress, pero también los Hooks te pueden servir para agregar una funcionalidad específica en tu archivo functions.php de tu theme.

     

Viewing all articles
Browse latest Browse all 776

Trending Articles