Créer une ancre dans WordPress (leur utilité et comment les faire sous Html, Divi, Elementor et gutenberg)

Dans cet article nous allons tenter de répondre à toutes les questions que vous vous posez sur les ancres, qu’est-ce que c’est, à quoi ça sert, comment les utiliser, etc. Mais vous allez en plus apprendre à créer une ancre avec vos éditeurs de page favoris !

Alors si vous souhaitez apprendre à créer une ancre avec DIVI, Elementor, ou Gutenberg, nous allons tout vous expliquer. Et pour les purs et durs qui souhaiteraient créer une ancre à la main et en HTML on vous expliquera aussi !

Vous vous êtes peut-être retrouvé un jour (sur notre site WP Formation par exemple) à cliquer sur un lien dans un sommaire et constater, avec émerveillement et un peu d’inquiétude il faut bien l’avouer, que l’ingénieux concepteur de ce site vous dirigeait alors directement et comme par magie vers le contenu qui vous intéressait…

Si ? Non ? Et bien que cela soit le cas où pas, vous avez affaire dans cet exemple à ce que l’on appelle une belle utilisation d’une ancre !

Qu’est-ce qu’une ancre ?

Pour filer la métaphore marine, si on était le capitaine du bateau (A.K.A le rédacteur de la page) et qu’on décidait de jeter l’ancre à un endroit qui nous plait et qu’on déposait une croix sur la carte (A.K.A notre page) pour pouvoir y revenir plus tard.

Si on est lecteur, l’idée c’est de pouvoir utiliser les croix laissées par le capitaine du bateau pour pouvoir naviguer directement vers l’endroit qui nous plait le plus sur la carte.

Pour être plus pragmatique, une ancre est un petit bout de code HTML qui permet de déposer une sorte de “marque ” à un endroit précis à l’intérieur d’une page web et vers laquelle on va pouvoir faire un lien qui y redirige directement.

À quoi sert une ancre ?

Les ancres ont plusieurs raisons d’être, mais d’une manière générale une ancre sert à pouvoir rediriger le lecteur vers un endroit précis d’une page.

Créer un sommaire pour faciliter l’expérience utilisateur

L’application la plus habituelle de l’utilisation des ancres est le sommaire ! En effet les sommaires utilisent le principe des ancres dans une page.

Comme vous pouvoir le voir sur cet article (et partout sur nos articles), le sommaire permet de découper la page en fonction des principaux sujets traiter et de pouvoir sauteur directement au sujet qui nous intéresse le plus si besoin.

C’est une fonctionnalité qui permet d’améliorer l’expérience utilisateur dans la mesure où cela permet d’avoir une vue d’ensemble de l’article et des thèmes qui vont être abordés et cela offre une possibilité au lecteur d’accéder directement à l’information qui l’intéresse.

Améliorer le référencement

Une ancre permet également d’ajouter des données structurées à votre page et de donner un peu plus de force à vos titres en matière de SEO (référencement naturel).

On a tendance à penser que c’est une bonne pratique dans la mesure où cela permet aux moteurs de recherche de mieux comprendre comment la page est structurée et quels sont les thèmes principaux qui y sont traités (dans la mesure où vos titres sont bien choisis et que le contenu s’y référant est cohérent avec ce titre).

Attention cela dit, soyons honnête, faire un sommaire ne va pas non plus vous faire ranker d’un coup en première page ! L’impact SEO d’un sommaire est faible, mais il existe, et c’est une pratique que l’on peut recommander.

Marquer une information de valeur

Enfin une ancre peut également être utilisée simplement pour marquer quelque chose d’important pour vous dans la page et vers lequel vous avez l’intention de rediriger les lecteurs, notamment depuis une autre page de votre site.

Par exemple, si vous avec une information de valeur ou d’une importance stratégique pour vous, en y déposant une ancre, vous pourrez rediriger vos lecteurs vers cette information à chaque fois que vous en aurez besoin depuis n’importe quelle page de votre site.

Call to action (appel à l’action)

Une ancre peut également être utilisée avec un Call to action, comme un bouton qui va rediriger le lecteur vers une zone de la page et l’amener à faire une action.

On peut penser par exemple à un bouton pour s’inscrire à une newsletter, remplir un formulaire de contact, ou toute autre action qui aura un intérêt pour vous. Le bouton redirigera alors directement le lecteur vers le formulaire en question sans qu’il ait à lire tout l’article avant d’atteindre ledit formulaire.

Créer une ancre en HTML sur WordPress

À la base, une ancre un petit bout de code HTML que l’on va donc placer où on le souhaite sur la page. Une fois l’ancre déposée quelque part, on va ensuite créer un lien qui redirigera vers cette ancre.

Le principe de base

Nous allons voir comme procéder pour créer une ancre en HTML sur WordPress, mais déjà voici comment cela se passe de façon très schématique : pour insérer une ancre, il faut ajouter un attribut id à la balise correspondant à “l’objet” que vous avez choisi comme repère.

Voici quelques exemples de ce à quoi ressemblerait une ancre attachée à différents “objets” :

• Sur un titre : <h2 id="nom_de_mon_ancre">Mon titre</h2>
• Sur un texte dans un paragraphe : <p id="nom_de_mon_ancre">mon paragraphe</p>
• Sur une section : <div id="nom_de_mon_ancre">ma section</div>

Ensuite, il ne reste plus qu’à créer un lien de façon habituelle dont on va adapter le format en fonction de nos besoins :

• Pour faire un lien vers une ancre dans la page : on va simplement renseigner le nom de l’ancre précédé du signe #.
  En HTML cela donnera : <a href="#nom_de_mon_ancre">mon lien</a>
• Pour faire un lien vers une ancre située dans une autre page : on va renseigner l’URL complète de la plage à laquelle on va rajouter le nom de l’ancre précédée du signe #.
  En HTML cela donnera : <a href="https://mon-site.com/ma-page#nom_de_mon_ancre">mon lien</a>

C’est très facile pour ceux qui connaissent un tant soit peu le language HTML, mais pour ceux qui n’ont jamais mis le nez dedans cela peut vite sembler compliquer. Nous allons voir ensemble pas à pas comment procéder pour créer une ancre en HTML sous WordPress.

Le tutoriel pas-à-pas pour créer une ancre en HTML

1.Passer en mode “Éditeur de code”

• Cliquer sur l’icône avec les trois petits points en haut à droite pour ouvrir les options de l’éditeur WordPress.
• Cliquer sur “Éditeur de code”

2.Repérer la balise où vous allez placer votre ancre

• Chercher où se trouve le titre ou le paragraphe où vous souhaitez placer l’ancre
• Une fois trouvé, chercher la balise < > au début du titre ou du paragraphe concerné

3.Insérer l’ancre

• Vous allez insérer l’ancre sous la forme id="nom_de_mon_ancre"
• Placer votre curseur juste après l’identifiant de la balise recherchée en laissant un espace et insérer l’ancre

Note : ici il est important de bien faire attention à insérer l’ancre à l’intérieur de la balise qui entoure l’élément où vous souhaitez placer l’ancre.

Par exemple pour un paragraphe vous placerez l’ancre juste après le p de la balise :
<p id="nom_de_mon_ancre">mon paragraphe</p>

Pour placer l’ancre sur un titre, on l’insèrera juste après le h2 de la balise :
<h2 id="nom_de_mon_ancre">mon titre</h2>

4.Repasser l’éditeur en mode visuel

• Cliquer sur l’icône avec les trois petits points en haut à droite pour ouvrir les options de l’éditeur WordPress.
• Cliquer sur “Éditeur visuel”

5.Créer le lien qui va rediriger vers l’ancre

• Choisir le mot ou la phrase qui va vous servir pour créer le lien
• Cliquer sur l’icône pour insérer un lien

• Insérer le lien sous la forme #nom_de_mon_ancre et rien d’autre (n’ajoutez pas de https:// ni rien de plus)

Et voilà votre ancre et le lien qui redirige vers elle est créé !

Le résultat

Et voilà le résultat attendu dans une superbe animation GIF du plus bel effet !

Donc en résumé pour créer une ancre en HTML sous WordPress :

• J’ouvre l’éditeur de code
• Je repère la balise où je veux placer mon ancre
• J’insère l’ancre dans la balise <> qui m’intéresse sous la forme id="nom_de_mon_ancre"
• Je créé le lien vers l’ancre sous la forme <a href="#nom_de_mon_ancre"> ou en utilisant l’outil d’insertion de lien habituel et en insérer juste #nom_de_mon_ancre dans le champ prévu à cet effet.

Conseil : le nom de l’ancre ne doit pas contenir d’espace, d’accents ou de caractères spéciaux, utilisez juste des lettres séparées par des tirets. Choisissez bien le nom de votre ancre, car elle a un (minuscule) rôle en termes de référencement.

Option : lien vers une ancre sur autre page

Comme on l’a dit au départ, il est possible de rediriger le lecteur vers une ancre située sur une autre page que celle en cours de lecture. Cela peut être utile dans certains cas où des sujets transversaux sont traités et où vous avez envie de proposer à vos lecteurs la lecture d’un passage sur une autre page qui vient apporter de la valeur.

Le principe est le même que vu précédemment sauf qu’au lieu d’insérer juste le #mon_ancre dans la destination du lien, on va renseigner l’URL de la page vers laquelle vous souhaitez rediriger le lecteur suivi de l’ancre spécifique recherchée.

Concrètement le lien doit ressembler à ça :
https://mon-site.com/nom-de-ma-page#nom_de_mon_ancre

Et voilà le résultat attendu avec un toujours aussi joli GIF !

On a donc vu comment créer une ancre en HTML dans WordPress. C’est la technique “à l’ancienne”, propre et efficace, mais pas forcément la moins chronophage, il faut bien l’avouer…

Pour simplifier tout cela, les principaux constructeurs de pages proposent une option pour insérer des ancres facilement sans avoir à passer par l’éditeur de code. Nous allons voir ensemble comment créer des ancres dans les constructeurs de pages les plus répandus sur WordPress, à commencer par l’éditeur de page natif : Gutenberg !

Créer les ancres avec Gutenberg

Nous restons dans l’environnement natif de WordPress et allons voir ensemble à quel point il est simple d’insérer des ancres avec l’éditeur de page visuel Gutenberg.

En résumé voici les opérations à suivre :

• Cliquer sur le bloc où vous souhaitez insérer une ancre
• Ouvrez l’onglet “Avancé” du bloc
• Insérer le nom de votre ancre dans le champs correspondant
• Créer un lien redirigeant vers votre ancre comme nous l’avons vu précédemment

Tutoriel pas-à-pas pour créer une ancre avec Gutenberg

1.Cliquer sur le bloc de votre choix

• Repérer le contenu vers lequel vous souhaitez rediriger vos lecteurs
• Cliquer sur le bloc correspondant pour faire apparaitre les paramètres du bloc

2.Cliquer sur l’onglet “Avancé”

3.Insérer le nom de l’ancre

• renseigner le nom de votre ancre dans le champs “Ancre HTML”

Encore une fois, l’ancre doit être simple et surtout sans espace, ni accents, ni caractères spéciaux.

4.Créer le lien de redirection vers l’ancre

• Sélectionner le mot ou la phrase pour créer le lien
• Cliquer sur l’icône lien
• Insérer le nom de l’ancre précédé du signe #

Ici par exemple : #mon-ancre

Et voilà ! Votre ancre a été créée !

On se rend compte que c’est tout de même beaucoup plus facile de créer une ancre avec Gutenberg. Et au final si on regarde le code HTML de notre page après avoir créé notre ancre avec Gutenberg on retrouve exactement la même structure sauf qu’on n’a pas eu à entrer dans le dur pour y arriver.

Après avoir vu comment créer des ancres avec Gutenberg l’éditeur natif de WordPress, nous allons voir ce qu’il en est avec DIVI, un des constructeurs de page les plus populaires du marché

Utiliser les ancres avec DIVI

DIVI est un thème incluant un constructeur de page devenu très populaire. Si certains y voient une usine à gaz indigeste d’autres y voient une formidable fabrique pour créer des sites au design soigné.

DIVI n’est pas accessible gratuitement, il faut acheter une licence puis installer un thème associé à la licence DIVI. C’est tout un écosystème avec de nombreux plugins exclusivement dédiés aux utilisateurs de DIVI. Une secte ? Nooooooonnnn…

Comme pour Gutenberg, on a affaire ici à un constructeur de page sous forme de blocs. Et bien que son utilisation soit bien plus compliqué que Gutenberg, créer des ancres avec DIVI n’est pas bien sorcier non plus.

Difficile de résumer les étapes à réaliser pour créer une ancre avec DIVI car cela va dépendre si vous utilisez DIVI avec le DIVI visual builder ou si vous utilisez DIVI avec l’éditeur de bloc traditionnel…

En mode visuel, voici les étapes pour créer une ancre sous DIVI :

• Cliquer sur la section où vous souhaitez déposer votre ancre
• Cliquer sur l’icône “roue crantée” pour ouvrir les paramètres de la section
• Ouvrir l’onglet “Avancé” des paramètres de la section
• Insérer le nom de votre ancre dans le champs “ID CSS”
• Cliquer ensuite sur la phrase, le bouton ou la section que vous souhaitez convertir en lien
• Cliquer sur l’icône “roue crantée” pour ouvrir les paramètres de la section
• Insérer le nom de l’ancre précédée du signe # dans le champs “URL” correspondant

Tutoriel pas-à-pas pour créer une ancre avec DIVI

Pour ce tutoriel nous allons utiliser le DIVI Visual Builder pour créer nos ancres.

1.Choisir le bloc où on va insérer notre ancre

• Choisir le bloc où on souhaite placer une ancre vers laquelle on fera un lien
• Cliquer sur le bloc correspondant pour faire apparaitre les paramètres

2.Ouvrir les paramètres du module

• Cliquer sur l’icône “roue crantée”

3.Ouvrir les paramètres avancés

• Cliquer sur l’onglet “Avancé”

4.Insérer le nom de l’ancre dans le champ ID de CSS

• Repérer le champ “ID de CSS”
• Insérer le nom que vous avez choisi pour votre ancre, sans espace, sans accent et sans caractères spéciaux
• Cliquer sur le bouton vert pour sauvegarder vos modifications

5.Créer le lien pour diriger vos lecteurs vers votre ancre

• Cliquer sur le module où se trouve le mot ou la phrase que vous souhaitez utiliser pour créer un lien vers votre ancre

• Ouvrir les paramètres en cliquant sur l’icône “roue crantée”

• Sélectionner le texte que vous souhaitez lier à votre ancre
• Cliquer sur l’icône “lien”

• Insérer le nom de votre ancre précédé du signe # dans le champ URL
• Valider en cliquant sur le bouton OK

Et voilà ! Vous avez créé une ancre avec DIVI et vous pouvez maintenant décliner le concept pour lier n’importe quel module avec n’importe quel texte ou bouton dans votre page. Que demander de plus ? Oui. Un GIF. On sait.

Le résultat

Le joli GIF pour vous montrer comment fonctionne votre ancre avec DIVI. Splendide.

Faire des ancres avec Elementor

Nous voici face à un des concurrents farouche de DIVI, bien que très différent dans sa philosophie puisqu’autant il est possible d’installer Elementor comme un plugin sur n’importe quel thème pour utiliser le constructeur de page autant il faut une licence payante et installer un thème spécifique pour pouvoir utiliser DIVI.

Elementor se rapproche de Gutenberg dans sa conception sous forme de blocs et nous allons voir que justement la procédure pour créer une ancre avec Elementor se rapproche assez de ce que nous avons vu avec Gutenberg.

En résumé voici les opérations à suivre pour créer une ancre avec Elementor :

• Cliquer sur le bloc où vous souhaitez insérer une ancre
• Ouvrez l’onglet “Avancé” du bloc
• Insérer le nom de votre ancre dans le champs “ID de CSS”
• Créer un lien redirigeant vers votre ancre comme nous l’avons vu précédemment

Si vous avez lu l’article jusque là, vous en avez pris l’habitude, rien ne vaut un petit tuto avec des images pour apprendre la procédure pas à pas.

Tutoriel pas-à-pas pour créer une ancre avec Elementor

1.Choisir le bloc où on va insérer notre ancre

• Choisir l’endroit où on va placer une ancre
• Cliquer sur le bloc correspondant pour faire apparaitre les paramètres

2.Ouvrir les paramètres avancé

• Cliquer sur l’onglet “Avancé”

3.Insérer le nom de l’ancre dans le champ ID de CSS

• Repérer le champs “ID de CSS”
• Insérer le nom que vous avez choisi pour votre ancre, sans espace, sans accent et sans caractères spéciaux

4.Créer le lien pour diriger vos lecteurs vers votre ancre

• Choisir le mot ou groupe de mot qui vont servir de lien
• Cliquer sur le bloc correspondant pour ouvrir les paramètres
• Sélectionner le mot ou groupe de mot et cliquer sur l’icône lien

• Insérer le nom de votre ancre précédé du signe # dans le champs du lien
• Valider

Et voilà ! Vous avez créé une ancre et un lien qui redirige vers elle avec Elementor ! Quoi de plus beau dans la vie ? Un petit GIF peut-être ?

Le résultat

Le joli GIF pour vous montrer comment fonctionne votre ancre avec Elementor. Magnifique.

Alternative : créer un lien vers une ancre sur autre page avec Elementor

On ne va pas y aller par quatre chemin, c’est toujours la même chose : il vous suffit de renseigner dans le champs de votre lien l’URL exacte de la page avec l’ancre associée.

Pour rappel, l’URL ressemblera à quelque chose comme ça :
https://mon-site.com/ma-page#mon-ancre

Créer une ancre dans son menu

Le saviez-vous ? Les ancres peuvent également être utilisées dans un menu ! Si vous avez envie de diriger vos lecteurs vers une section d’une page de votre site et cela directement depuis votre menu, c’est possible.

Le principe est assez simple :

• Ouvrir l’onglet lien personnalisé dans le menu
• Insérer l’URL complète de votre ancre, c’est à dire : https://mon-site.com/ma-page#mon-ancre
• Donner un nom à votre élément de menu dans le champs “Texte du lien”
• Cliquer sur “Ajouter au menu”
• Enregistrer le menu

Tutoriel pour insérer une ancre dans un menu sous WordPress

1.Ouvrir l’onglet Menu de WordPress

• Cliquer sur “Apparence” puis “Menu”

2.Ouvrir l’onglet “lien personnalisé”

3.Insérer le lien vers l’ancre

• Dans le champs “URL” insérer l’adresse complète de votre ancre (elle doit ressembler à cela : https://mon-site.com/ma-page#mon-ancre)
• Dans le champs “Texte du lien” choisir le texte qui apparaitre dans le menu
• Cliquer sur ajouter au menu

4.Placer votre nouvel élément où vous souhaitez et enregistrer les modifications du menu

Le résultat

Et voilà le résultat ! Le GIF qui vous montrer comment un lien dans le menu peut rediriger vers une section spécifique d’une page de votre site WordPress !

Conclusion

Nous voici à la fin de cet article dédié aux ancres sur WordPress, comment les créer et les utiliser sous différentes conditions. Vous serez certainement d’accord pour dire que ce n’est globalement pas très compliqué d’utiliser les ancres. En revanche c’est un outil très pratique dans bien des situations.

Utiliser les ancres sur votre site WordPress permet d’améliorer l’expérience de vos lecteurs en leur proposant de sauteur directement au contenu qui l’intéresse. Aussi les ancres sous la forme d’un sommaire aide à la compréhension de votre article par les moteurs de recherche. Sans parler de toutes les applications que vous pourrez imaginer pour utiliser les ancres à bon escient ! Bref, les ancres, c’est la vie !