Widget « Table des matières » Elementor

Plugin WordPress ajoutant un widget Elementor qui génère automatiquement un sommaire interactif à partir d'identifiants HTML de widgets Elementor (titres, accordéons).

Prérequis

Installation

1. Copier le dossier elementor-toc-widget/ dans wp-content/plugins/.
2. Activer le plugin depuis « Extensions → Extensions installées » dans l'administration WordPress.
3. Le widget « Table des Matières » est désormais disponible dans le panneau de widgets Elementor (icône eicon-table-of-contents).

Structure du plugin

elementor-toc-widget/
├── elementor-toc-widget.php   # Point d'entrée, déclaration du plugin, hooks WordPress/Elementor
├── assets/
│   ├── toc-widget.js          # Script front-end (initialisation du sommaire, scroll, accordéons)
│   └── toc-widget-editor.js   # Script éditeur (boutons Scanner et Rafraîchir)
└── widgets/
    └── toc-widget.php         # Classe du widget Elementor (contrôles, rendu HTML)

Utilisation dans Elementor

Ajouter le widget à une page

Rechercher « Table des Matières » dans le panneau de widgets Elementor et le glisser-déposer à l'emplacement souhaité sur la page.

Panneau de configuration

Le widget expose quatre contrôles dans l'onglet « Contenu → Paramètres ».

Titre

Texte affiché en tant que titre du bloc sommaire côté front-end. Valeur par défaut : Table des matières.

Liste des IDs

Textarea dans lequel sont saisis les identifiants CSS des éléments à référencer dans le sommaire, un identifiant par ligne.

section-intro
accordeon-faq
section-contact

Ces identifiants doivent correspondre aux « CSS ID » définis dans l'onglet « Avancé » de chaque section ou widget Elementor ciblé. Le préfixe # est accepté, mais facultatif ; les doublons et les lignes vides sont ignorés automatiquement.

Le widget accepte deux types d'éléments cibles :

• Titres (h1-h6) : le texte du titre est utilisé comme libellé dans le sommaire.
• Accordéons Elementor (e-n-accordion) : chaque panneau de l'accordéon donne lieu à une entrée distincte dans le sommaire, avec le texte du panneau comme libellé.

Ouvrir automatiquement les accordéons

Interrupteur (activé par défaut). Lorsqu'il est actif, cliquer sur une entrée du sommaire pointant vers un panneau d'accordéon ouvre ce panneau avant d'y faire défiler la page.

Bouton « Scanner »

Analyse automatiquement le document ouvert dans la prévisualisation Elementor et remplit la liste des IDs avec tous les identifiants de titres et d'accordéons trouvés sur la page. Seuls les éléments possédant déjà un « CSS ID » sont détectés.

Astuce : après avoir cliqué sur Scanner, vérifier et réordonner manuellement les IDs si nécessaire, car l'ordre reflète l'ordre d'apparition dans le DOM.

Bouton « Rafraîchir »

Force le rechargement du rendu du widget dans la prévisualisation sans modifier la liste des IDs. Utile après avoir ajouté ou modifié des éléments sur la page sans repasser par le bouton Scanner.

Comportement front-end

Résolution des libellés

Côté serveur, un libellé de substitution est généré à partir de l'identifiant (les tirets et underscores sont remplacés par des espaces, la première lettre est mise en majuscule). Ce libellé est ensuite remplacé côté client selon la priorité suivante :

1. Attribut title de l'élément cible.
2. Texte du premier titre (h1–h6) contenu dans l'élément, ou texte de l'élément lui-même s'il est un titre.
3. Slug lisible dérivé de l'identifiant (fallback).

Gestion des accordéons

Lorsqu'un identifiant pointe vers un widget accordéon Elementor, le script front-end remplace l'entrée unique du sommaire par autant d'entrées qu'il y a de panneaux dans l'accordéon. Chaque entrée porte le libellé du panneau correspondant.

Au clic, si l'option « Ouvrir automatiquement les accordéons » est activée, le panneau ciblé est ouvert (si ce n'est pas déjà le cas) avant que le défilement lisse ne soit déclenché.

Défilement et historique

Le clic sur un lien du sommaire effectue un défilement lisse (scrollIntoView avec behavior: smooth) vers l'élément cible. Pour les entrées non liées à un accordéon, l'URL est mise à jour avec l'ancre correspondante via history.pushState.

Limitations connues

• Seuls les accordéons Elementor utilisant la structure e-n-accordion / e-n-accordion-item (Elementor v3.x widget Accordion natif) sont pris en charge.
• Le bouton « Scanner » ne détecte que les éléments qui ont déjà un « CSS ID » défini dans Elementor ; les éléments sans ID ne sont pas proposés.

Licence

GPL v3 ou ultérieure - voir https://www.gnu.org/licenses/gpl-3.0.html.

© 2026 Marc MOSCA - https://marc-mosca.fr