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 :
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 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 :
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> :
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 :
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 :
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 !
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 :
- Le nom de domaine.
- Puis, le nom de mon article.
- l’id.
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>.
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 :
Après avoir créé les trois listes à puces numériques, nous allons transformer chaque liste à puces numériques en lien :
- Tout d’abord, sélectionne ta puce.
- Ensuite, clique sur les maillons.
- Ecrit ton « id », n’oublie pas le « # » devant ton id.
- Enfin, valide.
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.
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 :
- Tout d’abord, survol Extensions.
- Ensuite, clique sur Ajouter.
- Puis, écris « Easy table of contents ».
- Ensuite, clique sur « Installer maintenant ».
- Enfin, clique sur « Activer ».
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 :
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.
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.
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.
Réglage avancé
Ensuite, à Minuscule : je te conseille de le cocher, pour éviter certaines erreurs : les navigateurs de recherches vont apprécier.
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.
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.
Une table des matières : Avec ou sans plugin ?
La version HTML, sans code CSS :
La version avec le plugin « Easy table of contents » sans utiliser une seule ligne de code 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 ?
Super c’était exactement ce que je voulais faire depuis plusieurs semaines et je n’y arrivais pas ! 🙂
Hello Nicolas,
Je suis ravi d’avoir pu d’aider. Merci pour le commentaire 😊
Et voici mon chef d’œuvre ! xD merci encore de ton article ! ^^ https://apprenti-randonneur.com/comment-boire-randonnee-astuces/
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!
Avec plaisir. Bonne nouvelle, il fonctionne avec Elementor ! Du moment que tu paramètres bien tes titres (h2, h3,…). Merci pour ton commentaire…
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 »
Eh ben… ça tombe bien, avec plaisir. Merci pour le commentaire…
Super merci je n’avais pas creuser le sujet des ancrages et je. Ouais en faire… et paf! Ton article tombe à pic
Merci d’avoir laissé un commentaire. Je suis ravi que cet article te soit utile.
Hello
Super article ! Je trouve ça super utile, ça permet aux lecteurs de lire ce qui les intéresse
Merci pour ton commentaire. Oui, l’idée c’est cela : de guider les lecteurs au mieux.
Très pratique merci
Avec plaisir