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

Publié: 2021-06-10

Une table des matières est une partie nécessaire des articles WordPress, en particulier les articles longs avec de nombreux titres. La création d'une table des matières aide les lecteurs à suivre et à saisir l'idée facilement et rapidement. En outre, cela vous aide également à ajouter plus de mots-clés dans les articles, ce qui est très bon pour le référencement.

Table des matières masquer

1. Méthodes pour créer une table des matières
2. Méthode 1 : Utiliser un plugin pour créer une table des matières
1. 2.1. Étape 1 : créer et configurer le contenu de la table des matières
2. 2.2. Étape 2 : Insérez la table des matières dans le message
3. 2.3. Étape 3 : Personnaliser l'affichage de la table des matières
4. 2.4. Personnalisez la table des matières dans chaque article
3. Méthode 2 : utilisez le code pour créer une table des matières.
1. 3.1. Étape 1 : Créer la table des matières pour la publication
2. 3.2. Étape 2 : Utilisez CSS pour personnaliser
4. Derniers mots

Méthodes pour créer une table des matières

Il existe 2 méthodes pour créer une table des matières dans un article WordPress.

La première méthode consiste à utiliser un plugin. C'est simple, rapide et gratuit pour les experts en code et les débutants dans WordPress.

Le second utilise du code. Cela vous permet de personnaliser votre table des matières, même dans les moindres détails, mais c'est assez compliqué pour un non-codeur. Nous allons écrire le code pour créer une table des matières dans cet article. Copiez-le et collez-le simplement !

Voyons d'abord le processus de création d'une table des matières avec un plugin :

Méthode 1 : utiliser un plugin pour créer une table des matières

Étape 1 : créer et configurer le contenu de la table des matières

Il existe de nombreux plugins gratuits pour créer une table des matières dans WordPress. Nous avons choisi la table des matières LuckyWP car elle nous fournit un résultat magnifique et hautement personnalisable. Cependant, ce plugin a pas mal de paramètres, ce qui pourrait vous dérouter au début. Alors, suivez nos instructions pour gagner du temps.

LuckyWP Table of Contents est un plugin gratuit et disponible sur wordpress.org. Vous venez d'installer et d'activer le plugin sur Dashboard .

Ensuite, allez dans Paramètres > Table des matières , vous verrez l'écran des paramètres.

Ici, il y a 4 onglets auxquels vous devez faire attention : Général, Apparence, Insertion automatique, En-têtes de traitement . Ce sont des onglets permettant de paramétrer et de personnaliser l'affichage de la table des matières. Divers est un onglet ayant des paramètres complexes et sans importance, vous pouvez donc l'ignorer.

Dans cette étape, vous travaillez simplement sur l'onglet Général .

Il y a beaucoup de paramètres dans cette section. Pour gagner du temps, vous devez vous concentrer sur les parties importantes ci-dessous :

Numérotation : Pour numéroter les rubriques. Vous devez choisir l'une des options suivantes : sans numération, nombres décimaux (emboîtés), nombres romains (emboîtés) .

Je choisis les nombres décimaux (imbriqués) , donc ma table des matières ressemble à ceci :

Titre : Titre de la table des matières. C'est Contenu par défaut.

Laissons le reste des paramètres par défaut, car cela n'affecte pas beaucoup votre table des matières.

Cliquez sur Enregistrer les modifications pour terminer. Nous avons donc effectué les réglages généraux de la table des matières. Passons à l'étape suivante.

Étape 2 : Insérez la table des matières dans le message

Il existe 2 méthodes pour insérer une table des matières dans votre article : l'insertion automatique et l'insertion manuelle.

L'insertion automatique signifie qu'une table des matières est ajoutée automatiquement dans tous les articles. De cette façon, vous économisez beaucoup de temps et d'efforts, mais cela ne fonctionne pas si vous souhaitez insérer une table des matières uniquement dans certains articles.

L'insertion manuelle signifie que si vous souhaitez avoir une table des matières dans un article, vous devez l'insérer vous-même dans cet article. Cela peut prendre plus de temps et peut entraîner des erreurs.

Nous allons présenter les deux méthodes en détail. Vous pouvez choisir l'option qui vous convient.

Insertion automatique

Accédez à l'onglet Insertion automatique > Activer . Le plugin choisit Post par défaut. Si vous ne le souhaitez pas, vous pouvez passer à un autre type de publication.

Dans la section Position , choisissez où vous souhaitez insérer la table des matières. N'oubliez pas de cliquer sur Enregistrer les modifications !

Ainsi, tous les messages du type de message choisi ont les tables des matières.

Insertion manuelle

L'insertion manuelle semble compliquée, mais en réalité c'est très simple. Accédez à l'onglet En- têtes de traitement . Là, choisissez également le type de publication, puis cliquez sur Enregistrer les modifications .

Ensuite, accédez à l'éditeur de publication d'une publication dans le type de publication que vous avez choisi, cliquez sur Activer la table des matières .

Maintenant, votre table des matières est pratiquement terminée. De plus, nous pouvons même styliser sa couleur, sa police, la taille des éléments,… pour le rendre plus joli. Suivez l'étape suivante.

Étape 3 : Personnaliser l'affichage de la table des matières

Il existe également 2 méthodes pour personnaliser l'affichage de la table des matières : personnalisez-le dans tous les articles à la fois et personnalisez-le individuellement dans chaque article.

Personnaliser la table des matières dans tous les articles

Vous pouvez personnaliser toutes les tables des matières en détail en allant sur l'onglet Apparence . Il existe de nombreux paramètres tels que la taille de la police du titre, la taille de la police des éléments, la couleur du lien ,…

Il est inutile de remarquer tous les paramètres, concentrez-vous simplement sur ce que vous voulez.

Par exemple, je n'aime pas le bleu et la taille de police actuelle du titre. Je veux changer la couleur en gris foncé et en taille plus petite afin qu'ils aillent mieux avec le poste. Je vais donc personnaliser la taille de la police du titre, la taille de la police des éléments, la couleur du lien et conserver les autres paramètres comme l'image ci-dessous :

Ma table des matières après personnalisation ressemble à ceci :

Maintenant, cela semble beaucoup plus harmonieux.

Cependant, peut-être que vous souhaitez avoir différentes tables des matières dans différents articles, faites simplement défiler vers le bas pour lire comment le personnaliser dans chaque article.

Personnalisez la table des matières dans chaque article

Ce travail est également simple et rapide. Tout d'abord, accédez à l'éditeur de publication, choisissez Table des matières > Personnaliser .

Une fenêtre contextuelle Personnaliser la table des matières apparaît. Vous verrez quelques onglets familiers comme ci-dessus. Ils sont Général, Apparence et Divers. .

Allez dans l'onglet Apparence et modifiez certains paramètres de la même manière que sur le tableau de bord du plugin. Cliquez sur Enregistrer pour terminer !

Voyons maintenant le résultat final de la personnalisation de la table des matières.

Les deux méthodes de personnalisation apportent des tables des matières très jolies et détaillées. Vous êtes donc libre de choisir comme vous le souhaitez.

Voyons maintenant comment utiliser le code pour créer une table des matières.

Méthode 2 : utilisez le code pour créer une table des matières.

Étape 1 : Créer la table des matières pour la publication

Allez dans Apparence > Thème > Éditeur > functions.php .

Ensuite, ajoutez le code suivant dans le fichier functions.php pour insérer des tables des matières dans les articles.

Remarque : Ce code sert à ajouter seulement 2 niveaux de titre dans la table des matières .

 fonction create_toc($html) {
    $toc = '';
    if (is_single()) {
        si (!$html) renvoie $html ;
        $dom = nouveau DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                table des matières
            </div>
            <ul class="toc">';
        $h2_status = 0 ;
        $h3_status = 0 ;
        $i = 1 ;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                si($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0 ;
                    }
                 si($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0 ;
                  }
                  $h2_status = 1 ;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++ ;
            }elseif($element->tagName == 'h3') {
                si(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1 ;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++ ;
            }
        }
        si($h3_status){
            $toc .= '</ul>';
        }
        si($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    renvoie $toc . $html;
}
add_filter('the_content', 'create_toc');

Explication:

Code	Explication
Fonction $toc = '<div class="toc-bound"> <div class="toc-ctr"> table des matières </div> <ul class="toc">	Pour ajouter un titre à la table des matières et l'afficher par dessus. Vous pouvez remplacer le texte « table des matières » par tout ce que vous voulez dans le titre.
Variable h2, h3	Les niveaux des titres sont insérés dans la table des matières. Si vous voulez remplacer h2 , h3 par d'autres balises, changez tous les paramètres comme h2 , h3 en balises que vous voulez dans le code.
Fonction $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i. '”>' . $element->textContent . '</a>';	Pour créer des liens vers les sections correspondantes de la publication dès que vous cliquez dessus.
Fonction *if($h3_status){* *$toc .= '</ul>';* } *si($h2_status){* *$toc .= '</li>';* } *$toc .= '</ul></div>';* *$html = $dom->saveHTML();* } *renvoie $toc .* *$html;*	Pour ajouter des puces devant chaque titre dans la table des matières.

N'oubliez pas de cliquer sur le fichier de mise à jour après avoir inséré le code.

Ensuite, voici le résultat :

Bien sûr, nous devons le styler un peu. Nous utiliserons CSS - un outil préféré de tous les codeurs.

Étape 2 : Utilisez CSS pour personnaliser

Pour personnaliser par CSS, allez dans le fichier style.css dans Theme Editor . Là, vous devez insérer le code que vous écrivez vous-même pour personnaliser la table des matières à votre guise.

Par exemple, je souhaite personnaliser la couleur et l'intensité de la table des matières, je vais donc insérer le code suivant :

 .toc-lié {
    couleur d'arrière-plan : #619162 ;
    couleur : #fff ;
}
.toc-ctr {
    border-bottom : 1px solide #fff ;
    rembourrage : 10px ;
    taille de la police : 20px ;
    transformation de texte : majuscule ;
}
ul.toc {
    list-style-type : aucun ;
    rembourrage : 10px ;
    remplissage-gauche : 25px ;
}
.toc li a {
    couleur : #fff ;
}
ul.toc > li {
    taille de la police : 18px ;
    poids de police : 700 ;
    remplissage : 5px 0 ;
}
ul.toc-sub {
    list-style-type : aucun ;
}
ul.toc-sub li a {
    poids de police : 200 ;
}

N'oubliez pas de cliquer sur le fichier de mise à jour pour l'enregistrer.

Le résultat final ressemble à ceci :

En conclusion, l'utilisation d'un plugin et le codage nous donnent les mêmes jolies tables des matières. Vous pouvez choisir n'importe quelle option tant que vous êtes satisfait.

Derniers mots

Comme vous pouvez le voir, créer une table des matières dans les articles WordPress n'est pas du tout complexe. Suivez notre tutoriel et vous aurez de belles tables des matières. Une bonne table des matières rend votre message plus clair et plus professionnel. Ainsi, vos téléspectateurs peuvent avoir des expériences plus conviviales lors de la lecture de votre blog.

Si vous avez des questions, veuillez les poser dans la zone de commentaires ci-dessous.