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


A votre avis, quels plugins WordPress utilisent les grands blogueurs ? J’ai décidé d’aller mener ma petite enquête afin de vous proposer une nouvelle série d’articles, « Plugins de blogueurs ». Ce sera l’occasion, à chaque fois, de découvrir une extension WordPress avec un tutoriel détaillé.

Et aujourd’hui, on commence avec un chouette plugin repéré chez Madame Oreille : WPFront Notification Bar. Il permet de créer sur votre site un bandeau d’information en haut ou en bas de page afin d’y afficher les informations de votre choix.

WPFront Notification Bar sur le blog de Madame Oreille

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

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 « All plugins » permet de consulter la liste des plugins proposés par le même développeur. Le sous-menu « Notification Bar » 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 « Enabled ». Vous pouvez ensuite choisir s’il s’affiche en haut (Top) ou en bas (Bottom) de votre site.

WPFront Notification Bar - Options

Les options :

  • Fixed at 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.
  • Display on Scroll – Le bandeau s’affichera lorsque l’utilisateur scrollera sur la page.
  • Scroll Offset – 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.
  • Bar Height – C’est la hauteur de votre bandeau d’information. A titre d’exemple, le joli bandeau repéré chez Madame Oreille fait 28 pixels de hauteur.
  • Position Offset – 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.
  • Display After – 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.
  • Animation Duration – Quand le bandeau s’affiche au bout d’un certain temps, cette option permet de définir sa vitesse d’apparition.
  • Display Close Button – 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.
  • Auto Close After – Permet de faire disparaître le bandeau au bout du temps défini ici.
  • Display Shadow – Permet d’afficher une ombre derrière le bandeau.
  • Display Reopen Button – 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
  • Keep Closed – 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).
  • Keep Closed For – 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 « Message text », 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 « Process Shortcode ».

Mettre du texte dans un bandeau WordPress

Comme l’a fait Aurélie du blog Madame Oreille, il est possible d’insérer un bouton « Like » Facebook à cet endroit sans aucun problème.

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 « Open URL in new tab/window » pour que le lien s’ouvre dans un nouvel onglet et la case « No follow link » si votre lien est sponsorisé.

Bouton cliquable dans la barre d'information

Vous pouvez aussi choisir d’exécuter du code Javascript quand on clique sur le bouton.

Si vous souhaitez que le bandeau d’information se ferme une fois que la personne a cliqué sur le bouton, cochez la case « Close Bar on Button Click ».

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 (Start Date & Time) et de fin d’affichage (End Date & Time) : 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 (« Only in landing page ») par exemple. Vous pouvez aussi décider de l’afficher uniquement pour les visiteurs non inscrits sur votre site (« Guest users ») ou, à l’inverse, pour les membres (« All logged in users »).

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

  • Bar Color – Couleur de fond du bandeau : choisissez une seule couleur pour un effet uni, deux couleurs différentes pour créer un dégradé.
  • Message Text Color : la couleur du texte de votre message affiché dans le bandeau.
  • Button Color : la couleur de fond du bouton cliquable si vous en proposez un.
  • Button Text Color : la couleur du texte du bouton cliquable.
  • Reopen Button Color : la couleur de la flèche qui permet de rouvrir le bandeau en cas de fermeture.
  • Close Button Color : 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.

WPFront Notification Bar, un plugin polyvalent

Le plugin WPFront Notification Bar est une solution vraiment complète pour afficher un joli bandeau 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. D’autres idées ? Partagez-les dans les commentaires !

Vous pouvez aussi consulter la liste de mes plugins WordPress incontournables. Et on se retrouve bientôt pour de nouveaux Plugins de Blogueurs !

Thèmes : WordPress 

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 Lou 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.