Dans l’article sur l’utilisation des plugins et des widgets pour la configuration du site, j’avais mentionné à propos du vocabulaire anglais le plus fréquent, les mots shortcodes, snippets et hooks.
Entre temps, on a vu plusieurs applications des hooks. Ce faisant, on a utilisé des blocs de lignes de code, donc sans utiliser leur nom, des snippets.
Les snippets
Les snippets existaient avant l’informatique, puisqu’en français ce sont des bribes ou des petits bouts de n’importe quoi. S’agissant de code informatique, il s’agit de blocs de lignes de code. Cela va sans dire, il s’agit de blocs censés servir à quelque chose. Donc j’aurais tendance à dire que derrière le mot snippet, il y a la notion de sous-programme, d’enchainement ordonné de lignes de code ayant une fonction bien identifiée.
Quantité de sites proposent des snippets pour l’environnement WordPress, dont bien sûr StudioPress qui les met à disposition des utilisateurs de sa plateforme Genesis.
Pour utiliser un snippet, je le copie et je le colle où je veux dans mon propre code. Il peut aussi « être en boite », qu’on appelle shortcode.
Les shortcodes
Rien qu’au nom, on devine la parenté avec le snippet. Les spécialistes me démentiront peut-être, mais pour moi le shortcode est un snippet à qui on a donné un nom. Au lieu de copier-coller le snippet dans le code qu’on est en train d’écrire, on l’appelle par son nom écrit entre crochets (non, pas des hooks) : [nom_du_shortcode].
Bien sûr, il y a quantité de plugins qui fournissent des shortcodes.
Sur ce site, j’utilise Shortcodes Ultimate de Vladimir Anokhin. Du coup, j’ai, en haut de mon éditeur, un bouton « Insérer le shortcode ».
C’est tentant, appuyons. J’en ai 55 à l’écran : menu, tableau, bouton, YouTube, QRcode, etc.
Le bouton, je connais déjà, j’en ai mis 3 sur ma page d’accueil.
Le code QR, pourquoi pas, je clique sur QRcode. Là apparait une fenêtre avec quelques champs à compléter, rien de compliqué. Je referme la fenêtre.
Et maintenant, je l’appelle ici :
Dans mon code HTML (onglet ‘Texte’ de l’éditeur), je trouve entre [ ] le nom du shortcode et les paramètres (contenu du QRcode, titre, taille, etc.).
Avec certains shortcodes, par exemple celui du bouton, on a
[nom_du_shortcode Paramètres] Texte [/nom_du_shortcode].
Avec la balise de début et la balise de fin contenant un « / », on constate une similitude avec le code HTML. D’ailleurs, comme les balises HTML, on note que les shortcodes peuvent être imbriqués.
Pour qui a programmé en assembleur (souvenir…), ça ressemble fort à une macro : pas une fonction ou un sous-programme qu’on peut appeler, mais juste le nom du bloc de code qui sera copié-collé à l’endroit où on place ladite macro.
La différence entre macro et sous-programme, c’est que le texte (code) de la macro est écrit chaque fois qu’on écrit son nom alors que celui du sous-programme n’est écrit qu’une fois, même si on l’appelle plusieurs fois.
Informatiquement je n’affirme rien, mais conceptuellement, le shortcode est au code HTML ce que le widget est à la zone de widgets : une boite que je place où je veux et qui fabrique un objet tel que je l’ai paramétré. La différence pour l’utilisateur est que l’utilisation du widget est très graphique, alors que pour le shortcode on travaille dans l’éditeur de texte.
Les hooks
Il faut voir les hooks (en français, crochet ou hameçon) comme des emplacements du site auxquels on peut venir « accrocher », ajouter du code. Mais ce n’est pas tout à fait vrai, un hook n’est pas un endroit, c’est un bloc de lignes de codes placées au bon endroit.
Un hook est désigné par son nom : pour ajouter ou modifier des fonctionnalités, on indique à quel nom de hook on s’adresse, et quel code on veut qu’il exécute. Le hook permet d’apporter des modifications fonctionnelles sans modification du code du thème.
Le principal avantage est que si WordPress ou Genesis est mis à jour, les compléments qui ont été apportés ne sont pas perdus.
Un autre avantage est que si on commet une erreur dans le code qu’on ajoute, on a des effets bizarres mais on casse pas la plateforme de développement…
Un plugin particulièrement utile de Genesis est Genesis Visual Hook Guide de Chritopher Cochran.
Il permet comme son nom l’indique de visualiser les emplacements des hooks, directement « en surimpression » sur le site que l’on est en train de développer. C’est commode et très pédagogique.
En voici une présentation qui illustre la commodité de l’outil.
En cliquant sur le menu de Visual Hook Guide installé sur votre site par le plugin, on a 4 possibilités :
- Action Hooks
- Filter Hooks
- Markup
- Clear
Le hook action exécute une fonction ou empêche une fonction d’être exécutée.
Par osmose, je commence à comprendre comment utiliser les hooks actions :
- add_action, je lance une action, remove_action, j’annule
- syntaxe : add/remove_action( où ?, quoi ?)
où : c’est le hook, l’endroit où je veux accrocher mon code (qui a dit « hook je le mets » ?),
quoi : c’est la fonction, le code / script (suite de lignes de code) que je veux exécuter (add_action) ou dont je veux empêcher l’exécution (remove_action).
Le hook filtre génère une valeur. En tout cas c’est ce que j’ai lu, mais franchement, à ce stade, je n’ai pas assez utilisé les hooks filtres pour me permettre d’en parler. Je reviendrai certainement sur les hooks filtres dans un futur article, quand j’aurai un peu saisi comment ça fonctionne.
Philosophiquement, je vois dans la distinction entre hook action et hook filtre, une similitude avec la distinction entre procédure et fonction en langage Pascal : la procédure fait quelque chose, la fonction aussi (!) mais renvoie un résultat. Du coup, une fonction dont je n’exploite pas le résultat revient à une procédure. A ceci près que le Pascal étant très structuré, le compilateur me signale que j’ai fait un calcul pour rien…
Pour être complet sur Genesis Visual Hook Guide, je viens de cliquer sur Markup dans le menu. Markup, c’est le « M » du langage HTML, qui signifie balisage (en l’occurrence le fait de délimiter le texte par des balises).
J’aurais dû avoir cette curiosité plus tôt, car j’aurais immédiatement compris, sans avoir à tâtonner, à quelle délimitation exacte de zone correspondent exactement les « .wrap » largement utilisés dans le fichier style.css du thème enfant.
Chercher à expliquer oblige à comprendre, et là, ça m’a été utile…
