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.

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.

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".
  
• 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".

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.

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.

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 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 :

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 :

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.