Voulez-vous ajouter des notes de bas de page à vos publications de blog WordPress ?
Si vous rédigez un article qui fait référence à des recherches ou qui contient beaucoup d’informations complexes, vous pouvez utiliser des notes de bas de page dans votre contenu. Il s’agit de petites marques numérotées dans un texte qui fournissent un contexte supplémentaire à une phrase ou à un paragraphe.
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 Add footnotes in WordPress blog posts](https://www.wpbeginner.com/wp-content/uploads/2021/08/add-footnotes-in-WordPress-blog-posts-OG-1.png)
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 Example of a footnote in McKinsey's website](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-mckinsey-example-min.png)
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.
L’éditeur WordPress.org dispose désormais d’une fonctionnalité intégrée de notes de bas de page que vous pouvez facilement utiliser pour ajouter du contexte.
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 : ajouter des notes de bas de page WordPress avec l’éditeur Gutenberg.
Cette méthode convient mieux aux personnes qui souhaitent utiliser des notes de bas de page simples et qui ne veulent pas installer une extension à cet effet.
Pour utiliser le bloc WordPress Footnotes, vous devrez ouvrir l’éditeur de blocs Gutenberg pour une nouvelle publication ou une page existante.
Il vous suffit ensuite 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 Adding a footnote to a text in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-down-arrow-min.png)
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, la typographie, les dimensions et la bordure du bloc à l’aide des Réglages du panneau de droite.
![Customizing the footnotes block in the WordPress block editor Customizing the footnotes block in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-min.png)
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 Example of the footnote made in WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/hyperlinked-footnote-min.png)
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 An example of the footnote content at the bottom of the page, made using WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-list-min.png)
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 : Ajouter des notes de bas de page WordPress avec une extension
Une autre méthode de création de 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.
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 Selecting a Desktop footnote behavior using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/desktop-footnote-behavior-min.png)
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 Modern Footnote plugin's footnote display settings](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-display-new-min.png)
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 Saving changes in the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-save-min.png)
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 An example of how to add a footnote shortcode using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-shortcode-min.png)
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 Clicking the Add a Footnote button from the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-add-footnote-method-min.png)
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 What the Modern Footnotes tooltip looks like](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-hover-min.png)
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 What the expandable footnote formatting looks like using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/modern-footnote-expandable-min.png)
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 The footnote content at the bottom of the page, made with the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-content-bottom-min-1.png)
Astuce bonus : Utiliser les champs personnalisés de WordPress pour ajouter plus d’informations à votre contenu
Outre les notes de bas de page, une autre façon de fournir des informations supplémentaires dans vos publications et pages WordPress est d’utiliser des champs personnalisés.
Les champs personnalisés de WordPress sont des métadonnées utilisées pour insérer des informations supplémentaires dans une publication ou une page. Par exemple, si vous gérez un blog avec plusieurs auteurs/autrices, vous souhaiterez peut-être afficher les noms de vos contributeurs/contributrices sur la publication du blog, et pas seulement le vôtre.
Si vous êtes intéressé par les champs personnalisés, il vous suffit de consulter notre guide WordPress des champs personnalisés 101.
Nous allons vous montrer comment ajouter des champs personnalisés à l’aide de l’éditeur de blocs et de certaines extensions, notamment WPCode. Cette extension offre un moyen sûr et facile d’ajouter des extraits de code à votre site WordPress, même si vous êtes débutant.
![WPCode - Best WordPress Code Snippets Plugin WPCode - Best WordPress Code Snippets Plugin](https://www.wpbeginner.com/wp-content/uploads/2015/10/wpcode.jpg)
Nous espérons que cet article vous a aidé à apprendre comment ajouter des notes de bas de page sur votre site WordPress. Vous pouvez également jeter un coup d’œil à nos choix d’experts pour les meilleures extensions de typographie WordPress et à notre guide sur la façon d’afficher et de masquer le texte dans les publications WordPress avec l’effet de permutation.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
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.
THANKGOD JONATHAN says
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 says
They are the same editor, it just has two different names![:)](https://www.wpbeginner.com/fr/wp-content/plugins/classic-smilies/img/icon_smile.gif)
Administrateur
samarth says
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 says
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
Ciprian says
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.
WPBeginner Support says
For nofollowing links, you would want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/how-to-add-nofollow-links-in-wordpress/
Administrateur
Didier Van Bogget says
Work fine ! Really simple. Thank you.
David says
Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?
Editorial Staff says
Are you using WordPress.com or self-hosted WordPress.org?
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrateur
Hank says
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?
Editorial Staff says
It sounds like a CSS issue in your theme which causing this.
Administrateur
Hank DeBey says
I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.
Evan Lowry says
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.
Evan Lowry says
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…
Editorial Staff says
Did you try contacting the author?
Administrateur
Kiesha Michelle says
Thanks for this!! I was trying to figure out how to add footnotes….![:)](https://www.wpbeginner.com/fr/wp-content/plugins/classic-smilies/img/icon_smile.gif)
fatihtoprak says
Great plugin thanks for that.
retlkpr says
Now that is one I did not know about. Thanks! It works great.