Si vous avez l’habitude d’écrire des articles sur votre WordPress, parfois vos lecteurs sont confrontés à une faiblesse de l’ergonomie de lecture de ceux-ci à cause de la longueur du texte. Dans ce petit tutoriel, je vous vous montrer comment résoudre ce soucis. Ainsi permettre à vos lecteurs d’accéder directement à certaines parties de votre texte. Pour cela, il suffit de « créer une ancre pour vos articles WordPress ».

L’objectif de ce type d’astuce et d’éviter à votre lecteur de faire des scrolls interminables. Ca permet également à celui-ci d’accéder directement à un chapitre ou une section de votre article. Dans l’exemple ci-dessous on va prendre le cas d’un bloggeur mode qui scrute les photos des acteurs parus dans la presse. Il indique dans ses articles sur son WordPress quels sont les vêtements ou accessoires qu’ils portent.

C’est bien sûr un exemple fictif et avec un peu d’imagination vous pourrez adapter ce tutoriel à votre cas ou votre besoin. On part du principe dans ce tutoriel que vous maîtrisez l’écriture sous WordPress et un peu le langage HTML. Merci de noter également que, ce qui suit est adapté pour la plupart des thèmes utilisés pour WordPress. Toutefois, il se peut pour diverses raisons techniques que cela ne fonctionne pas avec le thème que vous utilisez. Dans l’exemple ci-après,nous avons utilisé le thème de base de WordPress à savoir « Twenty Seventeen ».

Voici l’article de notre blogeur, vous remarquez qu’il est long. Il comporte en début un lien. Celui-ci envoi vers le bas de la page à l’endroit du chapitre « La montre de fou de cet acteur » Hormis les titres vous aurez remarqué que c’est du « faux texte » ou parfois appelé du « Bolobolo ». C’est pour permettre de simuler du contenu pour notre exemple.

Une ancre c’est quoi ?

Une ancre est un point invisible qui permet de créer un lien à un endroit précis dans une page web. Quand vous avez des pages très longues, cela vous permet par exemple de faire un lien directement vers le bas d’une page et ainsi d’éviter l’utilisation de la barre de défilement. Vous pouvez l’utilisez aussi dans un autre sens c’est-à-dire pour mettre un retour en haut de la page quand l’internaute se trouve en bas de page. Dans notre exemple on va juste envoyer l’internaute en bas de la page au bon endroit.

Donc poser une ancre dans un texte revient à marquer un endroit de votre page pour que l’internaute y accède plus facilement. Haut, bas, milieu, peu importe l’emplacement du moment que l’endroit est marqué par une ancre. Vous pouvez bien évidemment mettre autant d’ancre que vous le souhaitez dans un texte. Sous réserve bien sûre de respecter quelques formalités précises dans la façon de le faire.

Poser des ancres pourrait par exemple permettre de créer « un chapitrage » de votre texte et de mettre un sommaire en début de votre article pour un accès rapide à chaque partie.
Pour poser une ancre dans un article WordPress, il faut insérer un bout code html pour que le navigateur comprenne où il devra aller. Mais il faudra aussi insérer un lien qui va envoyer vers l’ancre en question quand l’internaute va cliquer dessus.

Code pour une ancre en html

Le code HTML pour une ancre est assez simple. Voici ci-dessous ce que l’on va mettre pour notre exemple

On va donc positionner ce bout de code au bon endroit dans le texte en utilisant impérativement l’onglet « texte » de WordPress.

Donc il faut aller sur l’article, puis cliquer sur l’onglet « texte ».Ensuite faite défiler votre texte jusqu’au bon endroit. Ici dans notre exemple on la fait jusqu’au titre du bas. Coller ensuite le bout de code ou taper le directement avec votre clavier.

Noter bien comment vous avez appelé le label « id » dans votre bout de code. C’est cela qu’il faudra ensuite copier dans l’autre bout de code qui servira pour l’internaute à cliquer dessus et accéder au bon endroit. En l’occurrence ici c’est « chapitre1 ».

Un conseil éviter les caractères accentués, cela pourrait ne pas fonctionner avec certains navigateur web.

J’aurais pu mettre le bout de code positionner sur le titre lui-même. Dans ce cas il aurait fallu que je le positionne entre les balises « h2 »

Voilà ce que cela aurai donné :

La montre de fou de cet acteur

Pour les puristes, en fait il faudrait plutôt faire comme ceci :

La montre de fou de cet acteur

 

Créer le lien vers l’ancre

Vous avez réussi à comprendre comment mettre une ancre invisible par l’internaute : bravo. Maintenant, il faut mettre un lien pour que l’internaute puisse cliquer dessus pour accéder à votre ancre.

Là aussi il faut un bout de code. Dans notre exemple il faut celui-la :

Le « href » doit impérativement avoir la même orthographe que votre « id » de l’ancre invisible. Si ce n’est pas le cas cela ne fonctionnera pas.

Pour notre exemple on revient donc en haut de l’article et on copie le bout de code adéquate.

Voilà c’est tout il ne reste plus qu’a testé en frontal de votre site que tout marche. Un conseil si vous avez plusieurs ancres à mettre avec les liens qui vont bien : faites le un par un, à savoir d’abord l’ancre 1 puis le lien 1. Passer ensuite à l’ancre 2 puis le lien 2 etc…

Sinon vous risquez d’en oublier croyez-moi. De plus faite le sur du texte brut et une fois que vous avez positionner les ancres alors faite votre mise en page. En effet avec certain thème pour une raison que je ne m’explique pas WordPress « casse » la mise en page du texte quand on a positionner une ancre à posteriori de la mise en page. Ce n’est toutefois pas systématique.

Sachez enfin que certaines de ces ancres sont parfois appelées « lien d’évitement » et que pour « l’accessibilité web » cela peut avoir de l’importance.

Créer une ancre pour vos articles WordPress
Moyenne des notes : 3.5 (70%) 8 votes