{"id":368507,"date":"2022-12-04T15:42:00","date_gmt":"2022-12-04T12:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368507"},"modified":"2022-10-13T01:26:14","modified_gmt":"2022-10-12T22:26:14","slug":"comment-creer-un-bouton-de-retour-en-haut-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-bouton-de-retour-en-haut-dans-wordpress\/","title":{"rendered":"Comment cr\u00e9er un bouton de retour en haut dans WordPress"},"content":{"rendered":"\n<p>Avez-vous pr\u00e9vu de rendre votre site Web plus accessible \u00e0 vos visiteurs? Ajouter un bouton de retour en haut \u00e0 votre blog WordPress peut faire l&rsquo;affaire. Cela est particuli\u00e8rement vrai si votre blog n\u00e9cessite beaucoup de d\u00e9filement lors de la visualisation du contenu.<\/p>\n<p>Dans ce didacticiel, nous allons vous montrer comment vous pouvez installer le bouton de retour en haut sur votre blog avec deux plugins diff\u00e9rents &#8211; <strong><a href=\"#WPFront\">WPFront Scroll Top<\/a><\/strong> et le plugin <strong><a href=\"#GP\">GP Back To Top<\/a><\/strong>. Le premier contient de nombreuses options pour une personnalisation compl\u00e8te du plugin, tandis que l&rsquo;autre est plus simple \u00e0 utiliser.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/_AKk-JG8E2Q\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Qu&rsquo;est-ce qu&rsquo;un bouton Retour en haut\u00a0?<\/h2>\n<p>Essentiellement, le bouton de retour en haut se pr\u00e9sente le plus souvent sous la <strong>forme d&rsquo;une fl\u00e8che ou d&rsquo;un texte qui appara\u00eet au bas<\/strong> du texte lorsque l&rsquo;utilisateur fait d\u00e9filer une page. Cliquer sur ce bouton <strong>ram\u00e8ne l&rsquo;utilisateur au d\u00e9but de la page<\/strong>. Cela peut \u00eatre particuli\u00e8rement utile pour ceux qui pr\u00e9f\u00e8rent naviguer sur des sites Web sur leur t\u00e9l\u00e9phone mobile. De nombreuses personnes utilisent un menu collant pour faciliter la navigation sur le site Web, mais un bouton de retour en haut peut \u00eatre une fonctionnalit\u00e9 suppl\u00e9mentaire qui aidera davantage <strong>vos lecteurs lorsqu&rsquo;ils parcourent votre page<\/strong>.<\/p>\n<p>En mati\u00e8re de style, ce bouton doit \u00eatre suffisamment visible pour attirer l&rsquo;attention du visiteur. N\u00e9anmoins, il ne faut pas non plus qu&rsquo;il soit trop grand ou trop accentu\u00e9, afin de ne pas trop distraire les utilisateurs. Un bon exemple de ce \u00e0 quoi ce bouton devrait ressembler sur un site Web peut \u00eatre vu sur le <a href=\"http:\/\/dalia.elated-themes.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mod\u00e8le Dalia WordPress<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6080e5756.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6080e5756.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<h2>Installation du bouton de retour en haut avec le plugin WPFront Scroll Top<\/h2>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608411f33.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608411f33.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Une fois install\u00e9, vous pourrez trouver le plugin dans l&rsquo;onglet Param\u00e8tres de votre tableau de bord sous le nom Scroll Top.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6087886a0.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e6087886a0.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Pour l&rsquo;activer, assurez-vous de cocher la case Activer avant de faire quoi que ce soit d&rsquo;autre. Ensuite, vous pouvez d\u00e9finir <strong>Scroll Offset<\/strong>, c&rsquo;est-\u00e0-dire <strong>le<\/strong> <strong>nombre de pixels avant l&rsquo;apparition du bouton.<\/strong> Vous pouvez \u00e9galement ajuster les <strong>dimensions que vous souhaitez que votre bouton ait<\/strong>.<\/p>\n<p><strong>L&rsquo;opacit\u00e9 du bouton<\/strong> est \u00e9galement une excellente option qui vous permet de <strong>rendre le bouton plus lumineux lorsqu&rsquo;il n&rsquo;est pas actif<\/strong>. Cela lui donne un bel effet d&rsquo;animation.<\/p>\n<p>Lorsque vous cochez l&rsquo; option <strong>Masquer automatiquement<\/strong> et tapez le nombre de secondes dans la case <strong>Masquer automatiquement apr\u00e8s<\/strong>, votre <strong>bouton dispara\u00eetra apr\u00e8s le temps d&rsquo;inactivit\u00e9 que vous avez sp\u00e9cifi\u00e9 et r\u00e9appara\u00eetra lorsque vous d\u00e9placerez \u00e0 nouveau le curseur de votre souris<\/strong>.<\/p>\n<p>Le plugin WPFront Scroll Top permet \u00e9galement aux utilisateurs d&rsquo; <strong>ajuster la position des boutons<\/strong>, et <strong>contient m\u00eame des options pour les petits appareils<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608a3b5ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608a3b5ee.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Si vous pr\u00e9f\u00e9rez, vous pouvez configurer le bouton Retour en haut pour qu&rsquo;il <strong>n&rsquo;apparaisse que sur les pages que vous avez sp\u00e9cifi\u00e9es<\/strong>. Pour ce faire, s\u00e9lectionnez simplement <strong>Inclure dans les pages suivantes<\/strong> et cochez toutes les cases des pages sur lesquelles vous souhaitez afficher votre bouton.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608e46ae3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e608e46ae3.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Le plugin WPFront Scroll Top est \u00e9galement livr\u00e9 avec un <strong>grand nombre d&rsquo;images que vous pouvez choisir pour ajuster le style<\/strong> de votre bouton en fonction du th\u00e8me de votre site Web. Si aucune des images de cette liste ne vous convient, <strong>vous pouvez \u00e9galement en choisir une vous-m\u00eame<\/strong>. Pour ce faire, vous devez d&rsquo;abord ajouter l&rsquo;image \u00e0 la m\u00e9diath\u00e8que pour qu&rsquo;elle apparaisse dans la liste des boutons d&rsquo;image disponibles. Une autre option consiste \u00e0 ajouter votre image en ins\u00e9rant une URL personnalis\u00e9e.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60928236c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60928236c.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Lorsque vous configurez toutes les options du plug-in et s\u00e9lectionnez le bouton Image, assurez-vous de cliquer sur Enregistrer les modifications.<\/p>\n<h2>Utilisation du plugin GP Back To Top<\/h2>\n<p>Si vous n&rsquo;\u00eates pas un fan des plugins qui ont d&rsquo;innombrables param\u00e8tres et que vous pr\u00e9f\u00e9rez une <strong>approche plus simpliste mais directe<\/strong>, alors <a href=\"https:\/\/wordpress.org\/plugins\/gp-back-to-top\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GB Back To Top Plugin<\/a> est fait pour vous.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609662683.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609662683.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Lors de son installation, vous pouvez y acc\u00e9der en allant dans Param\u00e8tres &gt; GP Back To Top dans votre tableau de bord.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609a7c1fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609a7c1fc.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Comme nous l&rsquo;avons d\u00e9j\u00e0 soulign\u00e9, les param\u00e8tres de GP Plugin sont <strong>faciles \u00e0 utiliser<\/strong>. Mais le plus important, le plugin lui-m\u00eame fonctionne tr\u00e8s bien. Seuls les param\u00e8tres vous permettent de <strong>r\u00e9gler des options telles que la taille du bouton, la taille de la police et la couleur d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609f4aa1f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e609f4aa1f.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p>Une fois que vous avez impl\u00e9ment\u00e9 le bouton de retour en haut dans votre page avec ce plugin, voici \u00e0 quoi il ressemblera\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60a3860c5.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-328483-633e60a3860c5.jpg\" alt=\"Comment cr\u00e9er un bouton de retour en haut dans WordPress\" ><\/a><\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avez-vous pr\u00e9vu de rendre votre site Web plus accessible \u00e0 vos visiteurs ? L&rsquo;ajout d&rsquo;un bouton de retour en haut \u00e0 votre blog WordPress peut faire l&rsquo;affaire.<\/p>\n","protected":false},"author":1,"featured_media":328617,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-368507","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\/368507","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=368507"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/368507\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/328617"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=368507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=368507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=368507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}