Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter “facilement” des liens d’ancrage dans WordPress (étape par étape)

L’Ajout de liens d’ancrage dans WordPress est un moyen simple mais puissant d’améliorer la navigation de votre site.

Chez WPBeginner, nous les utilisons souvent pour aider les Lecteurs à sauter directement aux sections qui les intéressent, évitant ainsi de défiler sans fin dans de longs articles. Ils sont particulièrement pratiques dans les tables des matières des guides détaillés ou des tutoriels.

En plus de cela, les liens d’ancrage peuvent booster votre référencement puisque Google les met souvent en avant dans les extraits de fonctionnalité.

Cela dit, les définir peut sembler intimidant au début. Mises en page, il est facile de se retrouver avec des liens brisés ou une mise en page confuse pour vos lecteurs.

Dans ce guide, nous allons vous afficher des méthodes étape par étape pour ajouter facilement des liens d’ancrage dans WordPress.

How to add anchor links in WordPress wp

Un lien d’ancrage est un type spécial de lien qui dirige les utilisateurs/utilisatrices vers une section spécifique de la même page plutôt que vers une page différente ou un site WordPress.

Ces liens agissent comme des raccourcis, aidant les Lecteurs à accéder directement à la partie du contenu qui les intéresse le plus sans avoir à défiler toute la page.

Par exemple, vous pouvez voir des liens d’ancrage utilisés dans la table des matières d’un long article ou d’un guide. Lorsqu’ils sont cliqués, ils permettent à l’utilisateur d’accéder immédiatement à la section correspondante.

Anchor link preview

Une autre façon d’utiliser les liens d’ancrage est de créer des liens de signet sur votre site WordPress. Cela vous permet de partager le lien de signet sur les médias sociaux ou les bulletins d’information par e-mail, de sorte que lorsque la page se charge, vos utilisateurs/utilisatrices sautent immédiatement à la section que vous voulez qu’ils voient.

Un utilisateur/utilisatrice moyen passe moins de quelques secondes avant de décider s’il veut rester sur votre site ou le quitter. Vous disposez de ces quelques secondes pour convaincre les utilisateurs/utilisatrices de rester.

La meilleure façon d’y parvenir est de les aider à trouver rapidement les informations qu’ils recherchent.

Les liens d’ancrage facilitent cette tâche en permettant aux utilisateurs/utilisatrices d’Aller à/au reste du contenu et de passer directement à la partie qui les intéresse. Cela améliore l’expérience de l’utilisateur et vous aide à gagner de nouveaux clients/lecteurs.

Les liens d’ancrage sont également très utiles pour le référencement de WordPress. Google peut afficher plusieurs liens d’ancrage dans les résultats de recherche en tant que lien de saut.

Jump to links in search results

Il a été prouvé que cela augmente le taux de clics dans les résultats de recherche, ce qui a pour effet d’accroître le trafic vers votre site.

Si vous créez une table des matières à l’aide de liens d’ancrage, Google peut alors afficher les titres dans les extraits mis en avant.

Featured snippet preview

Dans cette optique, nous allons voir comment ajouter facilement des liens d’ancrage dans WordPress.

Vous trouverez ci-dessous une liste de tous les sujets que nous aborderons dans ce guide. Cliquez sur l’un des liens ci-dessous pour accéder à la section correspondante :

Plongeons dans l’aventure !

Si vous souhaitez simplement ajouter quelques liens d’ancrage ou de signets dans votre article, vous pouvez facilement le faire manuellement.

En principe, vous devez ajouter deux éléments pour qu’un texte d’ancrage fonctionne comme prévu :

  1. Créez un lien d’ancrage avec un signe # avant le texte d’ancrage.
  2. Ajoutez l’attribut ID au texte dans lequel vous souhaitez que l’utilisateur soit pris en charge.

Nous commencerons par les liens d’ancrage.

Étape par étape. Création d’un Link d’ancrage

Tout d’abord, vous devez modifier ou créer une nouvelle publication ou page. Sélectionné ensuite le texte que vous souhaitez lier, puis cliquez sur le bouton insérer un lien dans l’éditeur de blocs de WordPress.

Select text and click link button

La fenêtre surgissante “Insérer un lien” apparaît, dans laquelle vous ajoutez généralement l’URL ou recherchez une publication ou une page à lier.

Cependant, pour un lien d’ancrage, vous utiliserez simplement # comme préfixe au lieu de HTTP. Saisissez ensuite les mots-clés de la section à laquelle vous souhaitez que l’utilisateur accède.

Enter the keyword you want to link

Cliquez ensuite sur le bouton saisir pour créer le lien. Il n’ira nulle part pour l’instant. Vous devrez créer l’ID à l’étape par étape.

Quelques astuces utiles pour choisir le texte à utiliser comme lien d’ancrage # :

  • Utilisez les mots-clés similaires à ceux de la section vers laquelle vous créez un lien.
  • Ne rendez pas votre lien d’ancrage inutilement long ou complexe.
  • Utilisez des traits d’union pour séparer les mots et les rendre plus lisibles.
  • Vous pouvez utiliser des majuscules dans le texte de l’ancre pour le rendre plus lisible. Par exemple : #Best-Coffee-Shops-New-York.

Une fois que vous avez choisi le bon texte de lien, il est temps de l’ancrer à une zone, une section ou un texte de la page que vous souhaitez afficher lorsque les utilisateurs/utilisatrices cliquent sur le lien d’ancrage.

Étape par étape. Ajouter l’attribut ID à la section liée

Dans l’éditeur de contenu, défilez jusqu’à la section vers laquelle vous souhaitez que l’utilisateur navigue lorsqu’il clique sur le lien d’ancrage. En général, il s’agit du Titre d’une nouvelle section.

Sélectionné, il suffit de sélectionner le bloc. Ensuite, dans les Réglages du bloc sur le panneau de gauche, cliquez sur l’onglet “Avancé” pour le déplier.

Enter HTML anchor

Ensuite, vous devez ajouter le même texte que celui que vous avez ajouté comme lien d’ancrage dans le champ “Ancre HTML”.

Confirmez que vous ajoutez le texte sans le préfixe #.

Vous pouvez maintenant enregistrer votre publication et voir votre lien d’ancrage en action en cliquant sur l’onglet de prévisualisation.

Que se passe-t-il si la section que vous souhaitez afficher n’est pas un Titre mais un simple paragraphe ou tout autre bloc ?

Dans ce cas, vous devez cliquer sur le menu à trois points dans les Réglages du bloc et sélectionner l’option “Modifier en HTML”.

Switching to the HTML View of a Block in the WordPress Block Editor

Cela vous permet de modifier le code HTML de ce bloc particulier. Vous devez sélectionner l’identifié HTML de l’élément vers lequel vous souhaitez pointer. Par exemple, <p> s’il s’agit d’un paragraphe ou <table> s’il s’agit d’un bloc de tableau, etc.

Vous devez maintenant ajouter votre ancre en tant qu’attribut ID de cette identification, comme dans le code suivant :

<p id="best-coffee-shops-manhattan">

Il vous suffit ensuite de cliquer à nouveau sur le bouton “Modifier visuellement”, et votre lien d’ancrage dirigera l’utilisateur vers ce bloc lorsqu’il cliquera dessus.

Comment ajouter manuellement un lien d’ancrage dans l’éditeur/éditrices Classic

Si vous utilisez encore l’ancien éditeur classique de WordPress, voici comment ajouter le lien d’ancrage/lien de saut.

Étape par étape. Créer le lien d’ancrage

Tout d’abord, vous devez modifier ou créer une nouvelle publication ou page. Ensuite, sélectionnez le texte que vous souhaitez modifier en lien d’ancrage et cliquez sur le bouton ” Insérer un lien “.

Add anchor links in Classic Menu

Ensuite, vous devez ajouter votre lien d’ancrage avec un préfixe # suivi du slug que vous voulez utiliser pour le lien.

Étape par étape. Ajouter l’attribut ID à la section liée

L’étape suivante consiste à diriger les navigateurs vers la section que vous souhaitez afficher lorsque les utilisateurs/utilisatrices cliquent sur votre lien d’ancrage.

Pour ce faire, vous devez passer en mode “Texte” dans l’éditeur/éditrices classique. Ensuite, défilez vers le bas jusqu’à la section vers laquelle vous souhaitez créer un lien.

Switch to the text view

Emplacement de l’identifiant HTML que vous souhaitez cibler. Par exemple, <h2>, <h3>, <p>, etc.

Vous devez y ajouter l’attribut ID avec le slug de votre lien d’ancrage sans le préfixe #, comme ceci :

<h2 id="best-coffee-shops-new-york">

Vous pouvez maintenant enregistrer vos modifications et cliquer sur le bouton de Prévisualisation pour voir votre lien d’ancrage en action.

Comment ajouter manuellement des liens d’ancrage en HTML

Si vous avez l’habitude d’écrire en mode texte dans l’ancien éditeur classique de WordPress, voici comment créer manuellement un lien d’ancrage en HTML.

Tout d’abord, vous devez créer le lien d’ancrage avec un préfixe # en utilisant l’identifiant habituel <a href=" “>, comme ceci :

<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>

Ensuite, vous devez défiler jusqu’à la section que vous souhaitez afficher lorsque les utilisateurs/utilisatrices cliquent sur le lien.

En général, cette section est un Titre, mais il peut s’agir de n’importe quel autre élément HTML ou même d’une simple balise <p> de paragraphe.

Vous devez ajouter l’attribut ID à la Balise HTML et ensuite ajouter le slug du lien d’ancrage sans le préfixe #.

<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre site pour tester le lien d’ancrage.

La meilleure façon d’ajouter automatiquement des liens d’ancrage dans WordPress est d’utiliser l’extension All in One SEO (AIOSEO). Cette méthode convient aux utilisateurs/utilisatrices qui publient régulièrement des articles de long formulaire et qui ont besoin de créer une table des matières avec des liens d’ancrage.

AIOSEO est la meilleure extension SEO pour WordPress, et elle est livrée avec un bloc WordPress intégré pour ajouter une table des matières.

Nous sommes nous-mêmes de grands fans, et nous avons fait confiance à AIOSEO pour diverses tâches SEO, y compris la gestion des sitemaps XML, les Réglages OpenGraph pour Facebook et X, les méta descriptions, et les balises de titre. Voir notre Avis AIOSEO pour plus de détails.

AIOSEO's homepage

Pour ce tutoriel, nous utiliserons la version gratuite AIOSEO Lite car elle inclut le bloc de table des matières. Il existe également une version AIOSEO Pro qui comprend plus de fonctionnalités avant de vous aider à mieux vous classer dans les moteurs de recherche.

La première chose à faire est d’installer et d’activer l’extension AIOSEO Lite. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous verrez apparaître l’assistant de configuration. Cliquez simplement sur le bouton “Premiers pas” et suivez les instructions à l’écran.

Click let's get started AIOSEO setup wizard

Pour plus de détails, veuillez consulter notre guide sur la façon de configurer All in One SEO pour WordPress.

Ensuite, vous pouvez créer ou modifier une nouvelle publication ou page dans laquelle vous souhaitez ajouter des liens d’ancrage. Une fois que vous êtes dans l’éditeur de contenu, il vous suffit de cliquer sur le bouton ” + ” et d’ajouter le bloc ” AIOSEO – Table des matières “.

Add an AIOSEO Table of Contents Block to the Post or Page

L’extension détectera automatiquement les différents titres de votre page et les affichera dans la table des matières.

Vous pouvez personnaliser davantage chaque lien d’ancrage dans le bloc. Par exemple, le panneau de configuration de droite offre l’option de modifier le “style de liste”, en remplaçant les puces par des nombres.

Customizing Your Table of Contents

De plus, vous pouvez renommer les titres, trier afin de les commander dans le bloc de la table des matières et masquer des titres spécifiques.

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre article. L’extension affichera automatiquement une liste de liens d’ancrage comme votre table des matières.

Your Table of Contents is a List of Links to Headings in the Post or Page

Pour des instructions plus détaillées, consultez notre article sur l ‘ajout d’une table des matières dans WordPress.

Astuce bonus : Combiner les liens d’ancrage avec les liens internes pour un meilleur référencement

Alors que les liens d’ancrage aident les utilisateurs à naviguer dans une page unique, les liens internes les emmènent vers d’autres publications ou pages similaires sur votre site. Ensemble, ces stratégies peuvent créer une expérience de navigation transparente et stimuler votre référencement WordPress.

Les liens internes aident les moteurs de recherche comme Google à explorer votre site, à découvrir de nouveaux contenus et à classer vos pages. Les pages vers lesquelles pointent davantage de liens sont souvent mieux classées dans les résultats de recherche.

Add a link to a post

En utilisant les liens internes de manière stratégique, vous pouvez guider les internautes vers vos pages les plus importantes et générer davantage de trafic.

Ajouté à cela, l’ajout de liens d’ancrage rend votre contenu plus simple/simple d’utilisation, tandis que les liens internes encouragent les lecteurs à explorer davantage. Ensemble, ils maintiennent l’intérêt des internautes, augmentent le nombre de pages vues et réduisent votre taux de rebond – autant d’éléments qui contribuent à une meilleure expérience utilisateur et à un meilleur référencement.

Pour en savoir plus, consultez notre guide ultime sur les liens internes pour le référencement.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des liens d’ancrage dans WordPress. Vous pouvez également consulter nos astuces sur la façon d’optimiser correctement vos publications de blog pour le référencement et notre sélection des meilleures extensions de balisage de schéma.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

47 commentairesLaisser une réponse

  1. Jiří Vaněk

    Can I ask, I have several items in the menu where a link with # at the end is set. It’s like this on purpose. I will give an example. In the menu there is an item price list with # which leads nowhere. Only after hovering the mouse will the menu expand, which leads to individual price lists. Google search console is bothered by this practice, because the link does not lead anywhere. Can it be solved somehow?

    • WPBeginner Support

      For that you could look to create a pricing page that links to the subpages in your menu.

      Administrateur

      • Jiří Vaněk

        That is, instead of #, which leads nowhere, create at least some informative page with some text. Ok, that sounds like a very good yet simple and quick solution. Thanks. I didn’t expect my solution to bother Google as an inactive link.

  2. Pavlína Radochová

    Hello, thank you for the post.
    I would like to ask you for help: how can I make a html anchor to the page title?

    • WPBeginner Support

      Most page titles should be at the top of the page so unless your theme is placing it elsewhere you should be able to link directly to a page to achieve what you’re wanting without needing an anchor link.

      Administrateur

  3. Ahmed Abo Rwash

    Hello, Dears
    I need your help as I made one item from my navigation menu as anchor link, and it works with me only on my home page, but if I browse any other page and try to click this item in the navigation menu, to transfer me to the same area at the home page it’s didn’t work so how can I fix that

    • WPBeginner Support

      If you want the anchor link to work on other pages then you would want to ensure your menu link has the entire URL from https to the end and that should solve this issue.

      Administrateur

  4. Bushra Muzaffar

    Helpful… the new block editor in WordPress has ‘advanced’ tab in the right hand side bar

    • WPBeginner Support

      Glad you found our article helpful!

      Administrateur

  5. Jennifer

    Thank you!! Worked perfectly :)

    • WPBeginner Support

      Glad our guide was helpful!

      Administrateur

  6. Jo

    Not working for me – trying to link to a sidebar widget from another page and this is driving me up the wall

    • WPBeginner Support

      For that issue, when the link is on another page then you would need to put the entire URL for the other page including the #anchor at the end for it to work.

      Administrateur

  7. Chalvonia Bock

    Thank you. after a long struggle and searching for help I got it right after following these instructions.

    • WPBeginner Support

      Glack our guide was helpful :)

      Administrateur

  8. Stephen Muiruri

    Very useful article. I am intending to include lengthier content to my blog and anchor links will make navigation and usability more efficient. Thank you very much.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrateur

  9. Nico

    What an awesome, comprehensive article, thanks!

    • WPBeginner Support

      Glad you found our guide helpful :)

      Administrateur

  10. Megan

    How do I add an Anchor link from a button to a heading on the same page please?

    • WPBeginner Support

      You may need to use the manual method from this guide for that.

      Administrateur

  11. Rohit Mehta

    Huge help, thank you!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrateur

  12. Robert

    Good presentation. I recommend however to suggest a HOME button at the end of each internally linked paragraph.

    • WPBeginner Support

      That is a personal preference but thank you for sharing your recommendation :)

      Administrateur

  13. maddy schafer

    Super helpful, thank you. Enabled me to code anchor links easily.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrateur

  14. Francesco

    HI . The post is very good. How can i create the link from page to another page with anchor? I would like to create the link to another specific part of page.

    • WPBeginner Support

      You would link to the page with the anchor links on it and add the # with the id to the end of the url

      Administrateur

  15. Sameer

    Hi, thank you for this tutorial.
    I have a question please. On my homepage I have a few anchors such as about me and contact me. These anchors are on my menu header (using WordPress header).
    The issue I’m having is on the mobile website, on the home page the user opens the menu and will select and anchor which basically scrolls down on the same page, but the menu bar remains open.
    How do I get the menu bar to collapse on click of an anchor?
    Thanks.

    • WPBeginner Support

      You would want to reach out to the support for your current theme for ensuring the menu closes properly.

      Administrateur

  16. Don Johnson

    Where does it say anywhere how to get to the content editor?

    • WPBeginner Support

      You would be able to edit your content when creating or editing a post or page

      Administrateur

  17. NanPad

    I have three anchor links at the top of my page. Once the viewer has clicked on anchor link #1 — and been taken to the place on the page where the link points–, how does the viewer get back to the top, in order to click on anchor links #2 and #3?

    • WPBeginner Support

      That would require custom JavaScript or a plugin to add that to your site.

      Administrateur

    • WPBeginner Support

      Thank you :)

      Administrateur

  18. Diane

    This does NOT seem to address the option of linking from one page to an anchor in another page. Is that possible in WordPress?

    • WPBeginner Support

      You can use this guide and then use the anchor link for a specific section on a page anywhere on the web.

      Administrateur

  19. John

    Pretty good article but you left out the step needed to place anchor on a DIFFERENT page! Very important.

    • WPBeginner Support

      You can follow these steps and even if the link is on a different page it should still work.

      Administrateur

  20. Okila Jaames

    Thank you guys, for this post. I am learning every day since I found this platform.

    • WPBeginner Support

      You’re welcome, glad you found our content helpful :)

      Administrateur

  21. Sheila

    What are these blocks that you speak of? Couldn’t follow this tutorial.

    • WPBeginner Support

      For this tutorial, we are using the Gutenberg/block editor. From the sound of your question, you are likely using the classic editor.

      Administrateur

  22. Amos Struck

    very useful info. It would be good if you can also explain using a video

    • WPBeginner Support

      We will look into creating a video as we are able :)

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.