Vous est-il déjà arrivé de vouloir faire arriver vos lecteurs à un emplacement précis de votre texte? Par exemple, créer une table des matières en début d’article où il pourrait cliquer sur le titre d’une partie pour y accéder directement. Si votre thème ne le prévoit pas, je vous explique comment ajouter des ancres pour le faire, et ce, dans Gutenberg comme dans l’éditeur classique (ou en HTML) de WordPress!
C’est quoi une « ancre » ?
Une ancre est un élément HTML qui permet de définir un hyperlien vers un autre endroit de votre article ou même vers une autre page Web. Car, oui, lorsqu’on ajoute un lien à nos textes, nous utilisons l’élément <a> (pour ancre ou anchor en anglais). Voici quelques exemples.
Si j’insère un lien comme celui-ci vers ma page d’accueil, cela se traduit en HTML comme suit:
<a href="http://www.lautrevero.ca/">Lien vers ma page d'accueil</a>Si j’insère une ancre vers le mot Flèches situé à la toute fin de cet article proche de la photo (vous le saurez quand vous y serez, croyez-moi!), cela se traduira plutôt ainsi:
<a id="ancretest"></a><p class="ancretest"><strong>Flèches</strong></p>Utiliser les ancres, oui, non?
Si utiliser des ancres peut être très utiles pour naviguer dans certains textes particulièrement longs, elles peuvent parfois poser problème. C’est notamment le cas si les ancres permettent à vos lecteurs de passer par dessus vos publicités. De plus, en permettant aux lecteurs d’atteindre plus rapidement une section de votre texte, vous les amenez à réduire le temps de lecture de votre texte. Pensez-y donc bien et utilisez les ancres avec parcimonie.
Comment créer les ancres dans Gutenberg?
- Identifiez le texte qui deviendra votre ancre, par exemple allumette. Dans la fenêtre des paramètres (settings) à droite de votre éditeur, repérez l’option Advanced et cliquez dessous pour l’ouvrir.
- Dans la section intitulée Additionnal CSS Class écrivez par exemple ancretest.
- Dans votre article, sélectionnez le texte qui enverra le lecteur directement à votre ancre et cliquez sur l’option permettant d’insérer une URL.
- Écrivez l’ID de votre ancre précédée d’un dièse #.
Créer des ancres manuellement
Si vous utilisez l’éditeur classique ou que vous préférez ajouter des ancres en HTML, ajoutez le code suivant pour identifier votre ancre:
<a id="texte"></a>Puis ajoutez au texte que vous désirez utiliser pour accéder à l’ancre:
Ceci est un exemple de <a href="http://monurl.url">texte</a> qui pourrait renvoyer à l'ancre.