Comment créer une table des matières dans WordPress

Publié: 2022-10-27

Une table des matières dans WordPress peut être un ajout efficace aux pages ou aux publications de votre site Web. Ils sont parfaits pour améliorer l'expérience utilisateur et pour naviguer dans les textes longs. De plus, ils offrent un léger avantage en matière de référencement.

Dans cet article, nous allons vous montrer étape par étape comment ajouter facilement une table des matières à votre site WordPress avec un plugin. Et nous vous montrerons les étapes simples nécessaires pour en créer un à partir de zéro. Donc, si vous êtes ici pour une table des matières pour WordPress, cet article a ce dont vous avez besoin.

Voici ce que nous couvrirons :

  • Qu'est-ce qu'une table des matières ?
  • Avantages d'une table des matières dans WordPress
  • Comment ajouter une table des matières avec un plugin
  • Comment créer une table des matières manuellement
  • Créer une table des matières dans Divi

Qu'est-ce qu'une table des matières dans WordPress ?

Une table des matières WordPress est essentiellement une liste des principaux titres ou sujets couverts dans le contenu d'une page ou d'un article. Ils sont parfaits pour donner aux utilisateurs un aperçu de ce qui est à venir. Généralement, ils sont placés en haut d'une page, juste après le titre ou le paragraphe d'introduction.

Exemples

Habituellement, une table des matières se compose d'une liste de liens d'ancrage (ou liens de saut) vers les titres correspondants sur la page. Lorsque vous cliquez dessus, les liens d'ancrage sautent ou défilent jusqu'à l'en-tête correspondant où le contenu sera trouvé. Cela permet aux visiteurs de naviguer facilement sur la page.

Les avantages de créer une table des matières dans WordPress ?

Si vous êtes un propriétaire d'entreprise ou un blogueur utilisant WordPress, l'expérience utilisateur et l'optimisation des moteurs de recherche (SEO) seront toujours importantes. L'utilisation d'une table des matières WordPress sur votre site peut aider dans les deux cas.

Expérience utilisateur

Une table des matières peut être extrêmement bénéfique pour l'expérience utilisateur. Il permet aux visiteurs de s'orienter rapidement et facilement vers les informations disponibles dans le contenu.

De plus, comme ils contiennent des liens d'ancrage, les visiteurs peuvent facilement accéder aux informations qu'ils recherchent sans trop de défilement. Cela peut faire gagner beaucoup de temps lorsqu'il y a beaucoup de contenu. Nous les utilisons même sur notre blog Elegant Themes pour de longs guides tels que le guide ultime de Divi Speed ​​Optimization.

Valeur de référencement

Avoir une table des matières peut donner un coup de pouce à votre page sur les SERP en vous donnant un résultat de recherche enrichi. Cela peut inclure des liens supplémentaires vers vos sections de page les plus populaires présentées directement sur votre résultat de recherche.

Résultat de la recherche Google

De plus, ils aident les moteurs de recherche à comprendre le contexte d'exploration de votre page, ce qui peut conduire à une meilleure indexation ou à des extraits en vedette. En créant un contenu bien organisé avec une table des matières, vous donnez à Google et aux autres moteurs de recherche une compréhension claire de votre contenu.

Comment ajouter automatiquement une table des matières dans WordPress à l'aide d'un plugin

Créer une table des matières dans WordPress à l'aide d'un plugin est de loin la méthode la plus simple. Et il ne manque pas de plugins dans le référentiel WordPress qui aident à créer une table des matières à l'échelle du site pour vos publications et pages et à générer automatiquement des liens d'ancrage.

Plugins WordPress TOC automatiques

Pour cet article, nous utiliserons le plugin WordPress Easy Table of Contents pour créer notre table des matières.

1. Installez et activez le plugin

Pour commencer, accédez à votre tableau de bord WordPress et accédez à Plugin > Ajouter un nouveau. Recherchez le plugin Easy Table of Contents et cliquez pour l'installer et l'activer.

installer le plug-in de table des matières facile

2. Vérifiez un message pour le voir fonctionner

Une fois que vous avez installé et activé le plugin, Easy Table of Contents crée immédiatement une section de table des matières sur vos messages . Dès qu'il est activé sur votre site, vous pouvez naviguer vers le front-end et voir le tableau qu'il a créé sur vos publications.

Exemple de publication en direct

3. Personnalisez les paramètres de votre table des matières à l'échelle du site

Après avoir vu ce que fait le plugin prêt à l'emploi, vous pouvez visiter les paramètres du plugin et les adapter à vos besoins. Pour accéder aux paramètres, accédez à Paramètres > Table des matières .

Paramètres à l'échelle du site

Pour la plupart des gens, permettre à la table des matières de s'afficher sur les publications est probablement tout ce dont vous aurez besoin. Les pages sont une autre histoire. Si vous avez des pages de destination spécifiquement conçues comme des pages de niveau supérieur, vous devez décocher l'affichage d'une table des matières sur vos pages (conservez les publications cochées).

Paramètres faciles de la table des matières

De plus, vous verrez qu'Easy TOC reconnaît tous vos types de publication personnalisés et divers modèles que vous pouvez activer/désactiver.

Il existe également une foule d'autres options que vous pouvez essayer, mais tout dépend de votre site Web et de vos besoins. La plupart des sites Web n'auront besoin d'utiliser que les en-têtes H2, H3 ou H4 dans leur table des matières. Trop d'éléments dans une table des matières encombreront votre contenu et seront moins utiles que de ne pas avoir de table des matières du tout.

4. Remplacer les paramètres à l'échelle du site pour les publications individuelles

Outre les paramètres à l'échelle du site, Easy Table of Contents vous donne un contrôle post par post sur la table des matières. Cependant, pour activer les paramètres de publication individuels de la table des matières facile dans l'éditeur de blocs, vous devez activer les champs personnalisés dans la section des préférences de l'éditeur de blocs.

Pour ce faire, cliquez sur l'icône d'engrenage en haut à droite pour voir les paramètres de la page. Parmi ces paramètres, cliquez sur "Préférences".

Cela ouvrira un modal au centre de votre écran. Cliquez sur l'onglet "Panneaux". Ensuite, activez l'option "Champs personnalisés". Cela permettra à tout plugin ou paramètre de thème qui ajoute des champs personnalisés à vos pages/publications d'afficher ces paramètres sous l'éditeur de blocs.

activer les champs personnalisés

Vous pouvez désactiver l'affichage de la table des matières sur la page des publications et ajuster d'autres paramètres qui n'affectent qu'une seule page. Ceci est parfait pour les cas d'utilisation spéciaux qui diffèrent des paramètres de votre site.

Pour désactiver la section Table des matières d'un article/page particulier, faites défiler jusqu'aux paramètres du plug-in (après avoir activé les champs personnalisés).

Cochez la case "Désactiver l'insertion automatique de la table des matières".

Cela supprime la table des matières qui serait automatiquement insérée via les paramètres du plugin.

Désactiver la table des matières sur la page ou la publication

C'est ça!

Autres plugins de table des matières pour WordPress

Outre Easy Table of Contents, il existe de nombreux autres plug-ins de table des matières qui pourraient bien vous servir. Il existe d'excellents plugins gratuits comme LuckyWP Table of Contents qui fonctionnent très bien avec les blocs WordPress et les constructeurs de pages comme Divi. Et il existe des plugins premium comme Fixed TOC qui ont toutes les fonctionnalités avancées dont on aurait besoin. Faites vos recherches et testez-en quelques-unes pour obtenir les meilleures fonctionnalités qui répondent à vos besoins.

En général, recherchez ceux qui sont faciles à utiliser, qui ont un support intégré pour le balisage de schéma et qui ont des options de style décentes. Voici les meilleurs plugins de table des matières pour WordPress que nous recommandons.

Comment créer manuellement une table des matières dans WordPress

La création d'une table des matières à partir de zéro à l'aide de l'éditeur WordPress peut être utile pour les utilisateurs qui n'en ont besoin que pour quelques publications ou pages et qui n'ont pas besoin de la fonctionnalité d'un plugin à l'échelle du site. Et en créer un est assez simple (et plutôt amusant) une fois que vous avez compris le concept.

Une table des matières est essentiellement une liste de liens d'ancrage qui permettent d'accéder à des sections ou à des en-têtes spécifiques d'une page. Ainsi, si vous avez déjà créé un lien d'ancrage sur une page ou dans un menu de navigation, vous connaissez déjà les bases de la création d'une table des matières. Si vous n'êtes pas familier avec les liens d'ancrage (ou les liens de saut), nous avons un guide complet sur la façon de créer des liens d'ancrage dans WordPress.

Voici comment créer une table des matières à partir de zéro sur un article WordPress :

1. Créez votre liste de titres pour votre table des matières

En haut de votre page ou de votre article, créez une liste de tous les titres de votre table des matières à l'aide d'un bloc de paragraphe (ou bloc de liste). Pour ce faire, créez un nouveau bloc de paragraphe (ou bloc de liste) et ajoutez le texte d'en-tête qui correspond aux en-têtes du contenu de votre page ci-dessous. Assurez-vous qu'il y a un saut de ligne après chaque texte d'en-tête.

Créer une table des matières - Éditeur de blocs - Créer un bloc de paragraphe

Une fois cela fait, assurez-vous de vérifier que le texte du titre dans la table des matières correspond au texte du titre dans le contenu pour une meilleure expérience utilisateur.

2. Ajoutez un ID d'ancrage HTML unique à chaque titre de votre page ou publication

Ensuite, parcourez le contenu de votre page (titre par titre) et attribuez à chaque titre un ID d'ancre HTML unique.

Pour cela, rendez-vous sur un bloc de titre et cliquez sur ses paramètres.

Créer une table des matières - Éditeur de blocs - Étapes 2 à 4

Après cela, dans les paramètres du bloc d'en-tête (dans l'onglet "Avancé" du bloc d'en-tête), ajoutez un ID d'ancre HTML au champ. Pour cet exemple, l'ancre HTML de l'ancre est "heading-one". Cet ID d'ancre sera utilisé comme cible du lien d'ancre.

Créer une table des matières - Éditeur de blocs - Étapes 5-6

3. Convertissez chaque titre de votre table des matières en un lien d'ancrage

Une fois l'ID de l'élément d'en-tête défini, nous pouvons remonter à notre paragraphe ou bloc de liste contenant notre table des matières. Une par une, mettez en surbrillance chaque ligne et cliquez sur l'icône "Lien" pour ajouter un lien.

Créer une table des matières - Éditeur de blocs - Étapes 7-8

Au lieu d'une adresse Web, ajoutez un signe dièse ou un hashtag (#) ainsi que notre ID d'ancrage. Appuyez sur Entrée et le lien s'appliquera à ce texte.

Créer une table des matières - Éditeur de blocs - Étape 9

Pour notre exemple, nous avons ajouté "#heading-one" pour notre lien d'ancrage. Le texte de votre lien d'ancrage doit être descriptif mais concis. Mais il doit également résumer avec précision le contenu de cette section afin que les moteurs de recherche puissent le lire.

Plus important encore, votre lien d'ancrage doit être unique et non utilisé ailleurs sur la page. En effet, l'utilisation du même ID d'ancre HTML confondra le navigateur et ne fonctionnera pas comme prévu.

Une fois que vous avez terminé, enregistrez vos modifications et prévisualisez votre page. Testez votre nouvelle table des matières en cliquant sur les liens d'ancrage pour vous assurer qu'ils sautent tous aux bons endroits. Si ces liens ne fonctionnent pas, vous avez peut-être omis ou égaré le « # » ou vos ID d'ancrage et les URL des liens d'ancrage ne correspondent pas exactement.

Créer une table des matières dans Divi

Divi Theme Builder est l'un des outils les plus robustes et les plus faciles à utiliser pour les sites Web WordPress. Il permet aux créateurs de sites Web, aux propriétaires d'entreprise et aux spécialistes du marketing de créer de superbes sites Web riches en fonctionnalités.

L'utilisation de l'éditeur WordPress par défaut pour créer une table des matières est assez limitée, surtout en matière de conception. Divi facilite grandement la création de conceptions de table des matières uniques et l'ajout de liens d'ancrage à défilement fluide à n'importe quel élément de la page ou de la publication sans avoir à connaître HTML ou CSS.

Créer une table des matières dans Divi Theme Builder

Nous avons un article complet sur la façon de créer une section Table des matières pour votre blog. Non seulement vous pouvez trouver les étapes pratiques, mais il y a aussi un téléchargement gratuit de mise en page pour vous. La mise en page est faite pour vous si vous cherchez une solution plus rapide avec le thème Divi.

Le meilleur plugin de table des matières Divi

Si vous cherchez un moyen de créer une table des matières dans Divi, consultez le plugin Divi Table of Contents Maker.

plug-in de création de table des matières Divi

Ce plugin inclut un module unique de table des matières pour Divi qui génère automatiquement vos listes, liens d'ancrage et toutes les fonctionnalités dont vous avez besoin en quelques clics. Vous pouvez utiliser le module sur un modèle de générateur de thème pour ajouter automatiquement une table des matières pour tous vos articles de blog ! De plus, le module propose des centaines de paramètres de personnalisation et d'options de style.

En savoir plus sur Divi Table of Contents Maker.

Autres solutions de table des matières à envisager

Si vous êtes intéressé par d'autres solutions pour ajouter une table des matières dans WordPress, en voici quelques autres que vous ne connaissez peut-être pas et qui valent la peine d'être envisagées.

Attendez un bloc de table des matières intégré dans WordPress Core

Si vous avez le temps d'attendre une solution de table des matières, il semble qu'un bloc WordPress de table des matières soit en préparation. Et, il y a beaucoup de traction récente sur le projet que vous pouvez voir sur le Github Pull et dans un dialogue sur les problèmes. Cela ressemble à un bloc prometteur qui apportera nativement la table des matières dans l'éditeur de blocs de WordPress.

Cependant, il y a des bosses dans la feuille de route, il est donc difficile de savoir si WordPress 6.1 sera ou non dans une version ultérieure.

Recherchez une fonctionnalité de table des matières dans les plugins que vous utilisez peut-être déjà

Avec tous les plugins robustes qui existent. Qui sait? Il y a de fortes chances que vous utilisiez actuellement un plugin qui a une fonctionnalité de table des matières cachée dans les détails. Voici quelques plugins populaires que vous utilisez peut-être déjà et qui offrent la possibilité de créer une table des matières dans WordPress.

Référencement Yoast Premium

Si vous utilisez le plugin Yoast SEO pour WordPress, vous vous demandez peut-être ce qu'est le bloc Table des matières et comment il peut vous aider. Le bloc Table des matières est une fonctionnalité premium qui vous permet de créer dynamiquement une table des matières pour votre article ou votre page. La meilleure partie est que si vous utilisez déjà Yoast SEO Premium, vous disposez d'une solution TOC simple.

Spectres

Un autre plugin que beaucoup de gens utilisent est Spectra. Spectra a gagné en popularité en tant qu'amélioration de l'éditeur de blocs intégré pour WordPress.

L'un des blocs inclus dans Spectra est un bloc Table des matières facile à utiliser. Le bloc a une personnalisation complète de la conception et est déployable sans codage supplémentaire. Comme vous pouvez le voir, ajoutez le bloc à votre message et ajustez les paramètres. Vous aurez une table des matières en quelques secondes. Spectra est disponible dans une version gratuite et premium.

Conclusion

En conclusion, créer une table des matières dans WordPress est facile et peut se faire en quelques étapes. En utilisant un plugin, vous pouvez générer automatiquement une table des matières pour vos pages et publier. Ou, vous pouvez créer manuellement une table des matières dans l'éditeur WordPress par défaut ou dans un constructeur de page comme Divi pour plus de paramètres de conception. Dans tous les cas, vous avez le pouvoir de personnaliser votre site Web pour offrir aux visiteurs de votre site une meilleure expérience utilisateur et être mieux vu dans les résultats de recherche.

Utilisez-vous une table des matières sur votre site WordPress ? Avez-vous un plugin préféré que vous utilisez? Faites le nous savoir dans les commentaires!

Image sélectionnée via IconArt / shutterstock.com