Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment créer des liens d'ancrage dans WordPress (sans plugin)

Comment créer des liens d'ancrage dans WordPress (sans plugin) 

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : John Turner
image du réviseur John Turner
John Turner est le fondateur de SeedProd. Il est entrepreneur, développeur Web, spécialiste du marketing, administrateur système, administrateur de base de données, technicien d'assistance et peut même cuisiner.

Vous cherchez un moyen simple d'ajouter des liens d'ancrage à vos articles et pages WordPress ? Les liens d'ancrage sont un excellent moyen d'ajouter une table des matières aux articles, aidant ainsi les utilisateurs à naviguer dans les longs articles. Vous pouvez également utiliser les liens d'ancrage pour vous aider à apparaître dans des résultats de recherche spécifiques afin d'améliorer votre classement.

Cet article vous montrera comment créer facilement des liens d'ancrage dans WordPress.

Avant de commencer, cliquez sur l'un des liens d'ancrage de cette table des matières pour accéder à la section dont vous avez besoin :

Table des matières

Comme nous l'avons mentionné précédemment, les liens d'ancrage peuvent également améliorer votre référencement WordPress. Google affiche souvent les liens d'ancrage dans les résultats de recherche sous la forme d'un lien "Aller à" afin que les lecteurs puissent accéder directement à une section particulière à partir de la page de résultats.

Google affiche les liens d'ancrage comme des liens "passer à" dans les résultats de recherche.

Parfois, Google affiche également plusieurs liens d'une même page en tant que liens "passer à". Il est prouvé que ces liens augmentent le taux de clics dans les résultats de recherche, ce qui se traduit par une augmentation du trafic sur votre site web.

Google peut également afficher dans les résultats de recherche plusieurs liens d'ancrage provenant d'un même article.

Comment créer un lien pour accéder à une partie spécifique d'une page dans WordPress ? Découvrons-le !

La création de liens d'ancrage dans l'éditeur de blocs de WordPress est assez simple. Vous avez seulement besoin de faire 2 choses pour que vos liens d'ancrage fonctionnent :

  1. Créer un lien avec le signe # juste avant le texte d'ancrage
  2. Ajoutez l'attribut ID au texte où vous souhaitez que l'utilisateur passe à l'étape suivante.

Suivez les instructions ci-dessous pour apprendre à le faire vous-même.

La première étape consiste à mettre en évidence le texte auquel vous souhaitez ajouter votre lien d'ancrage. Cliquez ensuite sur l'icône d'insertion de lien dans l'éditeur de blocs de WordPress.

En cliquant sur l'icône, la fenêtre contextuelle d'insertion de lien s'affiche. Habituellement, vous ajoutez un lien de page ou recherchez une page à lier.

Ajoutez votre lien d'ancrage en utilisant le préfixe # et cliquez sur entrée.

En revanche, pour les liens d'ancrage, vous devez saisir le signe # et les mots-clés de la section vers laquelle vous souhaitez que les utilisateurs se dirigent.

Les mots clés que vous utilisez doivent :

  • être en rapport avec la section vers laquelle vous créez un lien
  • Ne pas être trop long ou trop compliqué
  • Utilisez les majuscules pour rendre le texte de l'ancre plus lisible.
  • Inclure des traits d'union pour séparer les mots et les rendre plus faciles à lire.

Une fois que vous avez saisi les mots-clés de votre lien d'ancrage, cliquez sur Entrée pour créer le lien. Vous pouvez alors voir le lien que vous avez créé dans l'éditeur WordPress, mais cliquer dessus ne fera rien.

C'est parce qu'il n'y a pas d'identifiant lié au lien d'ancrage, que votre navigateur recherche lorsque vous cliquez sur le lien.

Vous pouvez y remédier en ajoutant l'attribut ID à la zone de contenu vers laquelle vous souhaitez créer un lien, ce que nous allons voir par la suite.

Étape 2 : Ajouter l'attribut ID au texte lié

Dans votre éditeur de contenu WordPress, faites défiler vers le bas jusqu'au contenu auquel vous voulez que les utilisateurs accèdent lorsqu'ils cliquent sur votre lien d'ancrage. La section dont vous avez besoin est souvent un titre ou le début d'un nouveau paragraphe.

Cliquez ensuite sur le bloc contenant la section vers laquelle vous souhaitez créer un lien et accédez aux paramètres du bloc sur le côté droit de votre page.

Dans les paramètres du bloc, développez l'onglet Avancé et saisissez les mêmes mots-clés que ceux que vous avez utilisés pour votre texte d'ancrage dans le champ Ancrage HTML. La seule différence est que vous n'aurez pas besoin du signe # au début.

Ajoutez le texte de l'ancre à la section Ancrage HTML des paramètres avancés du bloc.

Lorsque vous enregistrez votre article et le prévisualisez, vous pouvez voir votre lien d'ancrage en action. Il vous suffit de cliquer dessus pour accéder au contenu que vous avez lié précédemment.

Si la partie du contenu vers laquelle vous souhaitez créer un lien n'est pas un titre mais un paragraphe ou un morceau de texte normal, le processus est un peu différent.

Dans ce cas, cliquez sur le bloc pour afficher les paramètres du bloc et cliquez sur le menu à trois points pour afficher d'autres options.

Modifiez votre bloc WordPress en HTML

Sélectionnez ensuite l'option Editer en HTML, qui vous permet de modifier tout le code HTML de ce bloc de contenu.

Now you need to find the HTML tag for the information you want to point to. For example, look for <p> if it’s a paragraph, or <table> if it is a table, and so on.

Une fois que vous avez trouvé la balise, ajoutez vos mots-clés d'ancrage dans l'attribut id, comme dans l'exemple ci-dessous :

<p id="bali-hiking-adventures">

Après avoir ajouté vos mots-clés, vous verrez peut-être apparaître un message expliquant que le bloc contient un contenu non valide ou inattendu.

Convertissez votre bloc WordPress en HTML pour finir d'ajouter votre lien d'ancrage

Cliquez donc sur le bouton Convertir en HTML pour enregistrer vos modifications.

Si vous utilisez encore l'éditeur classique de WordPress, l'ajout d'un lien d'ancrage est légèrement différent. Suivez les étapes ci-dessous pour apprendre à créer des liens d'ancrage dans l'éditeur de contenu visuel classique de WordPress.

Tout d'abord, mettez en évidence le texte que vous souhaitez lier et cliquez sur le bouton Insérer un lien en haut de votre éditeur de contenu.

Ajoutez votre lien d'ancrage dans l'éditeur WordPress classique en utilisant le préfixe # et le slug de votre lien.

Ensuite, ajoutez vos mots-clés d'ancrage avec le préfixe #, suivi du texte que vous souhaitez lier.

Étape 2 : Ajouter l'attribut ID au texte lié

L'étape suivante consiste à diriger les navigateurs vers la section du contenu à laquelle vous souhaitez que les utilisateurs accèdent en cliquant sur le lien d'ancrage.

Pour ce faire, passez en mode Texte dans l'éditeur classique de WordPress, puis faites défiler la page jusqu'à la section que vous souhaitez afficher.

Passez à l'éditeur de texte et ajoutez l'attribut id à votre contenu HTML

Next, find the HTML tag you want your anchor link to target. For example, <h2>, <h3>, <p>, etc.

Ajoutez maintenant l'attribut ID avec les mots-clés de vos liens d'ancrage sans le préfixe #. Voici un exemple de ce que cela donnerait :

<h2 id="bali-hiking-adventures">

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre contenu pour voir si le lien d'ancrage fonctionne.

Si vous utilisez habituellement le mode Texte pour écrire du contenu dans l'éditeur classique de WordPress, voici comment créer manuellement un lien d'ancrage en HTML.

First, create an anchor link with the # prefix using the <a href=” “> tag, similar to the example below:

<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>

Then scroll to the section of content you want to display when users click on your link. Usually, the section is an H2 or H3 tag, but it can also be another HTML element, like a simple paragraph <p> tag.

Une fois que vous avez trouvé la balise HTML, ajoutez l'attribut ID et le texte de l'ancre sans le préfixe # comme ceci :

<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre contenu pour tester votre lien d'ancrage.

Si vous publiez régulièrement des articles longs, vous pouvez gagner du temps en ajoutant automatiquement des liens d'ancrage aux différents titres de votre contenu et en créant une table des matières à l'aide d'un plugin WordPress. Les utilisateurs trouveront ainsi plus facilement les informations dont ils ont besoin et il ne sera plus nécessaire de créer chaque lien d'ancrage manuellement.

Pour ce faire, téléchargez le plugin Easy Table of Contents, installez-le et activez-le sur votre site web WordPress. Si vous avez besoin d'un peu d'aide, suivez ces instructions pour installer un plugin WordPress.

Le plugin utilise les titres de votre contenu pour déterminer les sections vers lesquelles créer des liens, et vous pouvez entièrement personnaliser les paramètres en fonction de vos besoins.

Une fois que vous avez installé et activé le plugin, naviguez vers Paramètres " Table des matières pour configurer vos paramètres.

Configurer les paramètres du plugin de table des matières facile à utiliser

Activez ensuite le plugin pour les types d'articles auxquels vous souhaitez ajouter des liens d'ancrage et décochez les zones où vous ne souhaitez pas afficher de table des matières.

Vous pouvez également activer l'option d'insertion automatique. Cette option permet au plugin de créer automatiquement une table des matières pour tous les types de contenu sélectionnés, y compris les contenus plus anciens.

Si vous souhaitez uniquement créer automatiquement une table des matières pour des articles spécifiques, ne cochez pas cette option.

Ensuite, faites défiler la page pour choisir l'endroit où vous souhaitez afficher votre table des matières et le moment où vous souhaitez la déclencher.

Choisissez les paramètres de position de votre table des matières dans WordPress

Par exemple, vous pouvez afficher votre table des matières avant ou après votre premier titre et lorsqu'un certain nombre de titres sont présents dans votre article.

Plus bas dans la page, vous pouvez choisir un thème correspondant à l'image de marque de votre site et passer en revue des paramètres plus avancés.

Choisissez un thème pour votre table des matières afin qu'il corresponde à l'image de marque de votre site web.

N'oubliez pas de cliquer sur le bouton Enregistrer les modifications pour conserver vos paramètres.

Si vous activez l'option d'insertion automatique, vous pouvez prévisualiser un article avec le bon nombre de titres pour voir votre table des matières en action.

Toutefois, si vous souhaitez générer une table des matières manuellement, vous devrez éditer chaque article individuellement.

Pour ce faire, accédez à l'écran d'édition de votre contenu et faites défiler l'écran jusqu'à l'onglet Table des matières situé sous l'éditeur.

Cliquez ensuite sur la case à cocher "insérer une table des matières" et sélectionnez les titres que vous souhaitez inclure comme liens d'ancrage.

Cliquez sur la case à cocher pour insérer une table des matières dans votre article.

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre article. Le plugin Easy Table of Contents affichera automatiquement une liste de liens d'ancrage comme table des matières.

Table des matières facile avec liens d'ancrage dans WordPress

Nous avons abordé plusieurs méthodes pour ajouter des liens d'ancrage à votre site WordPress, mais qu'en est-il si vous créez une page d'atterrissage ?

Heureusement, SeedProd, le meilleur thème WordPress et constructeur de pages d'atterrissage, vous permet de créer des liens d'ancrage facilement.

Dans son éditeur visuel drag-and-drop, vous pouvez utiliser le bloc de liens d'ancrage pour relier une partie de votre page d'atterrissage à une autre. Si vous utilisez SeedProd pour créer un thème WordPress personnalisé, vous pouvez utiliser la même méthode que celle que nous allons vous montrer pour créer des liens d'ancrage n'importe où dans votre thème.

Bloc de liens d'ancrage SeedProd

Il suffit de faire glisser le bloc Lien d'ancrage vers la partie de la page à laquelle vous souhaitez accéder et de saisir un nom.

Ajouter un nom de lien d'ancrage

Ensuite, sélectionnez le texte de votre page d'atterrissage à partir duquel vous souhaitez créer un lien, ajoutez le nom du lien d'ancrage avec un hashtag au début et cliquez sur enregistrer.

Ajoutez le texte de votre lien d'ancrage

Désormais, lorsque vous prévisualisez votre page et que vous testez le lien, celui-ci passe automatiquement à la bonne section.

Liens d'ancrage sur votre page d'atterrissage

Vous pouvez suivre ce guide étape par étape pour créer une page d'atterrissage dans WordPress si vous avez besoin d'aide pour commencer.

Et voilà !

Nous espérons que cet article vous a aidé à apprendre comment créer des liens d'ancrage dans WordPress. Vous pouvez maintenant offrir à vos lecteurs une meilleure expérience utilisateur et améliorer votre référencement pour vous aider à obtenir plus de trafic, d'abonnés et de clients potentiels.

Si vous souhaitez connaître les autres plugins que vous pouvez utiliser pour améliorer votre site web et gagner un temps précieux, consultez les récapitulatifs suivants :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.

Commentaires

  1. J'ai un lien dans le pied de page (template), disons qu'il s'appelle "contact". En cliquant dessus, je charge la page "about" et je fais défiler la page jusqu'à la section "contact". Comment cela se passe-t-il ?

    1. Bonjour Max. Pour ce faire, vous devez créer un lien vers la page "à propos" et ajouter l'ancre au lien URL /about/#contact. J'espère que cela vous aidera !

  2. Bonjour, j'ai ajouté le lien d'ancrage et créé l'attribut id correctement (double et triple vérification) mais mon lien ne fonctionne pas - il ne m'emmène nulle part. Je ne trouve pas d'articles sur les propositions de ce qui pourrait être un problème ? Qu'est-ce que cela peut être ? Je jure que tout est configuré comme il se doit. Est-ce qu'il pourrait y avoir un plugin ou quelque chose dans mon thème qui l'empêche ? Je vous remercie.

    1. Bonjour Tuija,

      Votre version de WordPress est-elle à jour ? Vous pouvez également essayer de vous assurer que tous vos plugins et thèmes sont également mis à jour. Si cela ne fonctionne pas, essayez de désactiver vos plugins et de les activer un par un pour voir s'il n'y a pas de conflit.

  3. Bonjour

    Je cherche une solution pour que l'ancre fonctionne avec le menu. La première page fonctionne bien et défile à l'endroit approprié. Cependant, lorsque l'on clique sur le lien avec l'ID de l'ancre à partir de la page Contact Me, par exemple, cela ne fonctionne pas. J'ai découvert que le lien s'affiche sur MYDOMAIN.com/contact-me/#anchorID au lieu de MYDOMAIN.com/#anchorID.

    J'ai remplacé le menu par une URL complète telle que MYDOMAIN.com/#anchorID. Cela a fonctionné, mais les boutons avec cette URL affichent toujours la couleur active que j'ai définie pour les boutons actifs. De plus, sur le menu mobile, le menu lui-même ne se cache pas.
    L'URL complète fonctionne, mais comment résoudre le problème des boutons actifs et ne pas cacher le menu sur mobile ?

    Quelqu'un a-t-il trouvé une solution ? Merci de votre compréhension.

Les commentaires sont fermés.