{"id":26001,"date":"2021-06-17T15:23:00","date_gmt":"2021-06-17T12:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26001"},"modified":"2021-10-18T02:03:31","modified_gmt":"2021-10-17T23:03:31","slug":"comment-ajouter-des-boutons-collants-sur-le-site-web-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-des-boutons-collants-sur-le-site-web-wordpress\/","title":{"rendered":"Comment ajouter des boutons collants sur le site Web WordPress"},"content":{"rendered":"<p>Vous souhaitez ajouter des boutons collants \u00e0 votre site WordPress? En utilisant des boutons d&rsquo;action persistants, l&rsquo;utilisateur peut facilement obtenir des informations relatives au site Web. Ces informations peuvent \u00eatre votre adresse e-mail, votre num\u00e9ro de t\u00e9l\u00e9phone, votre localisation sur une carte Google, des liens vers des r\u00e9seaux sociaux, etc. Dans cet article, je vais vous montrer comment ajouter des boutons collants \u00e0 votre site WordPress.<\/p>\n<p>Les boutons d&rsquo;action collants agiront comme un widget flottant. Ces boutons se verrouillent m\u00eame si l&rsquo;utilisateur fait d\u00e9filer vers le haut ou vers le bas. Il aura fi\u00e8re allure sur le site Web et le rendra plus convivial. L&rsquo;ajout de boutons persistants permet d&rsquo;am\u00e9liorer les conversions et l&rsquo;engagement des visiteurs.<\/p>\n<h3>D\u00e9but<\/h3>\n<p>Il existe 2 fa\u00e7ons d&rsquo;ajouter des boutons collants dans WordPress. Une fa\u00e7on est de cr\u00e9er le code \u00e0 partir de z\u00e9ro et l&rsquo;autre est d&rsquo;utiliser un plugin. Pour ce tutoriel, je vais utiliser un plugin. La raison est \u00e9vidente, si nous pouvons obtenir un bon plugin qui peut faire notre petite t\u00e2che, alors pourquoi perdre du temps \u00e0 le construire \u00e0 partir de z\u00e9ro.<\/p>\n<p>Il est logique de coder si vous souhaitez cr\u00e9er des fonctionnalit\u00e9s volumineuses et complexes. Dans de tels cas, les plugins peuvent ne pas convenir \u00e0 votre objectif et il est pr\u00e9f\u00e9rable de ne pas s&rsquo;y fier car leurs mises \u00e0 jour peuvent endommager les fonctionnalit\u00e9s. Mais pour les petites t\u00e2ches comme celle-ci (boutons collants), vous pouvez compter sur des plugins.<\/p>\n<p><strong>WP Sticky<\/strong> est l&rsquo;un des plugins les plus efficaces pour ajouter des \u00e9l\u00e9ments collants \u00e0 votre site Web. C&rsquo;est un petit plugin sympa qui vous permet d&rsquo;ajouter <strong>un nombre illimit\u00e9 d&rsquo;\u00e9l\u00e9ments collants<\/strong>, compatible avec tous les th\u00e8mes, plugins et constructeurs de pages, et toute la proc\u00e9dure peut \u00eatre effectu\u00e9e en quelques minutes. Il met l&rsquo;accent sur la simplicit\u00e9 du processus, de sorte que l&rsquo;ensemble de la proc\u00e9dure consiste \u00e0\u00a0:<\/p>\n<ul>\n<li>Nommez votre \u00e9l\u00e9ment<\/li>\n<li>D\u00e9placez et cliquez sur le bouton S\u00e9lectionner un \u00e9l\u00e9ment<\/li>\n<li>S\u00e9lection de l&rsquo;\u00e9l\u00e9ment souhait\u00e9 que vous souhaitez rendre collant<\/li>\n<li>En cliquant sur &quot;Enregistrer les modifications&quot;<\/li>\n<\/ul>\n<p>Et c&rsquo;est \u00e0 peu pr\u00e8s tout &#8211; l&rsquo;\u00e9l\u00e9ment s\u00e9lectionn\u00e9 est maintenant attach\u00e9 \u00e0 votre site. Il y a pas mal de <strong>param\u00e8tres<\/strong> inclus, vous pouvez donc jouer avec l&rsquo;opacit\u00e9 de l&rsquo;\u00e9l\u00e9ment collant, choisir un effet Fade-in ou Slide down, d\u00e9finir la plage de d\u00e9filement, etc. De plus, vous pouvez d\u00e9finir diff\u00e9rentes pr\u00e9f\u00e9rences selon les exigences de votre site Web id\u00e9alement &#8211; vous pouvez ajouter une restriction bas\u00e9e sur un crit\u00e8re sp\u00e9cifique, ce qui signifie que l&rsquo;\u00e9l\u00e9ment n&rsquo;appara\u00eetra pas comme collant sur celui s\u00e9lectionn\u00e9\u00a0:<\/p>\n<ul>\n<li>Pages<\/li>\n<li>Des postes<\/li>\n<li>Cat\u00e9gories<\/li>\n<li>Mots cl\u00e9s:<\/li>\n<li>Ou types de messages<\/li>\n<\/ul>\n<p>Bien s\u00fbr, vous pouvez le modifier partout ou l&#8217;emp\u00eacher sur l&rsquo;un des \u00e9l\u00e9ments mentionn\u00e9s pour obtenir un contr\u00f4le total sur le plugin. Vous vous inqui\u00e9tez de la fa\u00e7on dont ils s&rsquo;afficheront sur diff\u00e9rents appareils\u00a0? Cela peut \u00e9galement \u00eatre configur\u00e9 dans l&rsquo;onglet Appareils, o\u00f9 vous pouvez choisir la taille exacte de l&rsquo;\u00e9cran sur lequel vos \u00e9l\u00e9ments appara\u00eetront comme collants. Vous pouvez choisir presque n&rsquo;importe quel \u00e9l\u00e9ment que vous aimez, que ce soit un en- <a href=\"https:\/\/wpsticky.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00eate<\/a> collant, un menu collant, un widget, une navigation, une vid\u00e9o&#8230; tout peut \u00eatre configur\u00e9 en quelques minutes et vous pouvez en cr\u00e9er autant que vous le souhaitez. Efficace, \u00e9l\u00e9gant et aussi simple que possible.<\/p>\n<p>De plus, il existe d&rsquo;autres outils pour vous aider \u00e0 cr\u00e9er des \u00e9l\u00e9ments collants sur votre site. En m\u00eame temps, installez et activez le <a href=\"https:\/\/wordpress.org\/plugins\/buttonizer-multifunctional-button\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plugin Smart Floating Action Buttons &#8211; Buttonizer<\/a>. Dans la section suivante, nous verrons comment utiliser ce plugin.<\/p>\n<h3>Ajoutez des boutons collants \u00e0 votre site WordPress<\/h3>\n<p>Apr\u00e8s avoir install\u00e9 le plugin, allez dans le menu &quot;Buttonizer&quot; dans le panneau de configuration. Ce plugin n&rsquo;a pas de page de param\u00e8tres backend. Au lieu de cela, il fournit une interface pour que vous puissiez voir imm\u00e9diatement l&rsquo;impact des modifications.<\/p>\n<p>Le plugin fournit plus de 25 actions au clic. Disons \u00e0 partir d&rsquo;une liste que vous souhaitez ajouter un e-mail, un t\u00e9l\u00e9phone et Google Map \u00e0 vos boutons collants sur un site Web.<\/p>\n<p>Cliquez sur le bouton Ajouter et nommez le bouton. Je donne au bouton le nom &quot;T\u00e9l\u00e9phone&quot;. Apr\u00e8s cela, vous verrez un bouton dans le front-end, comme indiqu\u00e9 ci-dessous.<\/p>\n<p>Puisque ce bouton est pour un &quot;num\u00e9ro de t\u00e9l\u00e9phone&quot;, nous devons le configurer. Cliquez sur l&rsquo;ic\u00f4ne Param\u00e8tres \u00e0 c\u00f4t\u00e9 de T\u00c9L\u00c9PHONE. Le panneau d&rsquo;options pour personnaliser le bouton s&rsquo;ouvrira.<\/p>\n<p>Dans la liste d\u00e9roulante Action du bouton, s\u00e9lectionnez Action d&rsquo;appel (num\u00e9ro de t\u00e9l\u00e9phone). Ajoutez votre num\u00e9ro de t\u00e9l\u00e9phone dans la zone de texte.<\/p>\n<p>Ensuite, je veux d\u00e9finir une ic\u00f4ne de t\u00e9l\u00e9phone pour ce bouton. Cela peut \u00eatre fait \u00e0 partir des sections <strong>STYLE &gt;&gt; ICON<\/strong>. Sous l&rsquo;ic\u00f4ne ICNE, cliquez sur S\u00c9LECTIONNER L&rsquo;ICNE, une fen\u00eatre contextuelle s&rsquo;ouvrira dans laquelle vous s\u00e9lectionnerez une ic\u00f4ne dans la biblioth\u00e8que Font Awesome.<\/p>\n<p>En suivant le m\u00eame processus, nous pouvons ajouter autant de boutons au site. Pour chaque bouton, s\u00e9lectionnez l&rsquo;action de bouton correspondante et vous obtiendrez diff\u00e9rentes options pour le bouton.<\/p>\n<p>Enfin, nous voulons d\u00e9finir la position des boutons collants. Pour ce faire, cliquez sur l&rsquo;ic\u00f4ne &quot;Param\u00e8tres&quot; \u00e0 c\u00f4t\u00e9 de &quot;NOUVEAU GROUPE&quot;.<\/p>\n<p>Dans la section Position, vous pouvez obtenir les param\u00e8tres de r\u00e9glage de la position des boutons. Je veux qu&rsquo;il soit droit et centr\u00e9. Donc, j&rsquo;ai mis &quot;0%&quot; sous &quot;HORIZONTAL&quot; et la partie centrale sous &quot;VERTICAL&quot;.<\/p>\n<p>Les plugins Buttonizer offrent de nombreuses autres fonctionnalit\u00e9s avec lesquelles vous devriez jouer et vous familiariser avec. Le plugin fournit des options pour la couleur des boutons, l&rsquo;animation des boutons, l&rsquo;arri\u00e8re-plan, les classes personnalis\u00e9es, la visibilit\u00e9 des appareils, etc.<\/p>\n<p>Une fois les param\u00e8tres ci-dessus appliqu\u00e9s, les boutons collants appara\u00eetront sur le site Web, comme indiqu\u00e9 dans la capture d&rsquo;\u00e9cran ci-dessous.<\/p>\n<p>J&rsquo;esp\u00e8re que vous avez d\u00e9couvert l&rsquo;ajout de boutons collants \u00e0 votre site WordPress. S&rsquo;il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n<h4>Articles Li\u00e9s<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/foogallery-un-magnifique-plugin-de-galerie-d-images-wordpress\/\" title=\"FooGallery - magnifique plugin de galerie d&#039;images WordPress\">FooGallery &#8211; magnifique plugin de galerie d&rsquo;images WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-developper-vos-abonnes-par-e-mail-sur-le-site-web-wordpress\/\" title=\"Comment augmenter vos abonn\u00e9s email sur votre site WordPress\">Comment augmenter vos abonn\u00e9s email sur votre site WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-du-code-apres-la-balise-body-dans-wordpress\/\" title=\"Comment ajouter du code apr\u00e8s la balise body dans WordPress\">Comment ajouter du code apr\u00e8s la balise body dans WordPress<\/a><\/li>\n<\/ul>\n<p>Source d&rsquo;enregistrement: <a href=\"https:\/\/artisansweb.net\/add-sticky-buttons-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">artisansweb.net<\/a><\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, je vous montre comment ajouter des boutons collants sur le site WordPress. Les boutons collants sont utiles pour la conversion et l&rsquo;interaction<\/p>\n","protected":false},"author":1,"featured_media":21615,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[497,608],"tags":[844],"class_list":["post-26001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel2-4","category-uncategorized-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/26001","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=26001"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/26001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/21615"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=26001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=26001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=26001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}