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 des notes de bas de page simples et élégantes dans vos publications de blog WordPress

Avez-vous déjà vu sur un site des petits chiffres en exposant dans le texte qui renvoient à des informations complémentaires en bas de page ? C’est ce qu’on appelle des notes de bas de page, et c’est un excellent moyen de fournir un contexte supplémentaire ou de citer des sources sans encombrer le contenu principal.

Certains de nos lecteurs nous ont demandé comment ajouter des notes de bas de page à leurs publications WordPress, en particulier lorsqu’ils rédigent des contenus à forte teneur en recherche ou des articles qui nécessitent des citations.

Dans cet article, nous allons vous afficher comment ajouter des notes de bas de page simples et élégantes à vos publications de blog WordPress, étape par étape.

Add footnotes in WordPress blog posts

Pourquoi ajouter des notes de bas de page à vos publications de blog WordPress ?

Si vous tenez un blog éducatif, si vous publiez des travaux de recherche ou si vous couvrez des stories, les notes de bas de page sont un excellent moyen de donner plus de contexte à votre contenu. Vous pouvez les utiliser pour commenter, mettre en évidence des faits importants ou insérer des citations de sources académiques sur votre site.

Une note de bas de page apparaît généralement sous la forme d’un petit numéro en exposant dans le corps du texte. Le contenu de la note de bas de page est ensuite placé en bas de page ou apparaît sous forme d’infobulle pour le distinguer du contenu principal.

En voici un exemple :

Example of a footnote in McKinsey's website

En plus d’apporter de la clarté et de la transparence à vos lecteurs, les notes de bas de page peuvent donner à votre site WordPress un aspect plus professionnel et digne de confiance. Elles affichent que vous avez fait des recherches et que vous disposez des sources pour supporter vos affirmations.

Version : l’éditeur WordPress.org dispose d’une mis en avant des notes de bas de page que vous pouvez facilement utiliser pour insérer un contexte supplémentaire. Ainsi, vous n’aurez pas à ajouter manuellement les notes de bas de page.

Ce guide vous affichera comment ajouter des notes de bas de page WordPress à vos publications ou pages de blog en utilisant deux méthodes. L’une consiste à utiliser le bloc Notes de bas de page dans l’éditeur Gutenberg, et l’autre à utiliser une extension.

Vous pouvez utiliser les liens ci-dessous pour passer à une méthode spécifique :

Méthode 1 : Comment ajouter des notes de bas de page dans WordPress sans extension

Cette méthode convient mieux aux personnes qui souhaitent utiliser de simples notes de bas de page dans les publications de blog et qui ne veulent pas installer une extension pour le faire.

Pour utiliser le bloc WordPress Footnotes, vous devrez ouvrir l’éditeur de blocs Gutenberg pour une nouvelle publication ou une publication existante.

Ensuite, vous pouvez commencer à ajouter des blocs de paragraphes, des images et d’autres types de publications à l’article de blog. Vous pouvez même ajouter des capuchons de chute pour styliser votre texte et attirer l’attention des lecteurs.

Il vous suffit maintenant de mettre en surbrillance le mot de votre contenu auquel vous souhaitez ajouter une note de bas de page. Dans la barre d’outils du bloc, cliquez sur la flèche déroulante et sélectionnez « Note de bas de page ».

Adding a footnote to a text in the WordPress block editor

Vous êtes maintenant redirigé vers le bas de la page, où le bloc Notes de bas de page a été ajouté automatiquement. Vous pouvez y saisir vos informations supplémentaires.

En outre, vous pouvez personnaliser la couleur du texte, la typographie, les dimensions et la bordure du bloc à l’aide des Réglages du panneau de droite.

S’il y a des liens dans la note de bas de page, vous pouvez modifier la couleur des liens pour les faire ressortir.

Customizing the footnotes block in the WordPress block editor

N’hésitez pas à répéter cette étape pour inclure autant de notes de bas de page que nécessaire.

Lorsque vous prévisualisez votre site WordPress, un lien de note de bas de page devrait apparaître vers la phrase que vous avez mise en évidence plus tôt.

Example of the footnote made in WordPress

Si vous cliquez sur l’hyperlien, vous accéderez au bas de la page contenant la note de bas de page.

Ici, vous pouvez également cliquer sur la flèche en hyperlien pour revenir à la section où la note de bas de page est assignée.

An example of the footnote content at the bottom of the page, made using WordPress

Vous pouvez également prévisualiser votre site sur mobile pour vous assurer que la note de bas de page est lisible sur les écrans de smartphones.

Bien que cette méthode soit assez simple pour les débutants, elle n’offre pas des tonnes d’options de personnalisation. Si vous cherchez d’autres moyens de modifier l’Apparence des notes de bas de page, passez à la méthode suivante.

Méthode 2 : Comment ajouter des notes de bas de page sur WordPress à l’aide d’une extension

Une autre façon de créer des notes de bas de page consiste à utiliser l’extension gratuite Modern Footnotes. Contrairement au bloc Footnotes, il offre beaucoup plus d’options pour modifier l’apparence des notes de bas de page.

Par exemple, vous pouvez faire apparaître la note de bas de page sous forme d’infobulle, ainsi que des informations supplémentaires en bas de page.

La première chose à faire est d’installer l’extension Modern Footnotes. En savoir plus sur l’installation d’un plugin, consultez notre guide sur l’installation d’un plugin WordPress.

Note : Si vous n’êtes pas sûr de devoir utiliser cette extension, vous pouvez l’installer sur le terrain de jeu temporaire de WordPress et vous amuser avec.

Définir les réglages de l’extension Modern Footnotes

Une fois l’extension définie, vous pouvez aller dans Réglages  » Modern Footnotes« . C’est ici que vous pouvez configurer les paramètres des notes de bas de page selon vos préférences.

Examinons chaque réglage l’un après l’autre.

Comportement de la note de bas de page sur ordinateur de bureau » vous permet de sélectionner le comportement de la note de bas de page lorsque le site est vu sur un ordinateur de bureau.

La note de bas de page peut apparaître lorsqu’un curseur survole l’infobulle ou lorsque l’utilisateur clique sur l’infobulle. La note de bas de page peut également se déplier sous le texte de la note.

Selecting a Desktop footnote behavior using the Modern Footnotes plugin

Le choix de l’une ou l’autre est fonction de vos préférences. Cela dit, la note de bas de page se dépliera sous le texte par défaut sur les écrans mobiles.

En outre, vous pouvez également cocher la case « Faire apparaître le contenu de la note de bas de page dans l’infobulle native du navigateur lorsque le curseur survole le numéro de la note de bas de page » si nécessaire. Cela signifie que la note de bas de page apparaîtra dans l’infobulle du navigateur plutôt que dans celle de l’extension lorsque le curseur survolera le texte.

Nous vous recommandons d’inactif ce Réglage si vous choisissez l’option infobulle pour le comportement de la note de bas de page sur le bureau. Sinon, vous aurez deux infobulles pour la même note de bas de page, ce que les lecteurs peuvent trouver ennuyeux.

Ci-dessous, vous pouvez également choisir d’afficher la liste des notes de bas de page au bas des publications. De cette façon, le Lecteur peut voir toutes les informations complémentaires en un seul endroit.

Vous pouvez également activer cette fonctionnalité lorsque la publication en avant du blog est syndiquée par le biais de flux RSS.

Modern Footnote plugin's footnote display settings

En défilant vers le bas, vous pouvez opter pour l’insertion d’un Titre pour votre liste de notes de bas de page et choisir un identifiant de titre pour celui-ci. Cela aide à séparer le contenu réel de votre publication de blog des notes de bas de page. Vous pouvez écrire quelque chose comme Références, Notes de bas de page, Citations ou Informations complémentaires.

Si vous souhaitez ajouter un CSS personnalisé pour modifier le texte de la note de bas de page, n’hésitez pas à l’insérer dans le champ « Modern Footnote Custom CSS ».

Dernière chose, mais non des moindres, vous pouvez personnaliser le shortcode Modern Footnotes si vous ne souhaitez pas utiliser la version intégrée. Confirmez/saisie du code court sans les crochets.

Une fois que vous êtes satisfait des réglages, cliquez sur « Enregistrer les modifications ».

Saving changes in the Modern Footnotes plugin

Ajout de notes de bas de page à l’aide de l’extension Modern Footnotes

Maintenant que vous avez défini les Réglages des notes de bas de page modernes, nous allons insérer des notes de bas de page dans votre contenu. Ouvrez l’éditeur de blocs d’une nouvelle publication ou d’une page existante.

Il y a deux façons d’ajouter une note de bas de page. La première consiste à utiliser un code court, ce que nous recommandons.

Tout d’abord, trouvez la phrase dans laquelle vous souhaitez insérer une note de bas de page. Ensuite, juste à côté de cette phrase, tapez le code court suivant :

[mfn]Insérez votre note de bas de page ici[/mfn]

Confirmez vous-même que vous avez remplacé le texte entre les crochets par vos informations.

Nous suggérons également de placer le code court dans le même bloc que la phrase, juste à côté du texte, sans espace entre les deux, comme dans l’exemple ci-dessous. Sinon, la note de bas de page peut sembler déconnectée du texte.

An example of how to add a footnote shortcode using the Modern Footnotes plugin

L’autre méthode consiste à taper le texte de la note de bas de page à côté de la phrase à laquelle vous souhaitez l’ajouter. Confirmez-vous qu’il n’y a aucun espace entre le texte de la note de bas de page et la phrase.

Dans l’exemple ci-dessous, nous voulons ajouter une note de bas de page contenant une citation académique pour la phrase qui commence par  » Des études suggèrent…

Ensuite, mettez la note de bas de page en surbrillance et cliquez sur la flèche vers le bas dans la barre d’outils. Sélectionnez ensuite « Ajouter une note de bas de page ».

Clicking the Add a Footnote button from the Modern Footnotes plugin

L’inconvénient de la seconde méthode est qu’il peut être difficile de savoir quelles lignes de texte ont reçu une note de bas de page et lesquelles n’en ont pas reçu lorsque vous modifiez le contenu. C’est pourquoi nous recommandons la méthode du code court.

Lorsque vous prévisualisez la publication du blog, vous verrez qu’il y a maintenant un numéro à côté de la phrase. Si vous utilisez l’option d’infobulle, voici à quoi ressemblera la note de bas de page :

What the Modern Footnotes tooltip looks like

En revanche, la note de bas de page apparaîtra sous le texte si vous utilisez la mise en forme dépliante.

Voici à quoi cela ressemble lorsque vous cliquez sur le numéro :

What the expandable footnote formatting looks like using the Modern Footnotes plugin

Enfin, si vous choisissez d’afficher tout le contenu des notes de bas de page au bas de la publication, vous pouvez défiler vers le bas pour trouver tout ce qui s’y trouve.

Ils devraient se trouver quelque part au-dessus de la section des commentaires.

The footnote content at the bottom of the page, made with the Modern Footnotes plugin

Astuce : Vous souhaitez ajouter un avis de non-responsabilité à la fin de votre publication de blog au lieu d’une note de bas de page ? Consultez notre guide sur l ‘ajout automatique d’une clause de non-responsabilité dans WordPress pour obtenir des instructions étape par étape.

Découvrez d’autres façons de personnaliser votre contenu WordPress

Outre les notes de bas de page, il existe de nombreuses façons de rendre votre contenu WordPress plus intéressant et plus lisible pour les internautes.

Par exemple, vous pouvez ajouter des polices personnalisées à WordPress. De cette façon, vous pouvez créer une typographie qui semble unique et différente des autres concurrents, ce qui rend votre site plus mémorable.

En outre, vous pouvez mettre en évidence certains textes dans vos blocs de texte afin d’attirer l’attention des utilisateurs/utilisatrices sur les informations les plus importantes.

Vous pouvez également afficher une Prévisualisation directe de vos liens internes ou externes lorsque les internautes les survolent au cours de leur navigation dans votre contenu. C’est une façon simple et attrayante de prévisualiser le type de page qu’ils verront s’ils cliquent sur le lien.

Voici d’autres astuces que vous pouvez consulter :

Nous espérons que cet article vous a aidé à apprendre comment ajouter des notes de bas de page à votre site WordPress. Vous pouvez également lire nos choix d’experts pour les meilleurs constructeurs de pages par glisser-déposer pour WordPress et notre guide sur la façon de modifier un site WordPress.

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

19 commentairesLaisser une réponse

  1. Jiří Vaněk

    Sometimes on the site I use excerpts from books or other blogs as opinions about something, and I always added them below the article. But this method is much more elegant, as it adds a small link to the information below the line directly to the excerpt. From the website user’s point of view, it will be a much better way to solve this. Thanks for another one of many inspirations on how to make content more user-friendly.

  2. THANKGOD JONATHAN

    This is really good. But since Gutenberg editor work similar with Block editor, should I just use the block editor or must install the Gutenberg editor again?

    • WPBeginner Support

      They are the same editor, it just has two different names :)

      Administrateur

  3. samarth

    I have a question. Adding Footnotes through the custom (HTML) method will cause in-article wording and would the article length will be increased?

    And, If through the plugin, the words of footnotes won’t be counted as blog post words?

    sorry for any grammatical mistakes.

    • WPBeginner Support

      Both methods would be adding text to your article, we would not recommend either method if you only wanted to increase your word count.

      Administrateur

  4. Ciprian

    Hi,

    Thanks for this info, I`ve tried it and it`s working fine, but now I have a curiosity:

    – the link for this notes are dofollow, from seo point of view, is this ok or we should make them nofollow?

    – if we need them nofollow, how can we do that?

    Thanks a lot.

  5. David

    Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?

  6. Hank

    I added the plugin and tried some footnotes. When I click on the little number that should link to the footnote, it takes me below the comment box on the WordPress page and doesn’t display the footnote. I have to scroll up to see the footnote.

    Does anyone know how I can get it to land on the actual footnote?

      • Hank DeBey

        I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.

    • Evan Lowry

      Does it still do this when you view the page when you are signed out of the Dashboard? For me, when the dashboard menu is up top (when I am signed in), it makes it appear that the FN links are taking me too low–but then when I view the same page logged out, as a reader would, the FNs work properly.

  7. Evan Lowry

    This is a great plugin, but in the version I downloaded for 3.5.1, the footnotes reset after ten, back to zero, in the footer. Does anyone know how to fix this? I just want it to continue: 11, 12, etc…

  8. Kiesha Michelle

    Thanks for this!! I was trying to figure out how to add footnotes…. :)

  9. retlkpr

    Now that is one I did not know about. Thanks!  It works great.

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.