Créer un bandeau d’information sur son blog avec WPFront Notification Bar


Vous avez besoin de créer un bandeau d’information sur votre site, en haut ou en bas de page, afin d’y afficher les informations de votre choix ? Le plugin que je vais vous présenter dans cet article, WPFront Notification Bar, permet justement de le faire.

Installer WPFront Notification Bar

Il suffit d’aller dans le menu Extensions > Ajouter de WordPress et de chercher le nom du plugin. Cliquez ensuite sur Installer maintenant.

Installer WPFront Notification Bar
Installer WPFront Notification Bar

Une fois le plugin activé, vous verrez apparaître dans le menu de gauche de votre blog un nouvel élément, « WP Front », avec deux sous-menus.

Le sous-menu « Toutes les extensions » permet de consulter la liste des plugins proposés par le même développeur. Le sous-menu « Barre de notification » permet quant à lui de paramétrer le plugin WPFront Notification Bar, c’est ce qui va nous intéresser.

Afficher un bandeau d’information sur WordPress

Le plugin, en dépit de sa simplicité, propose de nombreuses options pour une personnalisation à la fois simple et poussée.

Affichage du bandeau d’information

Pour activer l’affichage du bandeau, cochez simplement la case « Activé ». Vous pouvez ensuite choisir s’il s’affiche en haut ou en bas de votre site.

WPFront Notification Bar - Options
WPFront Notification Bar – Options

Les options :

  • Fixée sur la position – En cochant cette case, le bandeau WordPress aura une position fixe, c’est-à-dire qu’il restera toujours à la même place quand le visiteur scrollera pour lire le contenu.
  • Afficher au défilement – Le bandeau s’affichera lorsque l’utilisateur scrollera sur la page.
  • Décalage de défilement – C’est la hauteur en pixels à partir de laquelle le bandeau va s’afficher quand le visiteur scrolle. Si vous mettez 100 pixels par exemple, le bandeau s’affichera à partir du moment où le visiteur est descendu de 100 pixels sur la page.
  • Hauteur de la barre – C’est la hauteur de votre bandeau d’information.
  • Décalage de position – Sur certains thèmes WordPress, quand le bandeau est tout en haut de la page, il ne s’affiche pas entièrement. Entrer une valeur en pixels ici permettra de le décaler un peu vers le bas.
  • Afficher après – Temps au bout duquel le bandeau d’information apparaît (en secondes). Mettez 0 pour qu’il s’affiche dès l’ouverture de la page.
  • Durée de l’animation – Quand le bandeau s’affiche au bout d’un certain temps, cette option permet de définir sa vitesse d’apparition.
  • Afficher le bouton de fermeture – En cochant cette case, WPFront Notification Bar affiche une petite croix en haut du bandeau pour que le visiteur puisse le faire disparaître s’il le souhaite.
  • Fermeture auto après – Permet de faire disparaître le bandeau au bout du temps défini ici.
  • Afficher l’ombre – Permet d’afficher une ombre derrière le bandeau.
  • Afficher le bouton de réouverture – Si vous permettez à vos visiteurs de faire disparaître le bandeau, le plugin peut vous afficher un bouton afin de le rouvrir en cas de besoin. Il se présente sous forme de flèche.
    Bandeau d'information WordPress
  • Garder fermée – Si vous cochez cette case, la barre d’information restera cachée sur toutes les pages une fois que le visiteur a indiqué qu’il souhaitait la fermer (sinon, elle se ferme juste sur la page consultée mais réapparaît lorsque l’internaute passe à une autre page).
  • Garder fermée pour – Définissez un nombre de jours pendant lequel les internautes ne verront plus le bandeau réapparaître s’ils l’ont fermé. Par exemple, si vous mettez « 30 » et qu’un visiteur ferme le bandeau, son choix sera mémorisé pendant 30 jours, période suite à laquelle le bandeau réapparaîtra.

Contenu du bandeau d’information

C’est ici que vous pouvez définir le contenu à afficher dans votre bandeau : texte, liens vers vos réseaux sociaux et j’en passe ! Il suffit de renseigner le champ « Texte du message », vous pouvez y indiquer aussi bien du texte que du code HTML… et même des raccourcis (shortcodes). Pour que les raccourcis fonctionnent, il faut juste cocher la case « Traiter le code court ».

Mettre du texte dans un bandeau WordPress
Mettre du texte dans un bandeau WordPress

Aurélie, qui tient le blog Madame Oreille, utilisait ce type de bandeau pour insérer des liens vers ses réseaux sociaux, notamment avec un bouton « Like » Facebook.

Le bandeau WordPress sur le site de Madame Oreille
Le bandeau WordPress sur le site de Madame Oreille

Vous pouvez également afficher un bouton cliquable sur la barre. Imaginons par exemple un blogueur qui publie un nouveau livre, il peut tout à fait envisager de placer un bouton « Acheter le livre » dans le bandeau d’information, qui redirige vers Amazon ou vers la librairie en ligne où le livre est vendu.

Cochez la case « Afficher le bouton » pour ce faire, entrez le texte du bouton de votre choix… et choisissez l’action à effectuer lors du clic sur le bouton :

  • Ouvrir une URL précise : vous pouvez ensuite cocher la case « Ouvrir l’URL dans un nouvel onglet / fenêtre » et « Lien no follow » (si votre lien est sponsorisé).
  • Exécuter un code JavaScript, à renseigner dans le champ prévu à cet effet.

Bouton cliquable dans la barre d'information

Si vous souhaitez que le bandeau d’information se ferme une fois que la personne a cliqué sur le bouton, cochez la case « Fermer la barre au clic sur le bouton ».

Filtres avancés

Le plugin vous permet aussi de contrôler de manière encore plus fine l’affichage de votre bandeau d’information.

  • La date et l’horaire de début d’affichage et de fin d’affichage : si vous faites la promotion d’un événement par exemple ou diffusez une offre spéciale, c’est un bon moyen de l’afficher sur une durée limitée.
  • Les pages et les rôles des utilisateurs qui voient le bandeau d’information : par défaut, le bandeau s’affiche sur toutes les pages et pour tous les utilisateurs de votre site WordPress. Mais vous pouvez tout à fait décider de ne l’afficher que sur certaines pages, comme la première page que voient les visiteurs en arrivant sur votre site (« Uniquement dans la page d’atterrissage ») par exemple. Vous pouvez aussi décider de l’afficher uniquement pour les visiteurs non inscrits sur votre site (« Utilisateurs invités ») ou, à l’inverse, pour les membres (« Tous les utilisateurs connectés »).

Créer un joli bandeau d’information

Vous pouvez personnaliser le bandeau d’information aux couleurs de votre site…

Couleur du bandeau d'information sur WordPress
Couleur du bandeau d'information sur WordPress
  • Couleur de la barre – Couleur de fond du bandeau : choisissez une seule couleur pour un effet uni, deux couleurs différentes pour créer un dégradé.
  • Couleur de texte de message : la couleur du texte de votre message affiché dans le bandeau.
  • Couleur du bouton : la couleur de fond du bouton cliquable si vous en proposez un.
  • Couleur de texte de bouton : la couleur du texte du bouton cliquable.
  • Couleur de bouton de réouverture : la couleur de la flèche qui permet de rouvrir le bandeau en cas de fermeture.
  • Couleur de bouton de fermeture : la couleur de la croix permettant de fermer le bandeau.

Enfin, si vous maîtrisez le code CSS, vous pouvez même personnaliser l’affichage du bandeau directement depuis l’interface du plugin, en ajoutant votre propre code CSS.

Un plugin polyvalent pour une barre de notification utile

Le plugin WPFront Notification Bar est une solution vraiment complète pour afficher un joli bandeau d’information sur WordPress. Il peut vous être utile dans plein de situations : faire la promotion de vos réseaux sociaux ou d’un événement particulier, annoncer à vos visiteurs que vous répondrez aux commentaires à votre retour de vacances, prévenir qu’une opération de maintenance légère est en cours…

Vous pouvez aussi l’afficher quand le visiteur a passé plus de 30 secondes sur la page par exemple, pour l’inciter à s’abonner à votre newsletter.

Je sais que certains d’entre vous sont à la recherche d’un bandeau d’information concernant les cookies. Il existe des plugins plus adaptés, comme Cookie Notice ou GDPR Cookie Consent.

WPFront Notification Bar permet plutôt d’afficher des informations ou de mettre en avant vos réseaux sociaux.

D’autres idées ? Partagez-les dans les commentaires !

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

14 commentaires sur “Créer un bandeau d’information sur son blog avec WPFront Notification Bar

  • Violaine

    Bonjour Marlène et merci pour tous tes articles. J’ai déjà installé cette barre… or je ne sais pas pourquoi, une fois qu’on scroll, elle passe sous le menu et on ne peux donc plus cliquer… une idée de réglages à faire ? Merci

    Répondre à Violaine
    • Marlène

      Bonjour Violaine, je pense que tu parles du mobile car sur desktop, je vois bien la barre au-dessus du menu. C’est une barre « flottante », donc elle est par défaut indépendante des éléments qui se trouvent en-dessous. Pour éviter le problème sur mobile, tu pourrais afficher la barre en bas de ta page au lieu de l’afficher en haut.

      Répondre à Marlène
  • Johanna

    Bonjour Marlène,

    Merci pour tes supers articles ! J’ai mis WPFront sur mon site. C’est top quand on le voit sur un PC, mais quand je regarde mon site depuis mon smartphone, c’est pas du tout adapté. As-tu une astuce pour modifier ça ? Peut-être un code à ajouter au « CCS personnalisé » ?
    Merci pour ton aide.

    Répondre à Johanna
    • Marlène

      Hello Johanna, c’est bizarre qu’elle ne soit pas adaptée chez toi car je viens de retester sur l’un de mes sites et la barre créée par le plugin est totalement responsive.

      C’est toi qui as défini une hauteur fixe ? Ton texte est long donc il se met sur plusieurs lignes et comme la barre a une hauteur imposée, elle devient trop petite pour contenir tout le texte. Par défaut le plugin n’a pas de hauteur imposée.

      Répondre à Marlène
  • tania

    Ah super cet article je m étais tjrs demande comment c était possible

    Répondre à tania
    • Marlène

      Il doit exister d’autres plugins mais j’ai trouvé celui-là bien pratique, il y a vraiment beaucoup de paramètres et de possibilités.

      Répondre à Marlène
  • Livresse des Mots

    Ooohh mais il a l’air bien ce petit plugin ! Merci pour la découverte, je file m’amuser avec ! ;)

    Répondre à Livresse
    • Marlène

      Oui on peut vraiment imaginer beaucoup de choses avec :) Bonne journée !

      Répondre à Marlène
    • Livresse des Mots

      C’est bizarre, mon bandeau n’apparaît que quand je connectée à mon back office … :/ Pourtant j’ai bien sélectionné All pages / All users, je ne comprends pas :( Tu aurais une idée ? C’est un peu con s’il n’y a que moi qui le vois ah ah ;)

      Répondre à Livresse
    • Marlène

      Hello, de mon côté je le vois bien :) Parfois c’est juste un problème temporaire de cache (le navigateur ayant mémorisé l’ancienne version de la page, il met un peu de temps à prendre en compte les mises à jour).

      Répondre à Marlène
    • Livresse des Mots

      Ah oui en effet ça fonctionne. Pourtant j’y avais pensé au cache, j’avais tout nettoyé, j’avais essayé en navigation privée et tout, rien n’y faisait. Bon, désolée pour le dérangement et merci pour ta réponse :3

      Répondre à Livresse
  • Maelle

    Hello ! Je te laisse un petit commentaire ici, même si je sois loin d’avoir fini de scruté ton site dans toutes les rubriques qu’il peut avoir, pour te dire MERCI. Ça fait plaisir mais aussi du bien de découvrir des blogs qui aident autant à toujours s’améliorer et à découvrir de nouveau plugins !

    Répondre à Maelle
    • Marlène

      Hello Maelle, merci beaucoup pour ton message et bienvenue ici ! J’espère que le blog t’aidera et sinon, tu peux toujours envoyer un petit mail pour suggérer des sujets. J’essaie de tenir compte des demandes !

      Répondre à Marlène
    • Maelle

      Et bien écoute je finis de regarder ton blog ce soir mais il y a effectivement parfois des choses qui ne sont pas bien expliquées sur internet concernant le blogging. Je n’hésiterais pas à te soumettre mes idées ! :)

      Répondre à Maelle
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.