Comment ajouter des notes de bas de page simples et élégantes dans vos articles de blog WordPress

Avez-vous déjà vu des sites web avec de petits numéros en exposant dans le texte qui renvoient à des informations supplémentaires en bas de page ? Ce sont les notes de bas de page, et elles sont un excellent moyen de fournir un contexte supplémentaire ou de citer des sources sans encombrer votre contenu principal.

Certains de nos lecteurs nous ont demandé comment ajouter des notes de bas de page à leurs articles WordPress, en particulier lors de la rédaction de contenu axé sur la recherche ou d'articles nécessitant des citations.

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

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

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

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

Voici un exemple :

En plus d'apporter de la clarté et de la transparence à vos lecteurs, les notes de bas de page peuvent rendre votre site web WordPress plus professionnel et digne de confiance. Elles montrent que vous avez fait vos recherches et que vous avez les sources pour étayer vos affirmations.

Heureusement, l'éditeur de WordPress.org dispose d'une fonctionnalité de note de bas de page intégrée que vous pouvez facilement utiliser pour insérer un contexte supplémentaire. De cette façon, vous n'aurez pas à ajouter manuellement les notes de bas de page vous-même.

Ce guide vous montrera comment ajouter des notes de bas de page WordPress à vos articles de blog ou pages en utilisant deux méthodes. L'une consiste à utiliser le bloc Notes de bas de page dans l'éditeur Gutenberg, et l'autre avec un plugin.

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

• Méthode 1 : Comment ajouter des notes de bas de page dans WordPress sans plugin
• Méthode 2 : Comment ajouter des notes de bas de page WordPress avec un plugin
• Apprenez d'autres façons de personnaliser votre contenu WordPress

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

Cette méthode est idéale pour les personnes qui souhaitent utiliser des notes de bas de page simples dans leurs articles de blog et qui ne veulent pas installer de plugin pour le faire.

Pour utiliser le bloc Notes de bas de page de WordPress, vous devrez ouvrir l'éditeur de blocs Gutenberg pour un article nouveau ou existant.

Après cela, vous pouvez commencer à ajouter des blocs de paragraphe, des images et d'autres types de contenu à l'article de blog. Vous pouvez même ajouter des lettres capitales pour styliser votre texte et attirer l'attention des lecteurs.

Maintenant, sélectionnez simplement un mot dans votre contenu auquel vous souhaitez ajouter la 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 serez maintenant redirigé vers le bas de la page, où le bloc Notes de bas de page a été ajouté automatiquement. Ici, vous pouvez taper vos informations supplémentaires.

De plus, vous pouvez personnaliser la couleur du texte du bloc, la typographie, les dimensions et la bordure à l’aide des paramètres du panneau de droite.

S’il y a des liens dans la note de bas de page, vous voudrez peut-être changer 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, il devrait y avoir un lien de note de bas de page vers la phrase que vous avez mise en surbrillance précédemment.

Si vous cliquez sur le lien hypertexte, vous serez dirigé vers le bas de la page avec la note de bas de page.

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

Vous voudrez peut-être aussi prévisualiser votre site web sur mobile pour vous assurer que la note de bas de page est lisible sur les écrans de smartphone.

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

Méthode 2 : Comment ajouter des notes de bas de page WordPress avec un plugin

Une autre façon de créer des notes de bas de page est d'utiliser le plugin gratuit Modern Footnotes. Contrairement au bloc Notes de bas de page, 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 la page.

La première chose à faire est d'installer le plugin Modern Footnotes. Pour plus d'informations sur l'installation d'un plugin, consultez notre guide sur comment installer un plugin WordPress.

Remarque : Si vous n'êtes pas sûr d'utiliser ce plugin, vous pouvez l'installer sur le WordPress Playground temporaire et l'essayer.

Configuration des paramètres du plugin Modern Footnotes

Une fois le plugin installé, vous pouvez maintenant aller dans Paramètres » Modern Footnotes. C'est ici que vous pouvez configurer les paramètres des notes de bas de page selon vos préférences.

Passons en revue chaque paramètre un par un.

Le « Comportement des notes de bas de page sur ordinateur » vous permet de sélectionner comment la note de bas de page doit se comporter lorsque le site web est consulté sur un ordinateur de bureau.

Vous pouvez faire apparaître la note de bas de page lorsque le curseur survole l'infobulle ou lorsque l'utilisateur clique sur l'infobulle. Alternativement, la note de bas de page peut s'étendre sous le texte annoté.

Le choix vous appartient. Cela dit, la note de bas de page s'étendra 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 Web au survol du numéro de 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 du plugin lorsque le curseur survole le texte.

Nous vous recommandons de désactiver ce paramètre si vous choisissez l'option d'infobulle pour le comportement de la note de bas de page sur ordinateur. Sinon, vous aurez deux infobulles pour la même note de bas de page, ce qui pourrait agacer les lecteurs.

Ci-dessous, vous pouvez également choisir d'afficher la liste des notes de bas de page en bas des articles. De cette façon, le lecteur peut voir toutes les informations supplémentaires en un seul endroit.

Vous voudrez peut-être également activer cette fonctionnalité lorsque l'article de blog est syndiqué via les flux RSS.

En faisant défiler vers le bas, vous pouvez choisir d'insérer un titre pour votre liste de notes de bas de page et choisir une balise de titre pour celui-ci. Cela permet de séparer le contenu réel de votre article 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 supplémentaires.

Si vous souhaitez ajouter du CSS personnalisé pour modifier le texte de la note de bas de page, n'hésitez pas à l'insérer dans la boîte « CSS personnalisé de note de bas de page moderne ».

Enfin, vous pouvez personnaliser le shortcode Modern Footnotes si vous ne souhaitez pas utiliser la version intégrée. Assurez-vous d'entrer le shortcode sans les crochets.

Une fois que vous êtes satisfait des paramètres, cliquez simplement sur « Enregistrer les modifications ».

Ajout de notes de bas de page à l'aide du plugin Modern Footnotes

Maintenant que vous avez configuré les paramètres de Modern Footnotes, insérons quelques notes de bas de page dans votre contenu. Ouvrez l'éditeur de blocs pour un article ou une page nouveau ou existant.

Il existe deux façons d'ajouter une note de bas de page. L'une d'elles est avec un shortcode, ce que nous recommandons.

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

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

Assurez-vous de remplacer le texte entre les crochets par vos informations.

Nous suggérons également de placer le shortcode 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 votre note de bas de page à côté de la phrase à laquelle vous souhaitez l'ajouter. Assurez-vous qu'il n'y a pas d'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 « Les études suggèrent... »

Ensuite, sélectionnez la note de bas de page et cliquez sur le bouton flèche vers le bas dans la barre d'outils. Après cela, sélectionnez « Ajouter une note de bas de page ».

L'inconvénient de la deuxième méthode est qu'il peut être difficile de suivre 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 shortcode.

Lorsque vous prévisualisez le billet de 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 :

D'autre part, la note de bas de page apparaîtra sous le texte si vous utilisez le formatage extensible.

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

Enfin, si vous choisissez d'afficher tout le contenu de la note de bas de page en bas de l'article, vous pouvez faire défiler vers le bas pour tout trouver.

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

Apprenez 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 visiteurs.

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, rendant votre site Web plus mémorable.

De plus, vous pouvez surligner certains textes dans vos blocs de texte pour attirer l'attention des utilisateurs sur les informations les plus importantes.

Une autre chose que vous pouvez faire est d'afficher un aperçu en direct de vos liens internes ou externes lorsque les visiteurs les survolent pendant qu'ils parcourent votre contenu. C'est un moyen facile mais engageant de prévisualiser le type de page qu'ils verront s'ils cliquent sur le lien.

Voici d'autres conseils que vous pouvez consulter :

• Comment mettre en évidence les nouveaux articles pour les visiteurs récurrents dans WordPress
• Comment ajouter du contenu dynamique dans WordPress (Guide pour débutants)
• Comment ajouter un redimensionneur de police dans WordPress pour l'accessibilité
• Comment ajouter le mode sombre à votre site Web WordPress (facile)
• Comment afficher les étiquettes d'informations nutritionnelles dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter des notes de bas de page à votre site Web WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages par glisser-déposer pour WordPress et notre guide sur comment modifier un site Web WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.