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

Lien vers un endroit prĂ©cis d’une page WordPress (lien d’ancrage)
6 mn de lecture

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.

Vous pourrez également créer, pourquoi pas, 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.

⚠ Il est Ă  noter que l’id (identifiant) :

  • Doit ĂȘtre unique pour l’ensemble de la page : En gros, vous ne pouvez pas choisir 2 id identiques pour des cibles diffĂ©rentes, sinon le lien ne fonctionnera pas.
  • Ne peut ĂȘtre composĂ© que de lettres ou de chiffres,
  • que les lettres doivent ĂȘtre sans accent,
  • que l’on ne doit pas commencer par un chiffre,
  • et que celui-ci ne devra comporter aucun espace.

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

renseigner id dans Ă©diteur de bloc WordpPess Gutenberg

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éation lien d'ancrage interne ou externe sous WordPress Gutenberg

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.

créer une ancre et un lien vers un endroit précis sous WordPress Elementor

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.

Ajouter un id Ă  une section dans Divi

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
insérer lien d'ancrage dans Divi

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.

Soumettre un commentaire 💬

guest
2 Commentaires
Commentaires en ligne
Afficher tous les commentaires