Les Hooks Dans WordPress : Utilisation et Exemples Pratiques

Les hooks WordPress, ou crochets, peuvent vous aider à atteindre vos objectifs commerciaux en étendant les capacités de votre site WordPress. Ils vous permettent d’interagir et de modifier le code à des endroits spécifiques sans modifier le cœur du CMS et permettent aux utilisateurs de modifier et d’ajouter facilement diverses fonctionnalités aux thèmes et plugins WordPress.

Dans ce tutoriel, nous apprendrons sur les hooks WordPress et leur utilité. De plus, nous inclurons des exemples pratiques de crochets WordPress pour vous montrer comment les utiliser sur votre site.

Que sont les hooks WordPress ?

Les hooks WordPress permettent aux utilisateurs de manipuler WordPress sans en modifier le cœur. Il est essentiel pour tout utilisateur de WordPress d’apprendre à utiliser des hooks car il permettent de modifier les paramètres par défaut des thèmes ou des plugins et, en fin de compte, de créer de nouvelles fonctions.

L’utilité des hooks

L’objectif premier des hooks est d’exécuter automatiquement une fonction. En outre, cette technique permet d’ajouter ou de modifier des fonctionnalités à WordPress sans toucher à ses fichiers principaux.

Les hooks sont divisés en deux catégories :

• Action – permet aux utilisateurs d’ajouter des données ou de modifier le fonctionnement de leur site web. Un hook d’action s’exécutera à un moment précis lorsque le noyau de WordPress, les plugins et les thèmes sont en cours d’exécution.
• Filtre – peut modifier des données pendant l’exécution du noyau, des plugins et des thèmes de WordPress.

En résumé, les hooks d’action reçoivent des informations, agissent en fonction de celles-ci et ne renvoient rien à l’utilisateur. Inversement, les crochets de filtrage reçoivent des informations, les modifient et les renvoient à l’utilisateur.

Vous trouverez ci-dessous un exemple de hook d’action qui relie la fonction mytheme_script avec l’action wp_enqueue_script.

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

Comment utiliser les hooks WordPress

L’utilisation des hooks WordPress nécessite quelques connaissances en HTML et en PHP. Heureusement, la création de hooks d’action et de filtre est relativement facile, même pour les débutants sur WordPress.

Créer un crochet d’action

Pour ajouter un hook d’action, vous devez activer la fonction add_action () dans un plugin WordPress. Pour ce faire, ajoutez le code suivant au fichier functions.php :

add_action( $target_hook, $the_name_of_function_you_want_to_use, $priority, $accepted_args );

Les hooks utilisent une échelle de priorité pour fonctionner correctement. Cette échelle est une valeur ordinale automatique basée sur une échelle de 1 à 999. 

Elle définit l’ordre des fonctions associées à ce hook particulier. Une valeur de priorité inférieure signifie que la fonction s’exécutera plus tôt, tandis qu’une valeur supérieure s’exécutera plus tard.

L’échelle montre l’ordre de sortie des fonctions lorsqu’elles utilisent le même target_hook. La valeur par défaut de priority_scale est 10. Vous pouvez modifier l’échelle en fonction du numéro de votre target_hook.

$accepted_args est chargé de définir le nombre d’arguments acceptés par la fonction. 

Par défaut, le système lui attribue la valeur 1. Voici un exemple de hook d’action pour le thème WordPress Twenty Twenty-Three ajouté à la fin du fichier functions.php :

<?php
function hook_javascript() {
    ?>
        <script>
            alert('Hello world...');
        </script>
    <?php
}
add_action('wp_head', 'hook_javascript');
?>
?>

Analysons le code de l’exemple ci-dessus :

• <?php – l’endroit où vous placez le hook de la fonction.
• function hook_javascript() – une fonction qui affectera la valeur initiale, affichant ainsi l’alerte pour les utilisateurs.
• <script> – représente le texte que vous voulez afficher sur le target_hook.
• alert(‘Hello world…’); – affichera une alerte pour les utilisateurs avec la phrase « Hello World ».
• add_action – la commande pour créer le hook d’action.
• ‘wp_head‘ – Le hook cible que la fonction modifiera.

En pratique, cela ressemble à ceci :

Créer un crochet de filtre

Vous pouvez créer un hook de filtre en utilisant la fonction add_filter(). Le hook de filtre modifie, filtre ou remplace une valeur par une nouvelle.

Comme pour un hook d’action, il filtre une valeur à l’aide des fonctions de hook de filtre associées, telles que apply_filter.

Voici un exemple de hook de filtre que nous allons ajouter au fichier functions.php du thème WordPress Twenty Twenty-Three :

add_filter( 'the_content', 'change_content' );
function change_content ( $content ) {
    $content = 'Filter hooks are amazing!';
    return $content;
}

Analysons l’extrait de code plus en détail :

• ‘the_content’ – le hook cible que la fonction va modifier.
• ‘change_content’ – affecte la valeur initiale, modifiant ainsi le contenu actuel.
• $content = ‘Filter hooks are amazing!’; – remplace le contenu de tous vos articles par la phrase écrite.
• return $content; – renvoie la nouvelle valeur à la fin.

Maintenant, si nous ouvrons n’importe quel article en utilisant le thème Twenty Twenty-Three, nous verrons quelque chose comme ceci :

Comme le montre l’exemple, la fonction de filtre a remplacé l’ensemble du contenu par la phrase « Filter hooks are amazing ! ».

Désactiver les hook d’actions et de filtres

Si vous voulez désactiver une commande de add_action() ou add_filter() dans votre code WordPress, utilisez remove_action() et remove_filter().

Ces fonctions permettent d’exclure certaines actions ou certains filtres. Leur utilisation permet de modifier un plugin avec trop de hooks inutiles qui risquent de perturber l’optimisation du site.

Il est également possible de supprimer ces lignes de code inutiles. Cependant, nous ne vous le recommandons que si vous travaillez avec votre propre plugin ou thème. En effet, une telle pratique avec les plugins ou les thèmes de quelqu’un d’autre peut provoquer une erreur fatale si vous supprimez les lignes incorrectes.

Voici un exemple de remove_action() dans WordPress :

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

L’exemple ci-dessus montre que la commande remove_action() supprime les scripts de pied de page par défaut de WordPress et les remplace par le thème de scripts de pied de page personnalisé de Hostinger.

Cette commande s’applique à tous les types de hooks d’action dans WordPress. En outre, voici un exemple de remove_filter() :

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

L’exemple ci-dessus montre comment désactiver wp_staticize_emoji_for_email, qui convertit les emojis en images statiques.

Il les remplace ensuite par disable_emojis_tinymce, qui désactive la fonctionnalité emoji de WordPress. Cela peut permettre à votre site d’être plus rapide, car les emojis nécessitent une requête HTTP supplémentaire.

De plus, vous pouvez utiliser la commande remove_filter() pour désactiver plusieurs filtres dans une séquence. Voici un exemple :

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' );

}

Le code ci-dessus vise à éliminer la fonction emoji dans WordPress. Il illustre le fait qu’il n’y a pas de limite au nombre de commandes remove_filter que les utilisateurs peuvent intégrer dans un fichier functions.php.

Exemples pratiques de hooks WordPress

Il existe un grand nombre de hooks que les utilisateurs peuvent utiliser pour créer des fonctions WordPress personnalisées. Voici quelques-uns des plus populaires :

admin_post_thumbnail_size

Ce filtre affiche une vignette de votre article dans la section « Featured Image ». Trois paramètres relient la fonction : $size, $thumbnail_id, et $post.

Le hook devrait ressembler à ceci :

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

N’oubliez pas que vous pouvez modifier le paramètre $size comme vous le souhaitez. Par exemple, si vous souhaitez définir la taille de la vignette à 240 x 240 pixels, utilisez ce code :

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

Il est également possible de définir une taille personnalisée pour la vignette en ajoutant la fonction array (). Le code ressemblera à ceci :

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

La fonction array () ci-dessus définit la taille de la vignette à afficher en 240 x 400 pixels.

after_password_reset

Ce hook d’action est activé lorsqu’un utilisateur réinitialise son mot de passe. Il se compose de deux paramètres, $user et $new_pass, et se présente comme suit :

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

Par exemple, WordPress utilise ce hook avec la fonction reset_password().

customize_loaded_components

Ce crochet est un filtre qui permet d’exclure certains composants de WordPress du processus de base. Ces fonctions fonctionnent sur les fichiers principaux, tels wp-activate.php, wp-config-sample.php, ou wp-settings.php.

Cependant, il est important de noter que la fonction customize_loaded_components ne peut pas être ajoutée à un thème puisqu’elle ne s’active que pendant la phase plugins_loaded.

Le hook se compose de deux paramètres : $components et $this, et se présente comme suit :

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

Le paramètre $components est un lot de fonctions de base à charger, tandis que $this fait référence à l’objet de la classe existante.

Il est possible de personnaliser la fonction array () pour déterminer les composants à exclure. L’exemple ci-dessus montre que les widgets et les nav_menus sont exclus du processus de base.

Conclusion

Les hooks WordPress peuvent être utiles à tout propriétaire de site web. Ils vous permettent d’ajouter des fonctions personnalisées ou de désactiver des processus sans modifier les fichiers principaux de WordPress.

Dans ce tutoriel, nous avons créé des hooks WordPress d’action et de filtre et montré quelques exemples pratiques.

Nous espérons que ce tutoriel vous sera utile. Si vous avez des questions, n’hésitez pas à nous laisser un commentaire ci-dessous.

Apprenez d’autres techniques WordPress pour élargir vos connaissances

FAQ sur les hooks WordPress

Si vous souhaitez en savoir plus sur les hooks WordPress, voici quelques questions fréquemment posées.