{"id":369041,"date":"2023-01-31T12:47:00","date_gmt":"2023-01-31T09:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=369041"},"modified":"2023-01-31T12:56:59","modified_gmt":"2023-01-31T09:56:59","slug":"comment-configurer-une-barre-de-notification-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-configurer-une-barre-de-notification-wordpress\/","title":{"rendered":"Comment configurer une barre de notification WordPress"},"content":{"rendered":"\n

Il existe de nombreux types de messages diff\u00e9rents que vous voudrez peut-\u00eatre faire passer sur votre site Web. Chacun d’eux n\u00e9cessite un canal appropri\u00e9. Les grandes bo\u00eetes pop-up, les banni\u00e8res promotionnelles et autres sont tr\u00e8s pratiques mais peuvent parfois sembler trop insistantes. De plus, les visiteurs du site en obtiennent facilement assez, ce qui peut entra\u00eener des taux de rebond \u00e9lev\u00e9s. Si vous songez \u00e0 un moyen \u00e9l\u00e9gant, discret mais efficace de capter l’attention de vos visiteurs et de faire passer un message<\/strong>, une barre de notification WordPress pourrait \u00eatre exactement ce que vous recherchez.<\/p>\n

Barre de notification – \u00c0 quoi sert-elle<\/h2>\n

La barre de notification peut \u00eatre utilis\u00e9e \u00e0 diverses fins. Cela peut certainement vous aider \u00e0 g\u00e9n\u00e9rer plus de trafic vers des pages d\u00e9di\u00e9es<\/strong>. Vous pouvez l’utiliser pour d\u00e9velopper votre liste de diffusion en proposant un abonnement \u00e0 la newsletter ou en partageant des informations sur l’ensemble du site<\/strong>.<\/p>\n

Cela peut \u00eatre tr\u00e8s b\u00e9n\u00e9fique si, par exemple, vous avez un th\u00e8me WP eCommerce<\/a>. Vous pouvez y afficher les informations d’exp\u00e9dition<\/strong> car c’est le genre d’informations que tous les visiteurs de votre site veulent certainement conna\u00eetre. Vous trouverez \u00e9galement tr\u00e8s pratique d’ annoncer une vente ou un nouveau produit ainsi<\/strong>. Afficher un code promo<\/strong> dans une barre de notification est \u00e9galement une excellente id\u00e9e.<\/p>\n

\"Comment<\/a><\/p>\n

De plus, vous pouvez l’utiliser pour partager vos coordonn\u00e9es<\/strong>. De cette fa\u00e7on, vous am\u00e9liorez la communication avec les visiteurs du site car ils n’ont pas \u00e0 ouvrir une autre page juste pour la trouver. Et si vous ajoutez des ic\u00f4nes sociales dans la barre<\/strong>, c’est une recette \u00e9prouv\u00e9e pour d\u00e9velopper vos connexions aux r\u00e9seaux sociaux.<\/p>\n

\"Comment<\/a><\/p>\n

Tout type de site Web peut b\u00e9n\u00e9ficier d’une barre de notification bien con\u00e7ue. Pensez juste aux possibilit\u00e9s. Vous pouvez l’utiliser comme banni\u00e8re CTA pour inviter les visiteurs du site \u00e0 s’abonner, \u00e0 s’inscrire, \u00e0 cliquer pour t\u00e9l\u00e9charger certains documents, \u00e0 passer une commande sp\u00e9ciale<\/strong>, etc.<\/p>\n

\"Comment<\/a><\/p>\n

Maintenant, si votre th\u00e8me WP n’a pas encore de barre de notification, vous pouvez facilement en configurer une avec l’un des plugins de barre de notification WordPress.<\/p>\n

D\u00e9finir une barre de notification \u00e0 l’aide du plugin de barre de notification WPFront<\/h2>\n

\"Comment<\/a><\/p>\n

WPFront<\/a> est un plugin de barre de notification fiable et pratique. Il est tr\u00e8s populaire parmi les utilisateurs de WordPress gr\u00e2ce \u00e0 sa simplicit\u00e9 et son efficacit\u00e9. Il est assez facile \u00e0 configurer et offre juste ce qu’il faut d’options de personnalisation<\/strong>. Comme il est tr\u00e8s l\u00e9ger, vous pouvez \u00eatre s\u00fbr qu’il ne ralentira pas votre site Web ni n’affectera ses performances de mani\u00e8re n\u00e9gative. Nous allons maintenant vous montrer comment le configurer en quelques \u00e9tapes<\/strong> et cr\u00e9er la barre de notification parfaite pour votre site Web.<\/p>\n

\u00c9TAPE 1\u00a0: Activer le plug-in de barre de notification WPFront<\/h3>\n

Une fois que vous avez install\u00e9 le plugin, cliquez sur Param\u00e8tres puis sur Barre de notification dans le menu d\u00e9roulant.<\/p>\n

\"Comment<\/a><\/p>\n

Cliquer dessus ouvrira tous les param\u00e8tres disponibles pour la barre de notification. La premi\u00e8re chose \u00e0 faire est, logiquement, de cocher la case qui dit Enabled.<\/p>\n

\"Comment<\/a><\/p>\n

Apr\u00e8s avoir activ\u00e9 la barre de notification ici, elle sera visible sur toutes les pages et vous pourrez continuer \u00e0 la personnaliser<\/strong>. Toutes les options de personnalisation sont pr\u00e9sent\u00e9es sur cette page.<\/p>\n

Vous remarquerez que la barre de notification s’affiche sous forme d’aper\u00e7u dans le backend sur la page des param\u00e8tres de la barre de notification<\/strong>, ce qui est tr\u00e8s pratique car vous n’avez pas \u00e0 faire des allers-retours pour v\u00e9rifier \u00e0 quoi elle ressemble sur la page en direct. Vous pouvez voir vos personnalisations en direct et, une fois que vous \u00eates satisfait de ce que vous voyez, cliquez sur Enregistrer.<\/p>\n

\u00c9TAPE 2: D\u00e9finition de la position de la barre de notification<\/h3>\n

\"Comment<\/a><\/p>\n

Ce plugin vous permet de choisir l’emplacement o\u00f9 vous souhaitez afficher votre barre de notification<\/strong> \u2013 cela peut \u00eatre le haut ou le bas de la page<\/strong>. Si vous optez pour la position sup\u00e9rieure, vous pouvez \u00e9galement d\u00e9cider \u00e0 quelle distance du bord sup\u00e9rieur de l’\u00e9cran vous souhaitez que la barre apparaisse<\/strong> en utilisant l’option D\u00e9calage de position. Cependant, cela n’est pas possible pour la position inf\u00e9rieure.<\/p>\n

En ce qui concerne le comportement de la barre, vous pouvez choisir parmi Fixed at Position<\/strong> et Display on Scroll<\/strong>. Si vous choisissez la premi\u00e8re option, la barre ne sera pas influenc\u00e9e par le d\u00e9filement de la page, elle restera toujours \u00e0 la m\u00eame position<\/strong>. Si vous choisissez la deuxi\u00e8me option, la barre s’affichera lorsque vous faites d\u00e9filer la page<\/strong>. Il ne sera pas visible imm\u00e9diatement et, sous D\u00e9calage de d\u00e9filement<\/strong>, vous pouvez choisir apr\u00e8s combien de pixels vous souhaitez qu’il s’affiche<\/strong>. Pour que l’option Afficher sur le d\u00e9filement fonctionne, vous devez d’abord d\u00e9cocher la case Fixe \u00e0 la position<\/strong>\u00a0!<\/p>\n

\u00c9TAPE 3: Personnalisation de la barre de notification<\/h3>\n

\"Comment<\/a><\/p>\n

Vous pouvez rendre votre barre de notification statique ou anim\u00e9e<\/strong>. Vous choisissez cela en d\u00e9finissant la dur\u00e9e de l’animation<\/strong>. Si vous le r\u00e9glez sur 0, l’animation sera d\u00e9sactiv\u00e9e et la barre sera statique<\/strong>. Pour animer la barre, entrez la dur\u00e9e de l’animation<\/strong>. Par exemple, si vous le r\u00e9glez sur 3 secondes, la barre appara\u00eetra progressivement pendant les 3 secondes. L’animation est un bon moyen de mettre en valeur la barre car elle la fait appara\u00eetre progressivement et attire ainsi l’attention sur elle.<\/p>\n

Si vous ne voulez pas que votre barre de notification s’affiche imm\u00e9diatement apr\u00e8s le chargement de la page, il existe l’ option Afficher apr\u00e8s .<\/strong> Il vous permet de d\u00e9finir combien de temps apr\u00e8s le chargement de la page vous voulez que la barre apparaisse<\/strong>.<\/p>\n

L’ option Fermeture automatique apr\u00e8s<\/strong> vous permet de faire dispara\u00eetre la barre apr\u00e8s un certain temps. Si la barre est anim\u00e9e, elle se fermera de la m\u00eame mani\u00e8re qu’elle s’est ouverte – progressivement.<\/p>\n

En ce qui concerne les options que vous pouvez afficher sur la barre de navigation, vous avez le bouton Afficher Fermer qui<\/strong> permet au visiteur de fermer la barre<\/strong>, et le bouton Afficher R\u00e9ouvrir<\/strong> qui donne au visiteur la possibilit\u00e9 de rouvrir la barre si n\u00e9cessaire<\/strong>. Si cette option est d\u00e9sactiv\u00e9e, la barre ne s’affichera pas tant que la page ne sera pas recharg\u00e9e ou ne s’affichera pas du tout si l’option Garder ferm\u00e9<\/strong> est activ\u00e9e. L’option Keep Closed For<\/strong> vous permet de d\u00e9finir le temps apr\u00e8s lequel la barre s’affichera \u00e0 nouveau.<\/p>\n

Pour d\u00e9finir le contenu textuel de la barre<\/strong>, utilisez le champ Texte du message<\/strong> dans lequel vous saisissez le texte que vous souhaitez afficher dans la barre. De plus, vous pouvez le styliser en utilisant HTML. Vous n’avez m\u00eame pas besoin d’\u00eatre particuli\u00e8rement dou\u00e9 en HTML.<\/p>\n

Si, par exemple, vous souhaitez modifier la taille de la police, vous l’ajusterez simplement en saisissant la taille souhait\u00e9e dans le champ Texte du message<\/strong>. Vous ajouterez ce texte dans le champ\u00a0:<\/p>\n

<span style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>.<\/code><\/pre>\n
et la seule chose que vous devriez changer ici est le nombre<\/strong>, qui repr\u00e9sente la taille de la police.<\/p>\n
\"Comment<\/a><\/p>\n
Maintenant, si vous voulez qu’un bouton s’affiche \u00e0 c\u00f4t\u00e9 du texte dans la barre<\/strong>, cochez l’option Afficher le bouton<\/strong>. Entrez ensuite le texte que vous souhaitez voir affich\u00e9 dans le champ Texte du bouton<\/strong>. Quant aux fonctions du bouton, vous pouvez choisir entre les options suivantes :<\/strong><\/p>\n
\"Comment<\/a><\/p>\n
Si vous voulez que la barre cesse de s’afficher apr\u00e8s que le visiteur a cliqu\u00e9 dessus<\/strong>, vous pouvez facilement le d\u00e9finir en cochant l’option Fermer la barre au clic du bouton<\/strong>. Cela a du sens, en particulier si la notification est un bouton CTA. Par exemple, une fois que le visiteur clique sur le bouton S’abonner \u00e0 notre newsletter dans la barre de notification, il est redirig\u00e9 vers la page avec les d\u00e9tails de l’abonnement, et la barre de notification ne s’affiche plus puisque son objectif est accompli.<\/p>\n
Si vous ne voulez pas que votre barre de navigation soit visible par tout le monde tout le temps, vous pouvez utiliser l’une des nombreuses options de filtrage<\/strong>. Vous pouvez d\u00e9finir la dur\u00e9e d’affichage de la barre en d\u00e9finissant les dates dans les champs Date et heure de d\u00e9but et Date et heure de<\/strong> fin .<\/strong> Vous pouvez \u00e9galement s\u00e9lectionner les pages sur lesquelles vous souhaitez que la barre s’affiche<\/strong> en cochant certaines des options du param\u00e8tre Afficher sur les pages<\/strong>.<\/p>\n
\"Comment<\/a><\/p>\n
En ce qui concerne qui peut voir la barre de navigation, vous pouvez la rendre visible uniquement \u00e0 certains utilisateurs en cochant simplement les cases dans le champ Afficher pour les r\u00f4les d’utilisateur<\/strong>.<\/p>\n
\"Comment<\/a><\/p>\n
Conception et couleurs<\/h4>\n
Le plugin offre \u00e9galement des fonctionnalit\u00e9s int\u00e9ressantes pour styliser l’apparence de la barre. Vous pouvez ajuster la hauteur de la barre<\/strong> – en d\u00e9finissant le nombre de pixels. \u00c9tant donn\u00e9 que cette barre doit \u00eatre attrayante mais pas grande<\/strong>, veillez \u00e0 ne pas en faire trop. Une autre fonctionnalit\u00e9 int\u00e9ressante est que vous pouvez ajouter une ombre \u00e0 la barre<\/strong>, en cochant l’ option Afficher l’ombre .<\/strong><\/p>\n
Il est int\u00e9ressant de noter que vous n’avez pas \u00e0 rendre la barre unicolore – vous avez la possibilit\u00e9 de d\u00e9finir deux couleurs et de cr\u00e9er des d\u00e9grad\u00e9s<\/strong>. De plus, vous pouvez d\u00e9finir la couleur du texte et les couleurs de tous les boutons \u00e9galement.<\/strong><\/p>\n
\"Comment<\/a><\/p>\n
Le plugin WPFront Notification Bar vous permet \u00e9galement d’ \u00e9crire du CSS suppl\u00e9mentaire pour ajuster encore plus le style<\/strong>.<\/p>\n
Mentionnons maintenant quelques personnalisations CSS qui sont utilis\u00e9es assez souvent, comme le changement de taille de police, par exemple. Ce qui pourrait vous d\u00e9concerter, c’est que lorsque vous modifiez la taille de la police du texte du message, il peut ne pas \u00eatre align\u00e9 avec le bouton \u00e0 c\u00f4t\u00e9. Cela peut \u00eatre facilement corrig\u00e9. Lorsque vous changez la taille de la police, il est conseill\u00e9 de d\u00e9finir la classe de l’\u00e9l\u00e9ment auquel on va attribuer certaines valeurs<\/strong> :<\/p>\n
<span class=\"text-bar\" style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/code><\/pre>\n
Dans notre exemple, la classe est une barre de texte, vous pouvez faire la m\u00eame chose pour une autre classe.<\/p>\n
Nous le d\u00e9crirons ainsi en CSS\u00a0:<\/p>\n
.text-bar {margin-bottom: 0px;}<\/code><\/pre>\n
De cette fa\u00e7on, nous alignerons le texte et le bouton<\/strong>. Bien s\u00fbr, vous devrez peut-\u00eatre utiliser une valeur diff\u00e9rente. Il est pr\u00e9f\u00e9rable d’ inspecter l’\u00e9l\u00e9ment souhait\u00e9<\/a> pour conna\u00eetre la valeur dont vous avez besoin. Vous pouvez affecter toute autre caract\u00e9ristique \u00e0 la classe en fonction de ce que vous souhaitez modifier.<\/p>\n
Une autre fonctionnalit\u00e9 int\u00e9ressante est que vous pouvez \u00e9galement ajuster l’ombre, qui par d\u00e9faut est assez sombre. Vous pouvez, par exemple, l’ajuster comme ceci et le rendre plus l\u00e9ger :<\/p>\n
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}<\/code><\/pre>\n
Et n’oubliez pas – vous devez cliquer sur Enregistrer apr\u00e8s chaque modification que vous apportez pour qu’elle prenne effet\u00a0!<\/p>\n
En conclusion<\/h2>\n
Lorsqu’elle est utilis\u00e9e correctement, la barre de navigation peut vous apporter de nombreux avantages. N’h\u00e9sitez pas \u00e0 le tester \u00e0 diff\u00e9rentes fins. Nous avons \u00e9num\u00e9r\u00e9 quelques-unes des id\u00e9es pour vous inspirer, mais nous sommes s\u00fbrs que vous pouvez penser \u00e0 de nombreuses autres raisons de l’utiliser. Donnez-lui du style, personnalisez-le et partagez votre exp\u00e9rience avec nous !<\/p>\n
Source d’enregistrement:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
D\u00e9couvrez ce qu’est une barre de notification WordPress et apprenez \u00e0 la configurer rapidement et facilement.<\/p>\n","protected":false},"author":1,"featured_media":363820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-369041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/369041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=369041"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/369041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/363820"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=369041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=369041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=369041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}