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



Vous avez besoin de créer un bandeau d’information sur votre site WordPress, 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.

Créer un bandeau sur WordPress peut par exemple être utile pour…

  • Afficher à vos lecteurs des avertissements ;
  • Mettre en avant une information utile (ex : un entrepreneur qui souhaite prévenir l’internaute qu’il est en vacances et expédiera les commandes de sa boutique en ligne à son retour) ;
  • Afficher un message promotionnel ;
  • Valoriser vos réseaux sociaux ;
  • Informer d’une maintenance à venir ;
  • Promouvoir un événement ;
  • Partager un code promo pendant une période déterminée ;
  • Collecter des adresses e-mail pour une newsletter ;

Installer le plugin de bandeau 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 un nouveau sous-menu Réglages > Barre de notification, qui permet de choisir les paramètres du plugin de bandeau WPFront Notification Bar, c’est ce qui va nous intéresser.


Afficher un bandeau sur WordPress avec le plugin

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 disposez également d’une case « Preview mode », qui permet de prévisualiser le rendu du bandeau sur WordPress sans pour autant l’afficher à tous les visiteurs du site (dans ce cas, ne cochez pas « Activé », sinon la barre s’affichera aussi aux visiteurs). Il suffit de cliquer sur le lien indiqué pour accéder à une page où vous pouvez prévisualiser votre bandeau

Quant à la case « Debug Mode », elle est destinée à ceux qui sont à l’aise avec le code : elle permet de visualiser les notifications techniques et éventuels messages d’erreur dans la console du navigateur.

Vous pouvez ensuite choisir si le bandeau 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 mais vous pouvez si besoin définir votre propre image, en sélectionnant une icône dans la bibliothèque de médias WordPress dans le champ « Reopen Button Image URL ».
    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.
  • Keep Closed Cookie Name – Le plugin utilise des cookies pour garder en mémoire le fait qu’un visiteur ait fermé le bandeau, ce afin de pouvoir calculer ensuite quand le réafficher. Vous pouvez ici intervenir sur ce cookie.
  • Hide on Small Devices – Cocher cette case permettra de cacher le bandeau sur tous les appareils dont la taille d’écran est inférieure à la valeur définie au niveau de la ligne « Small Device Max Width ».
  • Hide on Small Window – Même principe, mais cette fois-ci le critère n’est pas la taille de l’écran de l’appareil mais la taille de la fenêtre. En-dessous de la valeur définie dans « Small Window Max Width », le bandeau sera caché.
  • Attach on Shutdown – Une option un peu mystérieuse, à vrai dire, dont le créateur du plugin indique qu’elle doit être activée en dernier recours s’il y a des problèmes d’affichage du bandeau sur WordPress.

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 choisir les attributs du lien. Par défaut, il est recommandé que les liens externes aient l’attribut « noopener », il est coché par défaut. Vous pouvez aussi choisir « noreferrer » (je vous conseille mon article sur les attributs de liens pour en savoir plus) ou « nofollow » (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.

Comment créer un bandeau défilant sur WordPress ?

On m’a posé plusieurs fois la question suivante : est-il possible de créer un bandeau défilant sur WordPress, ou d’utiliser WPFront Notification Bar pour faire défiler le texte de la barre d’information ?

La réponse est oui, en ayant recours aux animations CSS.

Etape 1 – Personnalisez votre message

Dans le champ « Texte du message » du plugin de bandeau WordPress, vous allez écrire votre notification… mais vous allez l’entourer de deux bouts de code qui nous permettront ensuite de personnaliser son apparence.

<div class="ntscrolling"><span>Votre texte</span></div>

Ce qui donne ceci :

Texte défilant sur WordPress
Texte défilant sur WordPress

Etape 2 – Animez le texte

Dans le champ « CSS Personnalisé » en bas des réglages, vous allez ajouter du code de mise en forme qui va permettre au texte de s’animer.

.ntscrolling {overflow:hidden;}

div.ntscrolling span {position:absolute;width:100%;height:100%;line-height:0;transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);-moz-animation: ntscrolling 25s linear infinite;-webkit-animation: ntscrolling 25s linear infinite;animation:ntscrolling 25s linear infinite;}
@keyframes ntscrolling{0%{transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);}100%{transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);}}
@-moz-keyframes ntscrolling{0%{-moz-transform: translateX(100%);}100%{-moz-transform: translateX(-100%);}}
@-webkit-keyframes ntscrolling{0%{-webkit-transform:translateX(100%);}100%{-webkit-transform:translateX(-100%);}}

Votre bandeau devrait ressembler à ça :

Bandeau défilant sur WordPress
Bandeau défilant sur WordPress

Le paramètre « 20s » définit la vitesse de défilement du texte du bandeau (à diminuer pour un défilement plus rapide, à augmenter pour un défilement plus lent). Le défilement est paramétré pour être infini (« infinite »). On demande au texte de se déplacer horizontalement (translateX).

Gardez tout de même en tête que le texte défilant est un peu « passé de mode », il faut y recourir avec parcimonie !


Un plugin polyvalent pour une barre de notification utile

Le plugin WPFront Notification Bar est une solution vraiment complète pour afficher un bandeau sur WordPress. Comme je l’évoquais en intro, il peut vous être utile dans plein de situations : promouvoir quelque chose, diffuser des informations utiles, etc.

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

WPFront Notification Bar permet plutôt d’afficher des informations.

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

Poster un commentaire

Votre adresse e-mail 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.

31 commentaires sur “Créer un bandeau d’information sur WordPress avec WPFront Notification Bar

  • stephane

    Bonjour,
    Merdi pour les conseils très claires. Comment peut-on agrandir le bandeau et la taille de la police
    cordialement

    Répondre à stephane
  • Alex

    Bonjour bonjour,
    merci pour le tuto. J’aimerais que le texte présent dans ce bandeau défile. Comment faire? est-ce simple? faut il créer/ajouter du CSS?
    Merci à vous :D

    Répondre à Alex
    • Marlène

      Bonjour Alex, si je dois être franche ça ne se fait plus :) Pour plein de raisons (accessibilité, compatibilité mobile, etc). Il existait bien une balise HTML pour ça, « marquee » (cf les explications ici), à placer autour du texte, elle fonctionne toujours sur certains navigateurs mais son usage est désormais déconseillé.

      Répondre à Marlène
  • NADINE

    j’ai téléchargé le plugin WPFront Notification Bar mais je ne le vois pas sur le site

    Répondre à NADINE
    • Marlène

      Bonjour Nadine, est-il activé ? Est-il bien configuré ? Qu’avez-vous mis à l’intérieur de votre bandeau (texte, code) ?

      Répondre à Marlène
  • bard

    Bonjour,
    très intéressant, notamment pour les réseaux sociaux. Après il faut voir si sa ne fait pas doublons si on a un pop up newsletter. :)

    Répondre à bard
    • Marlène

      C’est le risque, avec tout ce qu’on doit afficher maintenant (sans compter le bandeau cookies/RGPD) !

      Répondre à Marlène
  • Chloé

    Bonjour,
    J’ai installé un bandeau rpomotionnel sur la page d’accueil du site BeesApps comme indiqué ci-dessus mais lorsque je fais « enregistrer » et que je vide les caches, le bandeau n’apparait pas dans la page de mon choix…. Il apparait seulement sur WP. J’ai pourtant sélectionné la bonne page, tous les utilisateurs, etc. Je ne comprends pas.
    Merci d’avance, Chloé.

    Répondre à Chloé
    • Marlène

      Hello Chloé, sur quelles pages est-il censé apparaître ? Et que veux-tu dire par « Il apparaît seulement sur WP » ? Car d’après ce que je vois, ton site comme ton blog sont construits avec WordPress… et je vois le bandeau partout.

      Répondre à Marlène
    • Mélanie

      Bonjour,
      Merci pour votre article, j’ai également fait un bandeau pour annoncer une nouveauté sur le site mais j’ai le même problème que Chloé. Dans la page de configuration de la barre, le bandeau est effectivement visible mais lorsque je vais sur le site je ne le vois pas (ni sur mobile, ni sur PC). J’ai pourtant mis toutes les pages, tous les utilisateurs.

      Répondre à Mélanie
    • Marlène

      Bonjour, le bouton Affichage > « Activé » est bien coché ? As-tu essayé de créer le bandeau sans aucun paramètre particulier à part l’option « Activé » et le contenu du bandeau ? Ça permet a minima de voir si ça fonctionne sans aucune option.

      Sans accès aux paramètres, je ne peux pas aider davantage donc il faut se tourner vers le forum de support du plugin.

      Répondre à Marlène
  • bernard

    Bonjour Marlène, effectivement je trouve ce plugin plein de ressources, c’est pourquoi je m’acharne un peu. Il ne s’affiche que lorsque je suis connecté. J’ai pourtant vider le cache du site et du navigateur, rien n’y fait. Incompatible avec Mesmerize ou un plugin ?

    Répondre à bernard
    • Marlène

      Bonjour, je vois bien le bandeau d’information pour ma part donc le problème doit être résolu j’imagine !

      Répondre à Marlène
  • Joël

    Bonjour Madame,
    le plugin WPFront est très bien.
    Petite remarque : Je ne peux pas régler la hauteur de la barre de notifications pour les navigateurs Chrome, Internet Exploreur, Edge ? voir mon site microstationservices.fr.
    De même la hauteur des lettres ne doit pas être trop grande sinon elles sont coupées en hauteur !
    Avez-vous une solution ?
    Merci d’avance pour ce que vous ferez, Joël Mouhsine

    Répondre à Joël
    • Marlène

      Hello Joël, je ne peux pas faute de temps regarder le code de chaque site web, c’est sans doute une histoire de CSS à personnaliser par rapport à votre thème (on peut ajouter du code CSS personnalisé dans les réglages de WPFront pour modifier l’apparence de la barre de notification).

      Répondre à Marlène
  • Pascale

    Bonjour,
    Merci pour ces infos. Je trouve ce petit plugin très pratique. En revanche, je n’arrive pas à supprimer l’ombrage du texte du bouton qui ne convient pas au design de mon site. J’ai ajouté dans le CSS personnalisé :

    #wp-front-notification-bar { text-shadow : none ; }

    mais rien n’y fait. Avez-vous une idée ?

    Merci !

    Répondre à Pascale
    • Marlène

      Bonjour Pascale, de quel bouton s’agit-il ? Un call-to-action, le bouton de fermeture de la barre ? Car il y a une option « Afficher l’ombre » qui peut être décochée pour le bouton de fermeture. Quant à l’autre bouton, je n’ai aucune ombre par défaut chez moi donc elle est peut-être créée par un autre élément de votre thème…

      Répondre à Marlène
  • 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.