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.
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 :
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 ».
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.
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.
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.
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.
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.
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 ».
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.
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 ».
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 :
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 :
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.
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 :
- Comment mettre en évidence les nouvelles publications pour les internautes qui reviennent sur WordPress
- Comment ajouter du contenu dynamique dans WordPress (Guide du débutant)
- Comment ajouter un redimensionnement de police dans WordPress pour l’accessibilité
- Comment ajouter le mode sombre à votre site WordPress (facile)
- Comment afficher les libellés des valeurs nutritionnelles dans WordPress
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.
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.
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
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
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.
WPBeginner Support
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
Work fine ! Really simple. Thank you.
David
Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?
Editorial Staff
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
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
It sounds like a CSS issue in your theme which causing this.
Administrateur
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.
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…
Editorial Staff
Did you try contacting the author?
Administrateur
Kiesha Michelle
Thanks for this!! I was trying to figure out how to add footnotes….
fatihtoprak
Great plugin thanks for that.
retlkpr
Now that is one I did not know about. Thanks! It works great.