Hooks par-ci, hooks par-là… Mais pourquoi les développeurs et les intégrateurs évoquent sans cesse ce film avec Robin Williams, Dustin Hoffman et Julia Roberts ?
Non non, rien à voir, et ça n’est pas parce que sur notre module Ever Hook nous avons mis en image à la une le crochet du célèbre pirate (joke !) que cela a un quelconque rapport.
Un hook en revanche, c’est bien un crochet. Bien comprendre les hooks de son CMS, c’est bien comprendre son agencement et être capable de mettre en place de nouveaux éléments cohérents et en relation avec l’outil utilisé. Bien comprendre les hooks, c’est déjà maîtriser le design de son site (le reste étant de la compétence en liaison avec le webdesign).
Définition d’un hook sur un site internet
Un site internet utilisant modules ou plugins a besoin de savoir les emplacements où ces modules vont s’accrocher. « S’accrocher ». C’est bon, vous le tenez à présent ?
Un site dispose de nombreux crochets, comme un crochet « menu », un crochet « pied de page »…. Ces crochets, communément, utilisent le terme anglophone, donc « hook ». Un hook, c’est un endroit sur lequel vous pouvez accrocher des fonctionnalités, comme un module de devis dans une barre latérale (hook leftColumn), ou des fichiers CSS (hook header).
Chaque CMS dispose de ses propres hooks natifs. Prestashop dispose par exemple de pas loin de 150 hooks très utiles, c’est un peu différent pour WordPress – WooCommerce. On pourrait par exemple citer le hook wp_head pour WordPress, qui est dans l’en-tête du site, ou le hook header pour Prestashop, qui se trouve au même emplacement.
Il existe grosso-modo deux types de hooks :
- ceux qui affichent
- ceux qui exécutent ou filtrent
Les hooks d’affichage – de display
Normalement, si vous ne faites pas de développement, vous ne connaissez ou ne considérez que ceux qui s’affichent, que j’appelle des hooks de display (d’affichage). Les hooks de display sont visuels. Vous voyez clairement ce qui est greffé dessus : un widget, un module, un plugin… Cela se voit.
Attention, ne confondez pas un shortcode de WordPress avec une position. Un hook de display est véritablement un emplacement dédié à accueillir des outils externes visibles. Sous WordPress, cela correspond davantage à des zones de widgets (et finalement, les thèmes en incluent hélas bien peu gérables par les thèmes). Sur ce CMS, ils sont utilisés par les plugins et les développeurs qui raffolent du thème enfant (miam !)
Les hooks d’action ou de filtre
Ces hooks demandent bien plus de compétences car ils exécutent du code ou filtrent des éléments. Il est donc essentiel – voire capital – de se demander quel type de données l’on va traiter, et surtout comment. Vouloir afficher du contenu sur ce type de hook est une aberration : il ne se passera rien ou vous aurez des erreurs de code.
Un exemple tout bête sous WordPress est l’inscription d’un nouvel abonné. Celui-ci renseigne un formulaire, et clique sur un bouton, générant donc une action. Greffer une fonction sur cette action va vous permettre de traiter diverses choses, comme la vérification de l’adresse mail, ou les cases éventuellement cochées par l’internaute.
Un autre exemple sous Prestashop est par exemple la mise à jour du panier, à savoir quand un client ajoute, modifie ou supprime un élément de son panier. Vous pouvez depuis un module interagir sur cette action, avant que celle-ci ne soit bien enregistrée par le système (afin de tester le produit, les réductions, et que sais-je encore).
Au vu du nombre d’actions qu’il est possible de réaliser sur un site, et considérant les possibilités de filtres que l’on peut mettre en place et/ou adapter, ces hooks sont donc les plus utiles en matière de gestion de site.
Greffer un élément sur un hook
Bien souvent, et comme il n’y a pas deux sites qui se ressemblent, vous pouvez avoir besoin de greffer des plugins, des fonctions ou des modules sur un hook précis. Tout simplement parce que votre cahier des charges vous l’impose, votre design en a besoin, ou parce que cela vous arrange et facilite votre gestion.
Greffer une fonction sur un hook WordPress – WooCommerce
Je ne parlerai pas ici de greffer des plugins à des emplacements qui ne leur sont pas réservés à l’origine, car cela serait bien trop spécifique et WordPress permet de réaliser des thèmes enfants de manière simple, permettant de créer ses propres fonctions.
Beaucoup de thèmes incluent désormais des thèmes enfants, et je ne saurais trop recommander d’en développer systématiquement, notamment afin d’ajouter des règles de sécurité, et tout une liste de petites fonctions qui vous aideront à booster votre site WordPress WooCommerce.
Une fonction sous WordPress (ou WooCommerce) se greffe dans le functions.php de votre child theme de la manière suivante :
add_action('wp_head', 'generated_favicons');
Où l’on peut donc traduire ça par :
« Ajoute une action, dans le head de mon WordPress, greffes-y la fonction generated_favicons ». Ne nous reste donc qu’à créer la fonction.
La fonction dépend de ce que vous désirez faire. Ici, le nom de ma fonction détermine clairement que ce sont des favicons générés, afin d’améliorer ce point sur mon site. La fonction est la suivante :
/**
* Generated favicons
* Useful for no 404 on favicons with Apple and Android
*/
function generated_favicons()
{
echo '
<link rel="apple-touch-icon" sizes="57x57" href="'.get_site_url().'/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="'.get_site_url().'/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="'.get_site_url().'/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="'.get_site_url().'/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="'.get_site_url().'/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="'.get_site_url().'/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="'.get_site_url().'/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="'.get_site_url().'/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="'.get_site_url().'/favicon/apple-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="'.get_site_url().'/favicon/apple-icon-57x57.png" />
<link rel="icon" type="image/png" sizes="192x192" href="'.get_site_url().'/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="'.get_site_url().'/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="'.get_site_url().'/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="'.get_site_url().'/favicon/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="'.get_site_url().'/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
';
}
Je vide à présent le cache de mon site, j’ai bien mes favicons en place sur le serveur, et je peux les visualiser. J’ai donc greffé une fonction depuis mon thème enfant sur le hook du head de mon site WordPress WooCommerce. What else ?
Greffer un module sur un hook Prestashop
Sous Prestashop, et quand bien même il est désormais – depuis la version 1.7 – possible de créer des thèmes enfants, l’architecture n’a strictement rien à voir avec WordPress (et je préfère d’ailleurs l’architecture de Prestashop, mais c’est une considération toute personnelle et liée à mon activité). On ne greffera rien du tout depuis un thème enfant, ceux-ci sont réservés intégralement au design.
Prestashop différencie bien les hooks d’affichage des hooks d’action, en les préfixant par les termes « display » ou « action », très pratique ! Comme j’ai tendance à le dire, sous Prestashop, tout est module. Enfin, quasiment tout, mais si vous désirez afficher un bloc de texte HTML dans le pied de page, il va vous falloir passer par un module.
Je vais partir du principe que vous avez récupéré le module Ever Content SEO, qui permet d’ajouter du rédactionnel sur les pages catégories, fabricants et fournisseurs. Vous allez voir que nous allons plus tard avoir besoin de créer un hook pour améliorer ce module selon votre site.
Dans le module se une fonction justement nommée public function hookFooter(). Celle-ci permet donc d’exécuter du code dans le pied de page.
Imaginons que pour une raison ou une autre, j’aimerais que ce module soit plutôt greffé dans le hook nommé displayTop, à savoir sur un emplacement où généralement nous trouvons le menu ou un diaporama.
Je vous ai donc d’emblée fourni un indice pour ajouter cela, avec le nom du hook ! La fonction sera donc celle-ci :
public function hookDisplayTop()
{
}
Et pour éviter de « réinventer la roue », notre fonction va donc en appeler simplement une autre déjà existante, comme ceci :
public function hookDisplayTop()
{
return $this->hookDisplayFooter();
}
Enregistrez et pensez à aller greffer le module sur cet emplacement depuis votre back-office Prestashop. Attention cependant aux modules qui utilisent des paramètres dépendant de l’emplacement sur lequel ils sont greffés, cela pourrait ne pas fonctionner et vous auriez besoin d’une adaptation ou d’une refonte du module pour qu’il corresponde à vos besoins.
Lister ses hooks
Pouvoir ajouter ou modifier des éléments sur des hooks précis est une excellente compétence, mais encore faut-il connaître ses hooks. Je pourrais m’arrêter ici et prétendre que cela dépend de votre niveau de compétences, mais quand bien même cela ne serait pas totalement faux, cela ne serait quand même pas très sympathique de ma part. Voyons donc à présent comment les connaître et savoir lesquels utiliser, ou repérer les hooks utiles.
Sous WordPress – WooCommerce
Comme sous WordPress WooCommerce cela dépend énormément de votre thème, il va falloir l’apprendre ! Certains communiquent via leur documentation les hooks disponibles, mais cela se trouve généralement dans une documentation spécifique liée aux développeurs, ou parfois aux intégrateurs.
D’emblée, vous disposez de tous les hooks natifs de WordPress et de WooCommerce (ceux-ci évoluant avec le temps, pour améliorer votre confort de gestion et d’optimisation). Le codex de WordPress a eu la bonne idée de les lister, afin que nous puissions savoir lequel utiliser selon nos besoins. La liste est donc visible à cette URL :
https://codex.wordpress.org/Plugin_API/Action_Reference
Par exemple, dans cette liste, nous pouvons voir le hook init, qui s’exécute à chaque fois que votre site est chargé, instancié, initialisé (très utile en phase de développement, de création ou de récupération de données, vous n’imaginez pas à quel point !)
Le hook init est cliquable dans la liste, ce qui nous permet de visualiser la page le définissant, avec un exemple, le changelog et même l’emplacement de ce hook. La page du hook init est la suivante :
https://codex.wordpress.org/Plugin_API/Action_Reference/init
Que faire avec ce hook ? Par exemple, à chaque chargement de page, je pourrais récupérer la liste des nouveaux articles et les enregistrer sous un autre format, de manière à les renvoyer vers un autre CMS, ou automatiser une traduction depuis Google Traduction, ce qui me permettrait d’avoir automatiquement un contenu multilingue selon al quantité de mots utilisés, ou importer un catalogue sous conditions (si l’utilisateur courant est connecté et administrateur), etc.
Les hooks disponibles au sein de votre thème sont bien trop vastes et spécifiques pour être abordés sur ce tutoriel (veuillez m’en excuser) et je n’ai pas vraiment la motivation pour lister tous ceux que je connais, raison pour laquelle nous allons voir plus bas comment en créer 😉
Sous Prestashop
Les hooks sous Prestashop sont d’emblée visibles depuis votre back-office. Dans leur grande mansuétude, les développeurs de Prestashop nous ont fourni un onglet permettant de visualiser, greffer et dégreffer un module d’un hook (à supposer que le module puisse bien évidemment le faire).
Sous Prestashop 1.7, cet onglet se trouve dans « Apparence » puis « Positions ». Dans la version 1.6, cet onglet se trouve dans « Modules » puis « Positions » (ce que de vous à moi je trouvais plus logique).
La version 1.6 incluait un outil de « Live Edit » mais que j’ai toujours trouvé très trompeur et peu fiable. Notez sur l’image ci-dessus le nom des hooks, commençant par le terme « Display », signifiant qu’il s’agit bien de hooks d’affichage.
Vous verrez sur cet onglet plus des trois quarts des hooks, certains n’étant pas affichés pour des raisons évidentes, car il n’y a nul besoin de greffer des modules à ces emplacements (et cela pourrait même se révéler risqué à terme). Un hook très utile en terme de référencement naturel est par exemple le hookHeader, qui s’exécute avant la fermeture de la balise HTMLM head. Par exemple, Ever SEO (module de référencement pour Prestashop) se greffe à cet emplacement pour afficher les codes Analytics, Search Console, Facebook, hreflangs, etc.
Si vous désirez donc qu’un module qui s’est greffé en barre latérale de gauche et de droite ne s’affiche plus que sur la barre de gauche, cherchez dans les positions le hook « displayrightcolumn », vous y verrez le module, et pourrez de la sorte le dégreffer facilement, soit en deux clics. Rapide, facile, efficace, et de plus cela vous aidera à apprendre les hooks de Prestashop. Si vous désirez en connaître la totalité, retrouvez ici la liste des hooks pour Prestashop 1.6, et là la liste des hooks pour Prestashop 1.7.
Créer un hook
Et si nous avions besoin de créer nos hooks ? Certains thèmes en ajoutent des personnalisés, et l’on peut en déduire que seuls eux les utiliseront, cependant un webdesigner, un administrateur de site ou un e-commerçant peut être amené à avoir besoin d’un emplacement personnalisé. Voyons donc comment créer nos propres hooks (procédure que n’importe quel webdesigner devrait savoir faire sur les CMS avec lesquels il travaille).
Sous WordPress – WooCommerce
Sous WordPress, passons encore par un thème enfant, le hook étant toujours étroitement lié à la mise en page. Il faut donc que vous maîtrisiez l’architecture de votre site, non au niveau front-office ni au niveau de la navigation, mais bien pour que vous soyez en mesure de savoir clairement quel est le fichier exécuté sur une page en cours. Comme cela dépend à chaque fois du thème utilisé, cela signifie que vous le connaissez sur le bout des doigts (est-ce le cas ?)
Dans cet exemple, je vais montrer comment créer un hook juste après l’ouverture de la balise body, comme cela peut être demandé par certains outils de référencement gratuit ou payant.
Selon votre thème, éditez le fichier header.php ou head.php. Repérez la balise <body> et ajoutez-y avant cette ligne de code :
<?php do_action('my_hook_after_body'); ?>
Le hook est créé, simple n’est-ce pas ? Mieux encore, ajoutez-y des conditions pour n’afficher le contenu que si l’utilisateur est connecté :
<?php
if (is_user_logged_in()) {
do_action('my_hook_after_body');
}
?>
Et voilà ! Votre hook sera disponible uniquement pour les utilisateurs connectés. Simple, n’est-ce pas ? Et donc, pour greffer une fonction sur ce hook, cela se passera donc ainsi :
<?php
function my_function()
{
return true;
}
add_action('my_hook_after_body', 'my_function');
?>
Soit comme nous l’avons tout simplement vu plus haut 🙂
Sous Prestashop
Sous Prestashop, il vous faudra un peu plus de compétences, car l’outil sépare bien la partie design de la partie développement. Nous avions déjà abordé la création de hooks sous Prestashop dans ce tutoriel et avons même développé un module Prestashop 1.6 & 1.7 permettant de les créer plus rapidement, mais revoyons cela.
Création du hook en base de données
Un hook sous Prestashop est enregistré en base de données. Vous allez donc devoir vous y connecter pour l’ajouter, raison pour laquelle je parlais ci-dessus de compétences un peu plus poussées. Il faut également faire très attention, toute suppression étant définitive lorsque vous travaillez sur une base de données. Je citerai donc sans cesse la loi numéro 4 de la Team : sauvegardez !
Si vous ne préférez pas vous connectez à la base de données, ou si vous préférez vous simplifier la vie, vous pouvez retrouver notre module de création de hook pour Prestashop en cliquant ici. Sinon, voici la procédure.
Une fois connecté à votre base de données, rendez-vous dans la table ps_hook, selon le préfixe de table que vous avez défini sur installation de votre Prestashop. La table ressemble à ceci :
Cliquez sur le bouton « Insérer » se trouvant en haut de votre panel PhpMyAdmin et renseignez les champs comme il suit :
Cliquez ensuite sur le bouton « Exécuter », vous avez créé votre hook. Il s’agit à présent de l’afficher.
Affichage du hook dans le thème
Je partirais ici du principe que vous utilisez soit le thème default-bootstrap pour Prestashop 1.6, soit le thème Classic pour Prestashop 1.7. Différencions les deux, car je vais utiliser un thème enfant un peu boosté pour ajouter le hook. Le but ici est de greffer un module à la fin d’une liste de produits, donc autant sur une page catégorie, une page fabricant, ou une page fournisseur.
Ajout du hook sous Prestashop 1.6 avec default-bootstrap
Nous allons modifier le thème existant, bien que je n’aime pas cela, vous devriez vous approprier systématiquement les modifications réalisées sur un thème par défaut, sans quoi sur une mise à jour le risque est sans sauvegarde de tout perdre.
Modifions le fichier product-list.tpl qui se trouve à la racine de votre thème. Tout en bas, ajoutez simplement ceci :
{hook h="displaycategoryfooter"}
Validez pour sauvegarder l’affichage de ce hook. Il ne reste plus qu’à greffer le module dessus !
Ajout du hook sous Prestashop 1.7 avec Classic et thème enfant
Considérons que vous avez créé un thème enfant. Si ce n’est pas le cas, privilégiez d’abord ce tutoriel qui vous expliquera comment créer un thème enfant et l’améliorer sous Prestashop 1.7.
Copiez le fichier product-listing qui se trouve dans le thème parent (à savoir dans /themes/classic/templates/catalog/listing) et collez-le en respectant bien l’arborescence dans votre thème enfant.
Tout à la fin du fichier, ajoutez ceci :
{block name='hook_mon_hook'}
{hook h='displayMonHook'}
{/block}
Soit la nouvelle syntaxe permettant d’identifier votre bloc, et de déclarer votre hook dans le thème.
Enregistrez, c’est terminé. Reste à greffer le module dessus, à l’étape suivante.
Greffage d’un module sur ce hook
Modifions le même module cité plus haut, car désormais nous voulons que ce module s’affiche sur notre petit hook fraîchement créé et ajouté dans le thème. Sur ce même module, Ever Content SEO, ajoutons la méthode suivante :
public function hookDisplayMonHook()
{
return $this->hookDisplayFooter();
}
Enregistrez le code du module modifié, et allez greffer le module sur ce nouveau hook. Videz également le cache de votre site Prestashop (dans le doute) et vous avez terminé.
Petits conseils sur les hooks
Ces conseils sont très simples, mais essentiels. Tout d’abord, n’utilisez pas de hooks en production si ceux-ci ne sont pas préalablement testés et correctement appréhendés. Vous risqueriez de générer des erreurs de code, pour cela vous devriez d’abord tester sur un site sur votre ordinateur, ou sur une version de développement en ligne.
Suivez bien les modifications que les CMS réalisent sur ces hooks. Certains disparaissent, d’autres retournent des messages d’obsolescence, d’autres encore sont créés ou améliorés. Cela correspond donc à une forme de veille technologique, qui par-dessus le marché augmentera votre savoir-faire.
Prenez des notes et sauvegardez votre code dans un coin de votre disque dur. Car si vous avez réussi une fois à modifier, créer ou greffer, cela pourra vous servir de modèle pour plus tard, et vous gagnerez du temps. Inutile de sauvegarder tout le thème, tout le module ou toutes les fonctions, pensez juste à vous noter en coin le processus que vous avez réalisé. Tout cela sera un véritable gain de temps plus tard lorsqu’une nouvelle demande dans ce sens vous parviendra.
Bonne création à toutes & à tous !
Imprimer
Laisser un commentaire