Comment créer des ancres sur WordPress ?

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.

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”).

Formez-vous à WordPress en 8 semaines

avec la formation à distance la plus généreuse du marché (éligible aux financements)

Découvrir le programme

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 : 

1. Saisir l’URL de la page, par exemple : “https://www.monsite.fr/tarifs” ; 
2. 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 ?

Je m'inscris

À propos de l'auteur

Olga Pacouret

Rédactrice web SEO engagée et passionnée, j'aide les entreprises à augmenter leur visibilité sur le web grâce à des contenus optimisés et de qualité.