Comment créer une table des matières (TOC) avec Gutenberg manuellement
Pour la création d’une table des matières avec WordPress de façon manuelle, rien de bien compliqué.
Même s’il est souvent décrié, l’éditeur de texte natif de WordPress est très pratique avec son système de blocs. Pour le moment Gutenberg n’intègre pas nativement de bloc table des matières mais nous allons voir comment insérer une table des matières manuellement
Rendez-vous dans le tableau de bord de votre site WordPress et créez une page ou un article. Une fois votre article créé, donnez lui un titre et sauvegardez ce dernier. Maintenant, créons la table des matières :
- Ajoutez un bloc Gutenberg de type « liste ». Ce bloc sera, par la suite, plus adapté à présenter un sommaire ordonné.
- Une fois que votre bloc liste est inséré, renseignez brièvement les éléments (à moins d’avoir le sommaire de son contenu parfaitement en tête).
- Choisissez un élément de votre liste et cliquez pour ajouter un lien. Lorsque la fenêtre modale va vous demander de renseigner le lien, ajouter un lien de type #monancre1. Pour l’ID du lien d’ancrage, il faut qu’il soit unique et éviter les caractères farfelus. Tout en minuscule, sans accent et unique sera parfait.
- Maintenant, nous allons créer un bloc de type « Titre ». Par exemple, celui-ci sera le premier élément de notre table des matières. Renseignez le titre et dans la barre latérale de gauche, dans l’option « Niveau » choisissez bien H2 (ou autre) et non pas H1. Pour votre référencement, la balise H1 est unique et généralement c’est le titre de l’article qui possède cet attribut.
- Cliquez dans l’onglet avancé juste en dessous de « Réglages de couleur ». Vous allez voir apparaitre une option nommée « Ancre HTML ». Renseignez l’ID du lien d’ancrage du premier élément de votre sommaire SANS LE #.
- Enregistrez votre article et faites une prévisualisation.
Voilà, vous venez de créer votre première table des matières manuellement avec WordPress ! Rien de compliqué non ? Voyons maintenant comment insérer une table des matières pour le thème DIVI avec un plugin gratuit.
