Ok, mise en situation : vous êtes chez vous, tranquillement installé devant votre ordinateur, à la recherche d’inspiration pour le design de votre blog.
L’un des résultats de Google vous tape dans l’œil. Vous cliquez pour l’ouvrir et vous vous lancez dans votre lecture.
Vous commencez à le faire défiler, un peu plus bas, encore un peu et “Oh bon sang, mais cet article est beaucoup trop long, ça ne m’intéresse pas tout ça… où est-ce que ça parle des outils à utiliser ?!”
Vous me voyez venir avec ma table des matières ?
Eh oui : une excellente solution pour faciliter la lecture d’un article ou d’une page, avec un gros volume de contenu, est d’insérer un sommaire avec des liens d’ancrage.
Mais, qu’est-ce que c’est ? Comment faire ? Quelle utilité ? Restez avec moi, je vais vous expliquer pourquoi et comment créer des ancres sur WordPress, simplement et pas à pas.
Sommaire
Qu’est-ce qu’une ancre ?
Avant de vous expliquer comment créer des ancres sur WordPress, voyons d’abord ce qu’est une ancre. Ne mettons pas la charrue avant les bœufs.
Pour cela, prenons un exemple simple.
Vous trouvez un article sur l’installation de plugin, il est très intéressant, mais un peu long. Vous pourriez être découragé.
Mais, ô joie ! vous voyez qu’il y a un sommaire en haut de la page qui résume son contenu. Vous allez pouvoir vous orienter dans l’article grâce aux titres de chaque paragraphe.
Évidemment, vous pouvez cliquer sur le titre de votre choix à partir de cette table des matières. Cela vous emmène directement à la section que vous avez choisie. Plus besoin de faire défiler la page indéfiniment pour trouver l’information que vous êtes venu chercher.
L’ancre, c’est donc ce qui permet de faire ce lien, entre le sommaire et les sections correspondantes de l’article.
Plus précisément, il s’agit d’un élément HTML <a> qui signifie anchor. C’est le texte entre les balises <a> qui constitue l’ancre. Par extension, cela désigne le lien complet, c’est-à-dire la balise <a> et son contenu.
Mais alors, pourquoi les utiliser ?
Pourquoi créer des ancres avec WordPress ?
Maintenant que vous avez compris ce qu’est une ancre, vous vous dites peut-être “ah d’accord ! mais est-ce que c’est vraiment utile ?” Eh bien oui, sans grande surprise.
Une ancre peut être utile principalement pour deux raisons.
D’abord, comme on vient de le voir, cela sert à créer un sommaire qui permet de sauter directement à la section de son choix. C’est un très bon moyen de faciliter la navigation des internautes dans la page.
Non seulement cela les aide à y voir plus clair, mais surtout, cela améliore l’expérience utilisateur, autrement appelée UX. Et ceci est très bon pour le référencement naturel (SEO).
Le truc cool, c’est que vous pouvez aussi lier vers une section d’une autre page ! Et ce, même si c’est en plein milieu ou en bas de celle-ci.
Je m’explique : imaginons que vous soyez en train d’écrire un article. Vous parlez de vos services et vous voulez faire un lien directement vers une offre précise, qui se trouve à la fin de votre page de tarifs. Eh bien, c’est grâce à une ancre que vous pourrez le faire.
Je vous explique comment procéder en fin d’article.
D’abord, voyons comment créer une ancre.
Comment créer des ancres sur WordPress dans l’éditeur de contenu ?
Créer l’ancre sur le bloc titre de votre choix
Passons maintenant à la pratique, si vous le voulez bien. Commençons par créer l’identifiant de l’ancre qui se trouvera, non pas dans le sommaire, mais dans le corps du texte.
Pour cette étape, il s’agit simplement de lui donner un nom unique, voici comment procéder :
- Tout d’abord, choisissez le bloc du chapitre qui vous intéresse, celui vers lequel vous voulez pointer, par exemple un H2, on peut imaginer qu’il s’appelle “Créer des ancres” ;
- Cliquez dessus ;
- Dans la colonne “bloc” de l’éditeur, sur la droite de l’écran, cliquez sur “Avancé”, puis dans “Ancre HTML” choisissez le nom que vous souhaitez donner à votre ancre, c’est son identifiant ;
- Privilégiez un nom simple, comme “creer-des-ancres” par exemple.
Attention, l’éditeur peut être un peu trompeur dans les mots qu’il utilise. Vous ne créez pas une “adresse web unique” comme il le suggère. L’éditeur permet d’ajouter un identifiant, comme on vient de le voir, que vous pouvez utiliser pour créer des liens vers l’élément choisi, c’est tout.
Ajouter un lien d’ancrage dans votre table des matières
Pour la deuxième étape, revenez au début de votre article :
- Maintenant, commencez par créer votre sommaire, à l’aide d’un bloc liste par exemple ;
- Renseignez tous les titres des chapitres de votre article ;
- Mettez en surbrillance le nom du chapitre choisi, ici c’est “Créer des ancres” pour notre exemple ;
- Créez un lien avec le même identifiant que vous avez ajouté précédemment, commençant par # donc : #creer-des-ancres ; ce lien va mener vers l’élément ayant l’identifiant correspondant dans la page courante (celui que vous avez choisi à l’étape précédente) ;
- Attention de bien utiliser exactement le même nom : ici c’est d’abord “creer-des-ancres” lors de la première étape, puis “#creer-des-ancres”.
Comment créer une ancre sur WordPress en code HTML ?
Créer l’ancre pour la section choisie
Si vous ne souhaitez pas passer par l’éditeur de contenu WordPress, vous pouvez tout à fait créer une ancre manuellement en code HTML.
Voyons donc comment faire avec ce procédé :
- Commencez par choisir le bloc qui vous intéresse, je vais reprendre mon exemple du H2 de l’explication précédente ;
- Cliquez sur le bouton du bloc avec les 3 petits points, puis choisissez “Modifier en HTML” ;
- Le H2 choisi s’appelle Créer des ancres, quand vous allez passer en modification HTML, vous verrez alors :
- A partir de là, ajoutez manuellement un attribut id à la balise h2, pour donner un nom à votre ancre (ce sera invisible sur l’éditeur visuel) ;
- Ce qui donnera :
- Si vous voulez faire la même chose dans un paragraphe, ou tout autre type de bloc, c’est tout à fait possible. La seule différence est que vous ne travaillerez pas avec une balise h2, mais avec une balise p (pour paragraphe) par exemple. Ce qui donnerait ici :
Placer le lien d’ancrage dans le sommaire
Là encore, revenez au sommaire que vous aurez créé au préalable, pour passer à la suite :
- Dans votre sommaire, choisissez à nouveau “Modifier en HTML” si ce n’est pas déjà le cas ;
- Autour du texte d’ancre (le nom de votre chapitre), ajoutez une balise <a>, et ajoutez-lui un attribut href ayant pour valeur le nom de l’identifiant, afin de créer un lien d’ancrage cliquable ;
- N’oubliez pas de rajouter le # pour faire référence à l’attribut id du bloc vers lequel il est lié ;
- Vous verrez donc :
Encore une fois, attention de bien utiliser exactement le même nom (d’abord “creer-des-ancres”, puis “#creer-des-ancres”).
Bonus : Comment ouvrir un lien directement sur la section souhaitée ?
En début d’article, je vous avais promis de vous expliquer comment utiliser une ancre pour renvoyer vos lecteurs directement au milieu d’une autre page.
Pour bien comprendre, je reprends l’exemple que j’avais utilisé : vous avez une page de tarifs avec plusieurs prestations. Dans votre dernier article, vous voulez envoyer vos lecteurs directement vers la dernière prestation de cette page.
La première chose à faire est évidemment de créer une ancre sur le bloc de cette fameuse dernière prestation, quelle qu’elle soit. Mais maintenant vous savez faire ça. 😉
Ensuite, lorsque vous créez le lien dans votre article vers votre prestation, il vous suffit de :
- Saisir l’URL de la page, par exemple : “https://www.monsite.fr/tarifs” ;
- Puis d’ajouter le # du nom de votre ancre, par exemple : “https://www.monsite.fr/tarifs/#derniere-prestation”.
En cliquant sur votre lien, la personne arrivera directement sur la dernière prestation de votre page de tarifs.
En résumé
Vous l’avez compris : vous avez plusieurs manières de créer des ancres sur WordPress. Vous pouvez opter pour l’éditeur de contenu ou le code HTML, c’est selon vos préférences.
N’hésitez pas à faire des tests sur un brouillon pour bien comprendre la manipulation à effectuer.
Rappelez-vous, le plus important est de garder exactement le même nom ! Avec le # pour le lien d’ancrage cliquable, et sans le # pour l’id de l’ancre qui y est reliée. Une fois que vous aurez bien compris comment faire, ce sera un jeu d’enfant pour la suite.
Pensez à vous en servir dès que vous avez du contenu long. Vos lecteurs vous remercieront.
Et si vous voulez creuser plus de sujets similaires, et apprendre à manier WordPress avec aisance, je vous recommande la formation WPChef.
Alors, vous avez envie d’utiliser les ancres maintenant ? Dites-moi en commentaire sur quoi vous allez les tester en premier.
Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 40000 personnes l'ont fait, pourquoi pas vous ?
Merci pour votre article !
Merci pour votre article !
Ce qui serait intéressant, c’est de ne pas zapper le titre (l’ancre), que le titre reste visible. C’est parce que je n’aime pas avoir la sensation d’être « perdu » dans la page. Systématiquement, je remonte un peu dans la page pour voir si je suis bien arrivé à la bonne place.
Bonjour, pour pallier à ce problème tu peux rajouter des marges (espacements) à l’élement en question tout en veillant à ce que le design de ta page reste cohérent.
Petit problème quand je clique sur un des liens de votre sommaire.
Je n’atterris pas sur la bonne partie.
Le problème apparait sur google chrome et firefox. Mais sur safari, tout semble fonctionner parfaitement.
J’ai la même chose sur un de mes sites pour lequel j’utilise Table of Contents Plus. Vous auriez une idée du problème ?
Bonjour, sur quel lien le problème apparaît-il ? As-tu vidé ton cache navigateur ?
Merci pour cet article j’étais en galère sur les ancres et j’y suis arrivée sur mon article qui est en court de rédaction !
Je viens de passer sur la nouvelle version d Edition de WP et du coup je cherchais comment faire mes renvois au sein de la meme page et votre article est tres clair! Malheureusement, quand je sélectionne mon bloc pour créér l´ancre, sous Bloc > avancé, je n ai pas « ancre HTML » mais uniquement classes CSS additionnelles »… Du coup ca ne fonctionne pas quand dans montre titre, je mets le renvoi…
Que puis-je faire?
Super article, c’était très clair !
Bonjour,
J’ai un petit souci avec les ancres.
J’ai un bandeau de menu horizontal qui reste en haut de page, même quand on scrolle la page (menu flottant, je crois)
Je voudrais que mon ancre renvoie à un texte situé sous une grande illustration.
Si je mets une ancre au début de ce texte, les 2 premières lignes sont masquées par ce menu. Je ne peux pas placer l’ancre + haut à cause, justement, de cette illustration. Où donc mettre l’ancre pour que le texte apparaisse en entier ?
Un grand merci pour votre blog instructif.
Bonjour Stéphanie, le problème est que tu auras toujours ce souci à cause du menu flottant justement. Une astuce eventuellement serait de jouer sur la marge supérieure de ton texte pour ajouter de l’espace entre l’ancre et le texte (ou de mettre un élément « espaceur »). Je pense qu’il faut tester plusieurs hauteurs de marge pour trouver le bon compromis : éviter l’effacement par le menu et en même temps que ça ne fasse pas « tâche » à la lecture.
bonjour,
article interessant, il serait bien de rajouter la méthode avec elementor, puisque la Marmite prone l’utilsation de ce builder et en plus vend une formation ( que j’ai achetée ) du dit constructeur. 🙂
Bonsoir,
Merci pour ces précieuses , et courtes, explications.
Malheureusement, cela ne fonctionne pas. Impossible de relier un article de blog pour le rediriger vers ma critique de film (ancre AVEC hashtag donc, lien dans l’article SANS hashtag).
j’ai dû faire un erreur ?
Bonjour, je ne comprends pas exactement ce que tu veux faire, mais tu confonds avec les redirections je pense non ?
Super comme d’habitude ce tuto ! Je découvre petit à petit toutes les possibilité du nouveau WordPress, quand je pense que j’hésitais à quitter mon pauvre 4.6 !
Merci
Un grand merci : vous avez l’explication la plus simple et compréhensible du web !!! Top
Bonjour,
personnellement j’utilise elementor pour WP pour créer mes ancres (et j’ai un menu ancre car mon site est un one page.)
le probleme est que depuis que j’ai fait passé mon site local =>sur le web, tous les mes retours vers la front page ne marche plus. (si je clique en fait sur une partie de mon menu)
Mes ancres de mon menu accrochent un instant vers la partie souhaitée (exemple chambres) puis remontent tout en haut de la page. (bienvenue)
cela se produit uniquement lorsque je suis sur une page annexe et que je souhaite revenir vers une partie de ma onepage en cliquant sur un des onglets de mon menu (exemple: chambres -qui est dans mon menu ancre – A noter que j’ ai évidemment accès à mon menu sur toutes mes pages annexes.)
merci de votre aide, je ne comprends pas ce qui se passe…
alex
Bonjour, vérifie tes liens, mais difficile à dire sans avoir le site sous les yeux.