Lien vers un endroit précis d’une page WordPress (lien d’ancrage)

Vous souhaitez faire un lien vers un endroit précis d’une page WordPress et vous ne savez pas comment faire, ni même comment se nomme cette action.

No problemo, je vous explique ça tout de suite.

Vous allez voir, ce n’est vraiment pas compliqué. 😉

Tout d’abord, il faut savoir que le petit nom de cette manipulation est … tadam ! … créer un lien d’ancrage. ⚓

Comme vous l’avez deviné, ce lien permettra d’accéder en un clic à un contenu situé n’importe où sur votre site.

Vous pourrez donc l’utiliser pour :

• rediriger le lecteur vers un autre endroit d’une même page (défilement rapide) ou encore un endroit spécifique d’une autre page de votre site.
• créer une table des matières, un menu pour un site one page, ou bien un bouton back to top (retour en haut).

Vous avez envie d’en savoir plus ? Alors, sans plus attendre, voyons comment :

👉 créer une ancre en HTML, sous Gutenberg, Elementor ou encore Divi,

👉 et comment l’appeler depuis une autre page ou à l’intérieur même de la page.

Créer une ancre et un lien d’ancrage en HTML

Introduction aux éléments, balise et attributs indispensables pour créer un lien

Pour commencer, voici un petit topo sur ce que sont une ancre, un identifiant, un lien hypertexte classique et un lien d’ancrage en HTML.

1 Une ancre (ou anchor, en anglais) est une balise HTML qui permet de créer un lien. On la désigne par <a>.

La balise comprend l’élément a qui doit être entouré de la balise ouvrante < et de la balise fermante > au milieu desquelles vous indiquerez l’ancre que vous avez choisie.

Souvent, il s’agit d’un texte, mais cela peut être également une image ou tout autre contenu.

2 L’attribut HTML href, quant à lui, sert à spécifier la cible du lien, c’est-à dire l’endroit où le lecteur sera redirigé lorsqu’il cliquera sur le lien. Associé à la balise <a> (ancre), un lien cliquable sera créé.

3 Un identifiant est un attribut HTML qui, comme son nom l’indique, permet d’identifier un élément spécifique afin de faire un lien vers un endroit précis dans une page. Il se présente sous la forme id.

Outre son utilisation pour créer un lien d’ancrage, il peut par ailleurs être utilisé pour cibler un élément lors de la création de scripts ou pour styliser un élément spécifique en CSS.

Maintenant que vous savez à quoi servent tous les éléments, vient le moment de les utiliser pour créer des liens.

Concevoir un lien hypertexte classique en HTML

Pour créer un lien hypertexte classique, il faut donc successivement inclure :

• La balise ouvrante <a pour indiquer que l’on veut créer un lien hypertexte sur le texte choisi,
• l’attribut HTML href pour spécifier l’adresse du lien,
• l’adresse à laquelle on souhaite rediriger l’utilisateur entre des guillemets doubles droits ou “double quote” (“),
• le texte ou l’élément que vous souhaitez rendre cliquable et qui sera visible,
• et enfin fermer la balise </a>.

Dans l’hypothèse où je souhaite vous rediriger vers mon article, Ajouter un bouton “back to top” sans plugin. Celui-ci se situant dans une page interne à ce site, alors le code s’écrira ainsi :

<a href="https://metaforweb.com/back-to-top-sans-plugin/">Ajouter un bouton “back to top” sans plugin</a>

Et le lien hypertexte apparaitra comme cela : Ajouter un bouton “back to top” sans plugin.

Générer un lien d’ancrage en HTML

Globalement, pour créer un lien d’ancrage, ce n’est pas beaucoup plus compliqué que pour créer un lien classique.

En fait, il suffit de créer un id et de l’ajouter au lien indiqué dans l’attribut href avec un signe dièse (#).

Donc, en premier lieu, il vous faut créer un identifiant avec l’attribut HTML id à l’élément vers lequel vous voulez faire pointer le lien (n’oubliez pas d’ajouter un espace avant l’id et aucun après).

Voici quelques exemples de code pour indiquer un id :

dans un titre (en h2) : <h2 id="identifiantchoisi1">Titre</h2>
dans une image.jpeg : <img id="identifiantchoisi2" src="/images/nomimage.jpeg"/>
dans un paragraphe : <p id="identifiantchoisi3">nom du paragraphe</p>

Ensuite, vous pourrez faire un lien vers l’ancre sur la même page en indiquant simplement l’id choisi précédé du symbole #.

Ici, pour l’exemple, l’id choisi est ancre :

<a href="#ancre">Exemple d'ancre</a>

Et si vous voulez faire un lien pour une ancre située sur une autre page, c’est facile aussi :

Saisissez l’URL de la page sans oublier le /, puis ajoutez le signe dièse # et enfin l’id choisi.

Par exemple, toujours avec l’id choisi ancre :

<a href="URL/#ancre">Exemple d'ancre</a>

⚠️ Rappel : choisissez bien des id différents, car l’attribut HTML id définit un identifiant qui doit être unique.

Ce petit intermède étant fait, passons aux méthodes simplissimes pour créer cet id et son lien d’ancrage sous Gutenberg, Elementor ainsi que Divi.

Ajouter un lien vers un endroit précis d’une page sous Gutenberg

Renseigner l’identifiant sous Gutenberg

Dans l’éditeur Gutenberg de WordPress, la façon la plus simple de renseigner l’id est de le faire en mode éditeur visuel.

Alors, positionnez-vous sur le bloc pour lequel vous voulez créer une ancre.

Puis, développez l’onglet “avancé” des paramètres du bloc et saisissez un identifiant dans “ancre HTML”.

Il est à noter qu’il est également possible de le faire en HTML avec le mode éditeur de code.

Pour cela, positionnez-vous sur le bloc pour lequel vous souhaitez créer une ancre. Puis, cliquez sur les 3 points verticaux et choisissez “Modifier en HTML”.

Voilà ce que donnerait le code HTML du titre en h3 avant insertion de l’id :

<h3><strong><span style="color:#ff1493" class="tadv-color">Il faut également rendre votre site rapidement accessible.&nbsp;</span></strong> </h3>

Et après, en ajoutant id=”accessible” avec un espace après le <h3 et aucun espace après “accessible”

<h3 id="accessible"><strong><span style="color:#ff1493" class="tadv-color">Il faut également rendre votre site rapidement accessible.&nbsp;</span></strong> </h3>

Créer le lien d’ancrage sous Gutenberg

Pour créer le lien d’ancrage sous WordPress Gutenberg, sélectionnez le bloc où vous voulez insérer le lien et cliquez sur le “maillon ouvert”. Une fenêtre apparait alors.

Si l’id est interne à la page, saisissez le signe dièse # suivi du nom de l’id.

Si l’id est situé sur une autre page, saisissez l’URL/, puis le #et l’id sans espace.

Vous pouvez aussi choisir ici de faire ouvrir le lien dans un nouvel onglet ou pas.

Enfin, pour valider, cliquez sur la touche entrée de votre clavier.

Créer une ancre et un lien d’ancrage sous Elementor

Renseigner l’identifiant sous Elementor

Pour commencer, en mode édition Elementor, positionnez-vous sur la section souhaitée de la page vers laquelle vous souhaitez faire un lien (ou la sous-section, la colonne, le widget…).

Ensuite, allez dans l’onglet avancé et pour créer votre ancre, renseignez l’identifiant dans ID de CSS.

Enregistrez, hop, c’est fini.

Créer le lien d’ancrage sous Elementor

Pour ce faire, allez à l’endroit où vous souhaitez créer le lien d’ancrage et renseignez-le dans “Lien” :

• #idchoisipourlancre pour un lien interne à la page
• URL/#idchoisipourlancre pour un lien externe à la page

Là encore, vous pourrez indiquer si le lien doit s’ouvrir dans un nouvel onglet ou pas et par ailleurs ajouter nofollow ou des attributs personnalisés.

Ajouter un lien vers un endroit précis d’une page sous Divi

Renseigner l’identifiant sous Divi

Dans Divi, pour renseigner l’id de la cible, c’est-à dire l’ancre, c’est tout aussi simple.

En premier lieu, allez dans les réglages de la section ou du module choisi en cliquant sur “l’engrenage”. Puis, dirigez-vous vers l’onglet avancé.

Ensuite, saisissez l’identifiant que vous pensez le plus approprié dans ID et classes CSS/ID CSS. Et enfin, n’oubliez pas d’enregistrer les modifications.

Créer le lien d’ancrage sous Divi

Pour créer le lien vers un endroit précis d’une page WordPress dans Divi, vous pouvez être confronté à plusieurs solutions.

En effet, s’il s’agit d’un texte, cela ressemblera beaucoup à ce que l’on faisait avec l’éditeur classique avant Gutenberg.

Sélectionnez le texte pour le texte à transformer en lien hypertexte. Puis, cliquez sur le “maillon ouvert” de l’éditeur de texte.

Immédiatement, une fenêtre “Insert link” surgira, remplissez alors l’Url, le texte à faire apparaître (text to display) et indiquez si la cible du lien doit s’ouvrir dans un nouvel onglet(new window) ou pas.

Par contre, par exemple, s’il s’agit d’un module, d’une ligne ou d’une section, il vous suffira de remplir au cas par cas, l’URL du lien de module ainsi que sa cible (dans la même fenêtre ou pas), l’URL du lien de ligne et “Row link target” ou bien encore l’URL du lien de section ainsi que le lien de section cible.

• #idchoisipourlancre pour un lien interne à la page
• URL/#idchoisipourlancre pour un lien externe à la page

Voilà, j’espère que cet article vous aura été utile

Maintenant, vous allez pouvoir créer des liens vers des endroits précis d’une page comme bon vous semble et, de ce fait, améliorer l’expérience utilisateur de votre site.