Gibioctet

Lionel Gibaudan EI


ARTICLE

vous lisez: Table des matières automatique

publié le 15 mai 2023

Vous êtes sur le Blog de Gibioctet, vous pouvez à tout moment Retourner sur le site web

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.

Créer des ancres HTML avec WordPress

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.

Table des matières via un plugin WordPress
Table des matières via un plugin WordPress

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
Création sommaire automatique avec Gibioctet
Création sommaire automatique avec Gibioctet

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.

Quelques contenus similaires

(dans la même catégorie, affichés aléatoirement)