¿Qué son los hooks de WordPress? – Guía para principiantes

Los hooks de WordPress, también conocidos como ganchos, son una característica que te permite manipular un procedimiento sin modificar el archivo en el núcleo de WordPress. Un gancho puede aplicarse a acciones (hook de acción) o filtros (hook de filtro).

Aprender sobre ganchos es esencial para cualquier usuario de WP. Los hooks pueden ayudarte a crear algunas funciones o editar la configuración predeterminada de temas o plugins.

Descarga la hoja de trucos de WordPress definitiva

Propósito de los hooks

El propósito principal de los hooks de WordPress es ejecutar automáticamente una función. Además, esta técnica también tiene la capacidad de modificar, ampliar o limitar la funcionalidad de un tema o complemento.

Aquí hay un ejemplo de un gancho en WordPress:

function mytheme_enqueue_script() 
{wp_enqueue_script( 'my-custom-js', 'custom.js', false );}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_script' );

El ejemplo anterior muestra que el enlace se crea para conectar la función mytheme_enqueue_script con la acción wp_enqueue_scripts. Este gancho desencadena una nueva acción en tu sitio, por lo tanto, lleva el nombre de hook de acción.

Los ganchos a menudo se usan para hacer plugins que complementen una aplicación. No solo se usa en sistemas de administración de contenido (CMS) como WordPress, sino que también se usa comúnmente en sitios de comercio electrónico e intranet dentro de una empresa.

Además, como mencionamos anteriormente, los hooks de WordPress se dividen en dos categorías: acción y filtro. El hook de acción se usa para agregar un proceso, mientras que el hook de filtro sirve para cambiar o modificar el valor de un proceso.

¿Cómo usar los hooks en WordPress?

El uso de hooks en WordPress requiere un poco de conocimiento sobre HTML y PHP. Sin embargo, incluso si eres un principiante, la creación de ganchos de acción y filtro puede no ser tan difícil como crees.

Solo necesitas ir a los archivos de tu página y abrir el que desees cambiar con el editor de texto. Cuando estés allí, puedes pegar los ganchos que has copiado de otros sitios o que has creado tú mismo.

Crear un gancho de acción

Para agregar un hook de acción, debes activar la función add_action () en el plugin de WordPress. Esta función se puede activar escribiendo los siguientes patrones en tu archivo functions.php:

add_action('el nombre de la función de target_hook', 'el_nombre_de_la_funcion_que_quieres_usar' ,'escala_de_prioridad')

Como vemos arriba, los ganchos usan la escala de prioridad para funcionar correctamente. Esta escala es un valor ordinal automático basado en una escala del 1 al 999. Define la precedencia del orden para las funciones asociadas a ese gancho en particular.

Un valor de prioridad bajo significa que la función se ejecutará antes, mientras que el que tenga el valor más alto se ejecutará más tarde. La escala mostrará la secuencia de salida de las funciones instaladas cuando se usan los mismos target_hooks.

El valor predeterminado de priority_scale es 10. Puedes organizar la escala de acuerdo al número de target_hooks.

Aquí hay un ejemplo de un gancho de acción:

<?php
add_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts' );
function webhost_custom_footer_scripts(){
?>
<script>//coloca aquí los scripts de tu footer</script>
<?php
}
?>

Ten en cuenta el patrón en el ejemplo anterior:

• <?php es el lugar donde pones el gancho a funcionar.
• add_action es el comando para crear el gancho de acción.
• wp_print_footer_scripts es el target_hook que vincula a una nueva función.
• Hostinger_custom_footer_scripts es la función instalada y vinculada al target_hook
• <script> representa el texto que deseas mostrar en target_hook (en este caso, es wp_print_footer_scripts)

Crear un hook de filtro

Puedes crear un gancho de filtro utilizando la función apply_filters(). El gancho de filtro se usa para modificar, filtrar o reemplazar un valor con uno nuevo.

Al igual que con un gancho de acción, también tiene una función que filtra un valor con las funciones de hook de filtro asociadas (apply_filter).

Además, tiene la función de agregar un filtro de enlace para asociarlo con otra función (add_filter).

Aquí hay un ejemplo de un hook de filtro:

$score = 100;
echo "Current score is : ". apply_filters( 'change_score', $score );

• $score = 100 es el valor inicial del puntaje.
• echo “La puntuación actual es:” representa el script que mostrarás.
• apply_filters es el comando para crear un gancho de filtro.
• “change_score“, $score es la función a filtrar

Este es el filtro:

add_filter( 'change_score', 'function_change_score' );
function function_change_score( $score ){
? $score+=100;
? return $score;
}

• Add_filter se crea para conectar el gancho de filtro con una nueva función.
• ‘Change_score‘ es el gancho de destino (target hook) que se modificará.
• ‘Function_change_score‘ es una nueva función que afectará el valor inicial.
• ? $score+=100; es el código para agregar más valor al valor inicial ($score)
• ? return $score; es el código para mostrar el nuevo valor al final.

El resultado debería verse así:

La puntuación actual es: 200

Desenganchar acciones y filtros

Si deseas deshabilitar el comando add_action() o add_filter() de los hooks en tu código de WordPress, puedes usar remove_action() y remove_filter().

Estos códigos son básicamente una forma de excluir ciertas funciones de acción o de filtro. Te permiten modificar un complemento que tiene demasiados ganchos innecesarios que podrían interrumpir la optimización de tu sitio.

Quizás en este momento te estés preguntando; “¿Por qué no simplemente eliminar estos códigos innecesarios?”

Bueno, ciertamente es una opción viable si usas tus propios códigos.

Sin embargo, en WordPress, a menudo trabajas con los plugins o temas de otra persona. Significa que corres el riesgo de cometer un error fatal si eliminas las líneas incorrectas.

Aquí hay un ejemplo de remove_action() en WordPress:

remove_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts', 11 );
add_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts_theme', 11 );
function hostinger_custom_footer_scripts_theme()
{
?>
<script>//example of output by theme</script>
<?php
}

El ejemplo anterior muestra que remove_action se usa para eliminar los scripts de pie de página predeterminados de WordPress y reemplazarlos con el tema de scripts de pie de página personalizado de Hostinger.

Este comando es aplicable a todo tipo de ganchos de acción en WordPress.

Adicionalmente, aquí hay un ejemplo de remove_filter:

remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}

El ejemplo anterior muestra cómo desactivar wp_staticize_emoji_for_email, una función que convierte emojis en imágenes estáticas.

Luego es reemplazada con disable_emojis_tinymce que desactivará la función de emoji en WordPress (se sabe que emoji ralentiza el sitio porque realiza una solicitud HTTP adicional).

Además, también puede usar el comando remove_filter para deshabilitar varios filtros en una secuencia. Aquí hay un ejemplo:

function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_action( 'init', 'disable_emojis' );
}

El código anterior tiene como objetivo eliminar la función emoji por completo en WordPress. Ilustra claramente que no hay límites en la cantidad de comandos remove_filter que puedes incrustar en el archivo functions.php.

Ejemplos prácticos

Como mencionamos anteriormente, hay muchos hooks que puedes usar para crear funciones personalizadas en WordPress. Éstos son algunos de ellos:

admin_post_thumbnail_size

Este enlace de filtro muestra una imagen en miniatura de tu publicación en “Imagen destacada”. Hay tres parámetros que están conectados con las funciones: $size, $thumbnail_id y $post.

El gancho debería verse así:

function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_action( 'init', 'disable_emojis' );
}

Ten en cuenta que puedes cambiar el parámetro $size según tus necesidades. Por ejemplo, si deseas establecer el tamaño de la miniatura a 240×240 píxeles, puede escribir este código:

$size = apply_filters( 'admin_post_thumbnail_size', $size, $thumbnail_id, $post );

También puedes establecer un tamaño personalizado para tu miniatura agregando la función array (). El código se verá así:

$size = apply_filters( 'admin_post_thumbnail_size', array(240, 400), $thumbnail_id, $post);

La función de array () anterior configura tu miniatura para que se muestre en 240×400 píxeles. Debes encontrar el mejor tamaño que se adapte perfectamente a tu página.

after_password_reset

Este hook de acción se activa cuando un usuario restablece su contraseña. El gancho consta de dos parámetros; $user y $new_pass.

El gancho debería verse así:

do_action( 'after_password_reset', $user, $new_pass );

customize_loaded_components

Este hook actúa como un filtro para excluir algunos componentes de WordPress del proceso central. Con esto nos referimos a las funciones que se ejecutan en los archivos principales, como wp-activate.php, wp-config-sample.php o wp-settings.php. Mientras que el componente es una colección de características en WordPress que representa una función particular en el widget.

Sin embargo, es importante tener en cuenta que customize_loaded_components no se puede agregar a un tema, ya que solo se activa durante la fase de “carga de plugins“.

El gancho consta de dos parámetros: $components y $this. Debería escribirse así:

$components = apply_filters( 'customize_loaded_components', array( 'widgets', 'nav_menus' ), $this );

El parámetro $components es un lote de funciones principales a cargar, mientras que $this se refiere al objeto en la clase existente.

Puedes personalizar la función array () para determinar qué componentes excluir. El ejemplo anterior muestra que los widgets y nav_menus son los componentes excluidos del proceso central.

Conclusión

Para resumirlo todo, los hooks son las funciones usadas para cambiar la configuración predeterminada de tu sitio de WordPress. Te permiten agregar funciones personalizadas o deshabilitar procesos sin cambiar el archivo principal.

Los ganchos se pueden dividir en dos categorías: de acción y de filtro.

Aunque los métodos para usar estos dos son casi los mismos, ambos tienen funciones completamente diferentes.

El hook de acción se usa para crear nuevas funciones, mientras que el hook de filtro se usa para modificar el código existente en el archivo function.php.

Además, hay toneladas de hooks que puedes insertar en WordPress. Intenta experimentar usando varios tipos de ganchos para manipular las funciones como desees.

Cuando te vuelvas profesional, incluso podrás crear tus propios plugins con esta función. ¡Buena suerte!

Hooks de WordPress – FAQ

Si te interesa saber más sobre los hooks de WordPress, aquí tienes algunas preguntas frecuentes.