1 – Introduction
Dans certains cas on est amené à écrire des articles un peu longs et même si ils sont bien structurés, le visiteur pourra parfois avoir l’impression de se perdre.
Pourquoi ne pas afficher une table des matières en début d’article, pour donner en premier lieu au visiteur une vue d’ensemble de l’article?
Je propose cette faculté de manière automatique dans les thèmes WordPress que je développe, sans recourir à un plugin spécifique.
2 – Les solutions existantes
Il existe plusieurs solution pour réaliser cela:
2.1 – Saisir une liste de liens pointant vers les titres internes de l’article.
Il faudra créer une ancre HTML sur chaque titre interne et faire pointer chaque lien de la liste vers un titre.
avantages: très simple à faire, même si c’est un peu fastidieux
inconvénients: Si l’article est modifié (ajout ou suppression de sections) il faut rectifier la liste.
2.2 – Installer un bloc Gutenberg spécifique dans WordPress.
Des développeurs ont déjà conçu des blocs intégrable dans l’éditeur de WordPress.
avantages: la simplicité. On installe le bloc et on l’utilise de suite et on contrôle la mise en page.
inconvénients: la présence d’un plugin supplémentaire, risque d’obsolescence si le plugin n’est pas mis à jour régulièrement et risque de faille de sécurité si le plugin n’est pas développé correctement.
3 – La solution Gibioctet
Je propose une solution simple, sans plugin, par l’analyse avec Javascript du code HTML généré et chargé dans le navigateur.
La procédure réalisée est la suivante:
- Examen des titres H2 contenus dans le code de l’article
- Détection de la présence d’au moins un titre H2 qui commence par un chiffre
- Si OUI, tous les contenus des titres H2 sont récupérés et une liste de liens et créée en tête de l’article
- Ensuite, chacun des titres H2 reçoit une ancre HTML, sous forme d’identifiant HTML, lié au lien correspondant dans le sommaire.
- Si NON, la procédure est ignorée et il n’y a pas de table des matières
4 – Vidéo récapitulative
Je vous propose une vidéo 1080HD récapitulative plus complète (env. 13mn) pour la présentation complète de la solution.
