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

Publié: 2023-02-12

L'expérience utilisateur (UX) du visiteur devrait être très importante pour vous en tant que propriétaire ou développeur de site Web. Cependant, il peut être difficile de savoir si vous avez couvert toutes vos bases et ce que vous devriez incorporer d'autre dans votre site.

Un élément souvent négligé est une table des matières (TOC) pour votre contenu long. L'ajout d'une table des matières à chacun de vos articles permet non seulement aux lecteurs de trouver les sections exactes qui les intéressent, mais rend également votre contenu plus organisé.

Dans cet article, nous présenterons les différentes options de création d'une table des matières WordPress (y compris les plugins, les shortcodes et le HTML). Nous décrirons ensuite deux styles populaires et comment vous pouvez les réaliser. Commençons!

Table des matières
1. Pourquoi devrais-je inclure une table des matières sur mon site WordPress ?
2. Ajouter une table des matières à l'aide de plugins
3. Ajouter une table des matières à l'aide de codes abrégés
4. Comment créer une table des matières dans WordPress sans plugin
4.1. Créer une table des matières avec HTML
4.2. Utilisation des modèles de pages d'archives et de liens pour la table des matières
5. Styles de table des matières
5.1. Table des matières flottante
5.2. Barre latérale de la table des matières
6. Personnalisez votre site avec WP Engine

Pourquoi devrais-je inclure une table des matières sur mon site WordPress ?

Bien qu'une table des matières puisse sembler superflue pour un article de blog, elle peut en fait contribuer grandement à améliorer l'UX de votre site. La plupart des lecteurs consultent votre contenu à la recherche de réponses à des questions spécifiques. Une table des matières leur permet d'accéder facilement aux informations les plus pertinentes pour eux, au lieu de les obliger à faire défiler et parcourir pour trouver ce dont ils ont besoin.

De plus, une table des matières peut améliorer l'optimisation pour les moteurs de recherche (SEO) de vos publications. Ces liens pratiques sont un endroit facile pour incorporer vos mots-clés, qui sont un facteur de classement très important.

En plus d'augmenter la densité de vos mots clés, le fait d'avoir une table des matières dans votre message peut augmenter vos chances d'obtenir un extrait de code dans Google. Voici le court extrait qui apparaît au-dessus de la liste principale des résultats pour certaines recherches :

Obtenir un extrait en vedette n'est pas une science exacte. Cependant, des listes (telles que les tables des matières) sont souvent affichées, car elles peuvent communiquer les réponses aux questions des chercheurs de manière claire et concise.

Ajouter une table des matières à l'aide de plugins

Les plugins sont un moyen idéal pour étendre les fonctionnalités de WordPress. Il existe plusieurs solutions disponibles qui offrent un moyen simple d'ajouter une table des matières WordPress aux publications de votre site.

Notre plugin de table des matières WordPress préféré est Fixed TOC. Vous pouvez également utiliser d'autres plugins en conjonction avec lui, tels que Q2W3 Fixed Widget, pour optimiser davantage les TOC sur votre site Web.

L'installation d'un plugin est simple. Tout ce que tu dois faire est:

  1. Accédez à Plugins > Ajouter nouveau dans le tableau de bord WordPress.
  2. Téléchargez le fichier .zip du plugin (gratuit ou premium) ou installez-le à partir du répertoire des plugins (plugins gratuits uniquement).

Une fois installé et activé, vous aurez un accès complet à la gamme de fonctionnalités offertes par ce plugin particulier. À partir de là, le processus variera en fonction de l'outil que vous avez choisi.

Par exemple, voici comment créer une table des matières une fois que vous avez installé la table des matières fixe :

  1. Accédez à Paramètres > Table des matières fixe.
  2. Dans l'onglet Général , sélectionnez les types de publication auxquels vous souhaitez appliquer une table des matières, les niveaux de titre à inclure et l'emplacement où vous souhaitez placer votre table des matières.
  3. Dans l'onglet Couleur , choisissez le jeu de couleurs pour votre table des matières.

Le plugin ajoutera automatiquement une table des matières à chacun des messages pertinents et utilisera vos en-têtes existants pour créer des liens de saut.

Ajouter une table des matières à l'aide de codes abrégés

Parallèlement aux plugins de table des matières WordPress, vous pouvez utiliser des codes abrégés pour contrôler davantage l'affichage de votre table des matières WordPress. Ce sont de petits extraits de code que vous pouvez coller dans l'éditeur, vous permettant d'afficher du contenu personnalisé pratiquement n'importe où sur la page.

Les codes abrégés facilitent l'ajout d'une table des matières à vos publications, pages, barre latérale et widgets. Voici comment:

  1. Téléchargez un plugin TOC qui utilise des shortcodes, ou utilisez un plugin sans shortcodes en conjonction avec une solution telle que Shortcoder.
  2. Trouvez les shortcodes proposés par le plugin, ou créez-les à l'aide de Shortcoder.
  3. Copiez les shortcodes et collez-les où vous le souhaitez dans WordPress (dans un article de blog, par exemple). Shortcoder propose des codes abrégés simples pour la table des matières, ce qui facilite leur ajout à votre site.

La beauté des shortcodes réside dans la polyvalence de leur placement. Vous pouvez les ajouter en haut, au milieu ou en bas de vos pages et publications, ou même dans un widget de la barre latérale.

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

Bien que les plugins soient le moyen le plus simple de créer une table des matières dans WordPress, vous pouvez également en ajouter un manuellement. Voici deux méthodes pour le faire.

Créer une table des matières avec HTML  

Bien que le HTML puisse être intimidant, la création d'une table des matières avec du code est en fait une excellente option pour quiconque a besoin d'une solution simple pour son site Web. Pour ce faire, vous allez insérer un tableau dans WordPress et inclure des liens de signets vers des pages spécifiques.

C'est de loin l'option manuelle la plus simple - sans fioritures ni encombrement. Bien sûr, vous pouvez tout faire si vous le souhaitez, en incorporant plusieurs couleurs, différents styles de police et en-têtes, etc. Vous n'êtes lié que par votre propre créativité et vos connaissances en HTML.

Utilisation des modèles de pages d'archives et de liens pour la table des matières

Les tables des matières n'ont pas toujours besoin d'être situées sur des publications et des pages individuelles. Au lieu de cela, vous pouvez créer une table des matières "maître" à l'aide de modèles WordPress. Il s'agit de conceptions de page prédéfinies, qui vous permettent de créer des pages dédiées pour des éléments de site tels que des archives et des liens.

Ces pages peuvent ensuite être utilisées sur votre site Web en tant que tables des matières « maîtresses », dirigeant les utilisateurs vers le contenu exact qu'ils recherchent. Par exemple, prenez la page Archives de Leaving Work Behind :

Les modèles de ces pages sont généralement nommés archives.php et links.php (bien que vous puissiez les renommer). Bien que certains thèmes incluent ces pages, tous ne le font pas. Cependant, vous pouvez créer le vôtre avec très peu de connaissances en codage requises.

Styles de table des matières

Le style de votre table des matières joue un rôle énorme dans la façon dont il améliore l'UX des visiteurs. Dans cet esprit, examinons les deux styles les plus populaires pour les TOC WordPress.

Table des matières flottante

Une table des matières flottante est un widget qui reste fixe sur le côté de la page. Sa mise en œuvre se fait en deux étapes. Tout d'abord, vous devrez configurer une table des matières WordPress et l'ajouter à votre site WordPress en tant que widget (en utilisant l'une des méthodes précédentes).

Une fois cela fait, vous pouvez utiliser le plugin Q2W3 Fixed Widget (ou une solution similaire) pour garder le widget TOC "collé" sur le côté de la page. Une fois ce plugin installé, revenez à la zone Widgets de votre site et ouvrez le widget TOC. Cochez ensuite la case Widget fixe :

table des matières flottante pour wordpress

Une fois cette option activée, la table des matières ne disparaîtra plus de la vue de la page lorsque l'utilisateur fait défiler vers le bas. Au lieu de cela, il défilera avec le contenu de la page, de sorte qu'il soit toujours présent. C'est également le style par défaut implémenté par le plugin Fixed TOC que nous avons mentionné précédemment.

Barre latérale de la table des matières

Semblable à la table des matières flottante, dans cette méthode, une barre latérale est affichée à droite ou à gauche de votre page Web. Cependant, au lieu de défiler avec l'utilisateur, la barre latérale de la table des matières reste dans une position fixe (comme celle sur WPBeginner) :

table des matières barre latérale pour wordpress

La barre latérale TOC est très facile à créer. Ajoutez simplement un widget TOC si possible, ou incluez un shortcode dans un widget de barre latérale existant. Votre table des matières WordPress apparaîtra alors comme un aspect fixe de la barre latérale.

Personnalisez votre site avec WP Engine

Offrir une UX de la plus haute qualité aux utilisateurs de votre site Web les incitera à revenir pour plus de contenu. En plus de vous enseigner diverses méthodes pour incorporer une table des matières WordPress dans vos articles et pages, nos ressources contiennent de nombreux conseils et astuces précieux pour améliorer votre site.

Nous offrons également une assistance exceptionnelle 24h/24 et 7j/7, et notre variété de plans d'hébergement vous permettra de trouver celui qui correspond à vos besoins. Découvrez-les aujourd'hui !