You are currently viewing Ancre HTML : Comment créer un sommaire avec ou sans plugin
Ancre HTML : Comment créer un sommaire avec ou sans plugin

Ancre HTML : Comment créer un sommaire avec ou sans plugin

  • Auteur/autrice de la publication :
  • Post category:Plugin
  • Commentaires de la publication :13 commentaires

Tu souhaites apprendre à faire un lien vers une section de la même page ? Ou, vers une section d’un autre article ? Nous allons voir comment créer une ancre HTML. Ohh… le mot HTML te fait peur ? T’inquiète, ce n’est pas aussi compliqué qu’on pourrait le penser, tu as juste à me copier. Ensuite, je souhaite aller plus loin, en te montrant comment réaliser un sommaire, avec ou sans plugin.

Excepter la partie plugin, tu n’auras pas forcément besoin de WordPress pour créer des ancres et un sommaire.

Ancre HTML : qu'est-ce que c'est ?

Tout d’abord, comprenons ce qu’est une ancre HTML, pour ce faire je vais t’expliquer cela avec un exemple.

Tu as écrit un super article sur le chocolat (j’adore le chocolat !), ses bienfaits… 

Ton article sera structuré de la façon suivante : un titre H1 « Chocolat ! » ; H2 « Son histoire » ; un H2 « Ses bienfaits » ; H2 « Comment l’offrir »… bref un article d’une certaine longueur :

Exemple texte pour ancre html
Exemple texte pour ancre html

Dans ton premier paragraphe, tu souhaites diriger directement ton public au titre H2 « Ses bienfaits » s’il clique sur « bon pour la santé ». Ton public ne sera pas obligé de lire tous les autres titres et paragraphes :

Créer une ancre sur mots
Créer une ancre sur mots

Créer une ancre HTML sur une même page ou un article

Nous allons faire cela en deux étapes.

Ancre HTML, Première étape : créer une identité unique avec Gutenberg

Pour commencer, nous allons placer notre curseur sur le bloc titre H2 « Ses bienfaits », puis cliquer sur les trois petits points et choisir Modifier en HTML :

Modifier en html Gutenberg
Modifier en html Gutenberg

Maintenant, nous voyons affiché le code HTML, il y a une balise « H2 » qui indique que le titre est de seconde importance et pour indiquer la fin du titre il y a une balise fermante </h2> :

Code html balise h2
Code html balise h2

Ensuite, nous allons donner une IDentité unique à cette balise, comme nous avons plusieurs titres « H2 », le navigateur ne sait pas pour le moment de quelle balise il s’agit. Pour rappel, le navigateur doit comprendre, lorsqu’on clique sur « bon pour la santé », il doit nous diriger vers « Ses bienfaits ». Pour ce faire, tu vas rajouter id= »ses-bienfaits » entre le « 2 » et le « > », ce qui se trouve dans id ne doit pas comporter d’espace :

<h2 id= »ses-bienfaits »>Ses biens faits</h2>

Enfin, bien sûr tu ne vas pas nommer ton id « ses-bienfaits », cela dépendra de ton sujet. Fais bien ATTENTION à bien écrire ton id entre les doubles apostrophes et ne pas supprimer les chevrons ou de faire d’autres erreurs de syntaxe. Souvent, quand ça ne fonctionne pas c’est dû à cela, crois-moi, je suis bien placé pour le savoir ;).

Seconde étape : Créer une ancre HTML avec Gutenberg

Ensuite, nous allons sélectionner les mots avec lesquels nous souhaitons créer notre lien ancre HTML et cliquer sur Lien :

créer lien plusieurs mots
créer lien plusieurs mots

Puis, tu vas écrire dans le champ : #ses-bienfaits, cela correspond à « id » du nom qu’on lui a donné. N’oublie pas de valider en cliquant sur la flèche :

Créer lien ancre HTML
Créer lien ancre HTML

J’insiste, mais si cela ne fonctionne pas, c’est fort probable qu’il y a eu une erreur de frappe ou autre erreur de syntaxe.

Créer une ancre HTML vers une autre section d'un autre article ou page

Imagine maintenant que tu viens d’écrire un article qui s’appelle « Savoir rompre avec son conjoint ».

Cet article est assez long, tu as plusieurs titres H2 et paragraphes. Puis, au dernier paragraphe se trouve la phrase « Si tu souhaites rompre comme un pro, offre-lui du chocolat », avec « offre-lui du chocolat » tu souhaites créer un lien qui le dirige vers le H2 « Comment l’offrir » de l’article « Chocolats ! ».

Je suis sûr que mon exemple va en inspirer plus d’un !

Exemple texte pour ancre autre article
Exemple texte pour ancre autre article

Comment faire cela ?

Première étape : créer un id sur Gutenberg

Pour commencer, retourne sur l’article « chocolat ! ».

Ensuite, tu vas procéder de la même façon que pour l’exemple précédent, sélectionner le H2 « Comment l’offrir », cliquer sur les trois petits points et Modifier en HTML et écrire ton ID, exemple : <h2 id= »comment-l-offrir »>Comment l’offrir</h2>

Seconde étape : créer un lien ancre HTML sur Gutenberg

Enfin, retournons sur notre article « Savoir rompre avec son conjoint » et sélectionnons « offre-lui du chocolat » pour créer un lien. Tu vas suivre la même procédure qu’avant, c’est-à-dire écrire le « # » suivi du nom de ton id, mais cette fois tu vas mettre avant le « # » l’URL de l’article « Chocolat ! » -> http://accueil-3.local/chocolat#comment-l-offrir :

  1. Le nom de domaine.
  2. Puis, le nom de mon article.
  3. l’id.
Ancre sur plusieurs articles
Ancre sur plusieurs articles

Comme tu peux le voir sur mon exemple, je suis en local.

Créer un sommaire avec des ancres HTML

Maintenant que tu sais créer une ancre HTML, il ne sera pas très difficile de créer un sommaire. 

Tout d’abord, reprenons notre article « Chocolat », à chaque titre « H2 » tu vas créer un id en cliquant sur les trois petits points et sur Modifier en HTML :

  • Premier H2 : <h2 id= »son-histoire »>Son histoire</h2>.
  • Deuxième H2 : <h2 id= »ses-bienfaits »>Ses bienfaits</h2>.
  • Troisième H2 : <h2 id= »comment-l-offrir »>Comment l’offrir</h2>.
Plusieurs id pour un sommaire
Plusieurs id pour un sommaire

Ensuite, en haut de ton article tu vas créer un bloc paragraphe, tu pourras écrire « Sommaire : ». Puis, créer un autre paragraphe, pour écrire « Son histoire », ensuite clique sur Modifier le type ou le style du bloc et choisir List, et convertir en liste ordonnée :

Gutenberg créer liste à puce
Gutenberg créer liste à puce

Après avoir créé les trois listes à puces numériques, nous allons transformer chaque liste à puces numériques en lien :

  1. Tout d’abord, sélectionne ta puce.
  2. Ensuite, clique sur les maillons.
  3. Ecrit ton « id », n’oublie pas le « # » devant ton id.
  4. Enfin, valide. 
Transformer liste puce sommaire
Transformer liste puce sommaire

Ensuite, procède de la même façon avec les autres puces numériques, bien sûr, tu utiliseras à chaque fois un autre id.

Sommaire sans CSS et sans plugin
Sommaire sans CSS et sans plugin

Enfin, avec un plugin, tu pourras modifier le design plus facilement et créer un sommaire de façon automatique.

Créer un sommaire avec un plugin

Pour commencer, installons et activons le plugin Easy table of contents :

  1. Tout d’abord, survol Extensions.
  2. Ensuite, clique sur Ajouter.
  3. Puis, écris « Easy table of contents ».
  4. Ensuite, clique sur « Installer maintenant ».
  5. Enfin, clique sur « Activer ».
Extension : Easy table of contents
Extension : Easy table of contents

Réglage général

Où trouver le plugin ? Il se trouve dans Réglage et Table des matières.

Une fois que tu as trouvé, dans les réglages de l’extension, à la partie Activer le support tu vas pouvoir choisir de ne pas afficher le sommaire sur les pages par exemple. En effet, cela n’a pas forcément d’intérêt d’afficher un sommaire sur les pages.

A Insertion auto tu vas pouvoir décider d’activer automatiquement le sommaire, cela peut-être pratique pour les articles.

Ensuite, à Position, tu pourras définir où positionner ton sommaire :

Easy table of contents : général
Easy table of contents : général

A Afficher lorsque, il te sera possible d’afficher le sommaire en fonction du nombre de titres que tu as. En effet, si ton article est court et qu’il comporte que 2 titres, cela ne vaut pas forcément la peine d’insérer un sommaire.

Ensuite, avec Afficher le libellé d’en-tête, tu pourras afficher ou non le libellé « Sommaire ». Je préfère le laisser afficher, pour être sûr que les visiteurs ne se sentent pas perdus.

A Libellé de l’en-tête, si tu as laissé coché Afficher le libellé d’en-tête, tu vas pouvoir définir son intitulé.

Basculer la vue, sert à cacher la table des matières en cliquant dessus. Je décoche, je n’en vois pas l’intérêt.

Si tu as coché Basculer la vue, avec l’option Vue initiale, tu vas pouvoir cacher le sommaire par défaut.

Avec Afficher comme hiérarchie, il te sera possible d’afficher la hiérarchie ou non, si tu as par exemple des balises H3

Compteur, si tu veux être original tu pourras utiliser des chiffres romains par exemple.

Enfin, si tu laisses activer la possibilité de cacher le sommaire, la transition peut-être rapide ou lente.

Easy table of contents général (la suite)
Easy table of contents général (la suite)

Réglage de l'apparence

Place au design. Nous allons voir comment rendre notre table des matières plus sexy.

A Largeur : nous allons définir la taille de notre sommaire, j’ai tendance à choisir Relative à 100%. Pourquoi ? Pour que la table des matières marque bien sa présence.

Ensuite si à Largeur tu as sélectionné Défini pour l’utilisateur, à Largeur personnalisé tu vas pouvoir choisir avec précision la taille de ta table des matières.

Flottement : est utile si tu veux positionner un autre bloc à côté de ton sommaire. Ca peut donner un style intéressant…

A Taille de police de titre, si comme moi tu as décidé de l’appeler « Sommaire » tu pourras définir sa taille. Comme unité de mesure je choisis « em » qui s’adapte mieux au responsive.

Souhaites-tu afficher ton sommaire en gras ? à Graisse de police de titre tu vas choisir son intensité.

Pour Taille de police aussi, je choisis l’unité de mesure « em ».

A Thème, tu vas choisir l’arrière-plan de ta table des matières.

Easy table of contents : apparence
Easy table of contents : apparence

Enfin, à Personnaliser le thème, tu vas t’éclater à customiser ton sommaire comme bon te semble. Mais pour l’utiliser, il va falloir sélectionner Personnaliser à Thème. Pour ma part, j’ai modifié la Couleur de lien au survol et la Couleur de titre pour un noir. Puis, Couleur d’arrière-plan en gris.

Easy table of contents : apparence (la suite)
Easy table of contents : apparence (la suite)

Réglage avancé

Ensuite, à Minuscule : je te conseille de le cocher, pour éviter certaines erreurs : les navigateurs de recherches vont apprécier.

Pour Trait d’union : je coche cette case pour être sûr qu’il n’y ait pas d’espace vide.

Ensuite, à Page d’accueil : il n’y a pas d’intérêt à mettre une table des matières à la page d’accueil, je ne coche pas cette case.

CSS : c’est le langage qui s’occupe du design de ton site, si tu coches cette case, ton sommaire va perdre son joli design et ressembler à la table des matières que nous avons fait plus haut sans le plugin : je ne coche pas.

Ensuite, à Titrages  : Tu pourras exclure certains titres, comme le titre principal (H1), qui n’a aucun intérêt d’être dans notre sommaire.

Enfin, à Exclure les titrages : tu vas pouvoir choisir d’exclure de ta table des matières certains titres en fonction de leurs noms.
Easy table of contents : avance
Easy table of contents : avance

Régler chaque page et article... indépendamment

Enfin, si dans les réglages de Easy table of contents de la partie Général -> Activer le support tu as coché « Articles ». Tu vas pouvoir régler chaque article indépendamment.

Bien sûr, si tu as également coché page « Pages » tu pourras aussi faire des modifications pour chaque page.

Ensuite, cette partie se trouve en bas de l’éditeur Gutenberg. 

Easy table of contents : pages et articles
Easy table of contents : pages et articles

Une table des matières : Avec ou sans plugin ?

La version HTML, sans code CSS :

Sommaire sans CSS et sans plugin
Sommaire sans CSS et sans plugin

La version avec le plugin « Easy table of contents » sans utiliser une seule ligne de code CSS :

Sommaire avec un plugin et avec le CSS
Sommaire avec un plugin et avec le CSS

Ce qu'il faut retenir

Une ancre HTML, se fait en deux étapes, on définit une IDentité unique (ID), puis on sélectionne des mots pour créer un lien vers cette identité unique.
Attention aux erreurs de syntaxe, si ton ancre ne fonctionne pas, c’est sûrement dû à cela.

Une fois que tu sais créer une ancre HTML, tu s’auras créer une table des matières, c’est une répétition d’ancre.

Enfin, si tu utilises WordPress et que tu souhaites créer un sommaire rapidement et l’automatiser pour chaque article, un plugin pourrait te plaire. Tu pourras customiser ta table des matières sans utiliser une seule ligne de code CSS.

Merci à Muriel, qui m’a inspirée à écrire cet article 😉

Que penses-tu des ancres sommaires ?

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Cet article a 13 commentaires

  1. Nicolas ROZALSKI

    Super c’était exactement ce que je voulais faire depuis plusieurs semaines et je n’y arrivais pas ! 🙂

    1. Marc

      Hello Nicolas,
      Je suis ravi d’avoir pu d’aider. Merci pour le commentaire 😊

  2. Sophie et Oscar

    Merci pour cet article super complet! J’ai des articles très longs mais je ne peux pas faire de sommaire dans elementor (version gratuite). Je vais donc m’y mettre de ce pas!! Merci encore!

    1. Marc

      Avec plaisir. Bonne nouvelle, il fonctionne avec Elementor ! Du moment que tu paramètres bien tes titres (h2, h3,…). Merci pour ton commentaire…

  3. NATHALIE

    Génial ! Merci beaucoup, je cherchais justement comment faire, grâce à toi et à tes super explications, je vais pouvoir essayer d’utiliser le plugin « easy table of contents »

    1. Marc

      Eh ben… ça tombe bien, avec plaisir. Merci pour le commentaire…

  4. Frédéric

    Super merci je n’avais pas creuser le sujet des ancrages et je. Ouais en faire… et paf! Ton article tombe à pic

    1. Marc

      Merci d’avoir laissé un commentaire. Je suis ravi que cet article te soit utile.

    1. Marc

      Merci pour ton commentaire. Oui, l’idée c’est cela : de guider les lecteurs au mieux.

Laisser un commentaire