Il y a quelques jours, j’ai publi\u00e9 un glossaire Kanban IT. 25 d\u00e9finitions, bien structur\u00e9es, avec des exemples concrets. Le genre d’article qu’on \u00e9crit une fois et qu’on r\u00e9f\u00e9rence souvent.<\/p>\n\n\n\n
Et c’est l\u00e0 que le probl\u00e8me a commenc\u00e9.<\/p>\n\n\n\n
Un glossaire, c’est bien. Mais un glossaire que personne ne trouve, c’est du contenu mort.<\/p>\n\n\n\n
L’id\u00e9e \u00e9tait simple : chaque fois que j’\u00e9cris \u00ab\u00a0WIP\u00a0\u00bb, \u00ab\u00a0Lead Time\u00a0\u00bb ou \u00ab\u00a0Throughput\u00a0\u00bb dans un article, je voulais que le mot devienne cliquable<\/strong> et renvoie vers sa d\u00e9finition. Avec un petit tooltip au survol<\/strong> pour les lecteurs press\u00e9s.<\/p>\n\n\n\n Le probl\u00e8me ? J’ai d\u00e9j\u00e0 une dizaine d’articles. Et j’en \u00e9crirai d’autres. Aller modifier chaque occurrence \u00e0 la main, c’est :<\/p>\n\n\n\n Bref, il me fallait une solution automatique.<\/p>\n\n\n\n J’ai d’abord cherch\u00e9 dans le r\u00e9pertoire WordPress. Il existe des plugins de glossaire : CM Tooltip Glossary, Jesweb Glossary, etc.<\/p>\n\n\n\n Le souci ? Ils fonctionnent tous avec leur propre syst\u00e8me de termes (un custom post type d\u00e9di\u00e9). Moi, j’avais d\u00e9j\u00e0 mon article glossaire, bien structur\u00e9 avec des H2 pour chaque terme.<\/p>\n\n\n\n Je ne voulais pas :<\/p>\n\n\n\n Ce qu’il me fallait, c’\u00e9tait un plugin qui parse mon article existant<\/strong> et utilise directement mes H2 comme source.<\/p>\n\n\n\n Spoiler : \u00e7a n’existait pas.<\/p>\n\n\n\n Alors j’ai cod\u00e9 le mien. Enfin, avec un peu d’aide de mon assistant IA pr\u00e9f\u00e9r\u00e9.<\/p>\n\n\n\n Le cahier des charges :<\/strong><\/p>\n\n\n\n Le r\u00e9sultat :<\/strong> un plugin de ~400 lignes de PHP, propre, maintenable, et qui fait exactement ce que je veux.<\/p>\n\n\n\n Le plugin utilise DOMDocument pour parser le HTML de mon article glossaire. Il cherche tous les Pour que les liens pointent directement vers la bonne section, j’utilise les ancres HTML de Gutenberg. Le plugin g\u00e9n\u00e8re des ancres simples : Il suffit d’ajouter ces ancres dans Gutenberg (Bloc H2 \u2192 Avanc\u00e9 \u2192 Ancre HTML).<\/p>\n\n\n\n Le plugin s’accroche au filtre Important :<\/strong> l’article original en base de donn\u00e9es n’est jamais modifi\u00e9. Le remplacement se fait uniquement \u00e0 l’affichage.<\/p>\n\n\n\n Pas de JavaScript pour les tooltips. Juste du CSS avec Le plugin ajoute une page dans R\u00e9glages \u2192 Vultask Glossary.<\/p>\n\n\n\n On y trouve :<\/p>\n\n\n\n Quand j’ajoute un nouveau terme dans mon glossaire, je clique sur le bouton, et c’est propag\u00e9 instantan\u00e9ment \u00e0 tous mes articles.<\/p>\n\n\n\n Chaque article qui mentionne un terme Kanban pointe maintenant vers le glossaire. Google adore le maillage interne. Et mon glossaire accumule les liens entrants naturellement.<\/p>\n\n\n\n Un lecteur qui ne conna\u00eet pas le \u00ab\u00a0WIP\u00a0\u00bb peut survoler le mot et voir la d\u00e9finition sans quitter l’article. S’il veut approfondir, un clic et il arrive directement sur la section concern\u00e9e.<\/p>\n\n\n\n Je n’ai plus \u00e0 penser aux liens quand j’\u00e9cris. Le terme \u00ab\u00a0Lead Time\u00a0\u00bb sera automatiquement li\u00e9, que ce soit dans un article d’aujourd’hui ou dans un article \u00e9crit il y a 6 mois.<\/p>\n\n\n\n J’aurais pu cr\u00e9er un shortcode Certains plugins permettent de d\u00e9finir des termes manuellement. Mais je voulais une source unique de v\u00e9rit\u00e9 : mon article.<\/p>\n\n\n\n Techniquement possible, mais mauvais pour le SEO. Les bots ne voient pas toujours le contenu inject\u00e9 en JS.<\/p>\n\n\n\n Le plugin est disponible si \u00e7a t’int\u00e9resse. Il est sp\u00e9cifique \u00e0 ma structure (H2 avec \u00ab\u00a0D\u00e9finition :\u00a0\u00bb en dessous), mais facilement adaptable.<\/p>\n\n\n\n Les grandes lignes :<\/p>\n\n\n\n\n
\n\n\n\nLa qu\u00eate : trouver le plugin parfait<\/h2>\n\n\n\n
\n
\n\n\n\nLa solution : un plugin maison en PHP<\/h2>\n\n\n\n
\n
\n\n\n\nComment \u00e7a marche (sous le capot)<\/h2>\n\n\n\n
1. Extraction des termes<\/h3>\n\n\n\n
<h2><\/code>, extrait le terme principal (avant le tiret), et r\u00e9cup\u00e8re le paragraphe \u00ab\u00a0D\u00e9finition\u00a0\u00bb qui suit.<\/p>\n\n\n\n$h2_nodes = $xpath->query('\/\/h2');\nforeach ($h2_nodes as $h2) {\n $term = $this->extract_term_from_h2($h2->textContent);\n $definition = $this->find_definition_after_h2($h2);\n \/\/ ...\n}\n<\/code><\/pre>\n\n\n\n2. G\u00e9n\u00e9ration des ancres<\/h3>\n\n\n\n
wip<\/code>, lead-time<\/code>, throughput<\/code>…<\/p>\n\n\n\n3. Remplacement \u00e0 la vol\u00e9e<\/h3>\n\n\n\n
the_content<\/code> de WordPress. \u00c0 chaque affichage d’article :<\/p>\n\n\n\n\n
<span><\/code> contenant le lien + le tooltip<\/li>\n\n\n\n4. Tooltip CSS pur<\/h3>\n\n\n\n
:hover<\/code>, position: absolute<\/code>, et une petite fl\u00e8che en pseudo-\u00e9l\u00e9ment. L\u00e9ger, rapide, compatible partout.<\/p>\n\n\n\n
\n\n\n\nL’interface admin<\/h2>\n\n\n\n
\n
\n\n\n\nLes b\u00e9n\u00e9fices SEO (et UX)<\/h2>\n\n\n\n
Maillage interne automatique<\/h3>\n\n\n\n
Exp\u00e9rience utilisateur am\u00e9lior\u00e9e<\/h3>\n\n\n\n
Maintenance z\u00e9ro<\/h3>\n\n\n\n
\n\n\n\nCe que j’aurais pu faire diff\u00e9remment<\/h2>\n\n\n\n
Option 1 : Shortcodes<\/h3>\n\n\n\n
[glossaire terme=\"WIP\"]<\/code> \u00e0 placer manuellement. Plus de contr\u00f4le, mais retour \u00e0 la case d\u00e9part : il faut y penser \u00e0 chaque fois.<\/p>\n\n\n\nOption 2 : Plugin existant + adaptation<\/h3>\n\n\n\n
Option 3 : JavaScript c\u00f4t\u00e9 client<\/h3>\n\n\n\n
\n\n\n\nLe code source<\/h2>\n\n\n\n