{"id":3196,"date":"2025-06-14T06:09:41","date_gmt":"2025-06-14T06:09:41","guid":{"rendered":"https:\/\/wpconsults.com\/?p=3196"},"modified":"2026-06-27T17:19:08","modified_gmt":"2026-06-27T17:19:08","slug":"comment-deplacer-le-badge-recaptcha-v3-vers-la-gauche-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/fr\/how-to-move-recaptcha-v3-badge-to-left-in-wordpress\/","title":{"rendered":"Comment d\u00e9placer le badge ReCAPTCHA V3 vers la gauche dans WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Google reCAPTCHA v3 affiche son petit badge dans le coin inf\u00e9rieur droit de chaque page, et c'est pr\u00e9cis\u00e9ment l\u00e0 que la plupart des widgets de chat en direct, des boutons \u00ab Retour en haut \u00bb et des barres de cookies souhaitent \u00e9galement s'afficher. La bonne nouvelle, c'est que ce badge n'est qu'un \u00e9l\u00e9ment \u00e0 position fixe : il est donc facile de le d\u00e9placer vers la gauche, sans que cela n'affaiblisse en rien la protection contre le spam.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je vais vous montrer deux fa\u00e7ons de <strong>d\u00e9placer le badge reCAPTCHA V3 vers la gauche<\/strong>: un plugin \u00ab sans code \u00bb pour ceux qui souhaitent disposer d'un panneau de configuration, et une modification CSS d'une seule ligne pour ceux qui pr\u00e9f\u00e8rent ne pas installer de plugin suppl\u00e9mentaire. Les deux solutions fonctionnent ; je vais vous dire laquelle j'utilise r\u00e9ellement et pourquoi.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-takeaways is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Principaux enseignements<\/h3>\n<ul class=\"wp-block-list\"><li>Le badge reCAPTCHA v3 est un \u00e9l\u00e9ment \u00e0 position fixe ajout\u00e9 par Google ; le d\u00e9placer ne change en rien la mani\u00e8re dont le syst\u00e8me d'\u00e9valuation de la protection \u00e9value les visiteurs.<\/li><li>Le <strong>BadgeShift pour reCAPTCHA<\/strong> Ce plugin permet de d\u00e9placer le badge vers la gauche depuis un panneau de configuration, sans avoir \u00e0 \u00e9crire de code.<\/li><li>Trois r\u00e8gles CSS de ciblage <code>.grecaptcha-badge<\/code> faire la m\u00eame chose sans installer de plugin, ce qui est la solution que je pr\u00e9f\u00e8re.<\/li><li>Vous ne pouvez masquer le badge que si vous conservez sur la page le texte de mention obligatoire de Google ; si vous le supprimez, vous enfreignez leurs conditions d'utilisation.<\/li><li>Videz votre cache apr\u00e8s avoir effectu\u00e9 la modification, sinon vous aurez l'impression que \u00e7a n'a pas march\u00e9 alors que c'est pourtant le cas.<\/li><\/ul>\n<\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:15px 15px 0px 0px rgba(160, 152, 255, 0.31);}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette1, #3182CE);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Pourquoi le badge se trouve-t-il en bas \u00e0 droite, pour commencer ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsque vous int\u00e9grez reCAPTCHA v3 via un plugin de formulaire tel que Contact Form 7, Fluent Forms ou Gravity Forms, le script de Google ajoute le badge sous la forme d\u2019un <code>position : fixed<\/code> \u00c9l\u00e9ment ancr\u00e9 en bas \u00e0 droite de la fen\u00eatre d'affichage. Comme il ne fait pas partie de votre th\u00e8me, les param\u00e8tres de celui-ci ne peuvent pas l'affecter directement ; vous appliquez un style \u00e0 un \u00e9l\u00e9ment que Google a ajout\u00e9 \u00e0 la page apr\u00e8s son affichage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cet espace fixe en coin est tr\u00e8s encombr\u00e9. Une bulle de chat d'aide, une <a href=\"https:\/\/www.wpconsults.com\/fr\/bouton-de-retour-a-la-page-precedente-2\/\">bouton \u00ab Retour en haut de la page \u00bb ou \u00ab Retour \u00bb<\/a>, ou une barre de r\u00e9duction fixe, vont tous entrer en concurrence avec le badge pour occuper le m\u00eame emplacement ; sur mobile, ce chevauchement peut m\u00eame masquer compl\u00e8tement une zone interactive. D\u00e9placer le badge vers la gauche est g\u00e9n\u00e9ralement la solution la plus simple, car cela permet de le garder visible (ce que souhaite Google) tout en lib\u00e9rant l'espace dont vos autres widgets ont besoin dans le coin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9placez-le \u00e0 l'aide du plugin BadgeShift (sans code)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous pr\u00e9f\u00e9rez ne pas toucher au code, la <a href=\"https:\/\/wordpress.org\/plugins\/badgeshift-for-recaptcha\/\" rel=\"nofollow noopener\" target=\"_blank\">BadgeShift pour reCAPTCHA<\/a> Le plugin g\u00e8re cette migration \u00e0 partir d'un simple \u00e9cran de param\u00e8tres. Il s'agit d'un petit plugin d\u00e9di\u00e9 \u00e0 une seule fonction ; il n'alourdit donc pas votre site comme le ferait un plugin polyvalent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"359\" src=\"https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-1024x359.avif\" alt=\"Installation du plugin BadgeShift for reCAPTCHA pour d\u00e9placer le badge reCAPTCHA V3\" class=\"wp-image-5149\" srcset=\"https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-1024x359.avif 1024w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-300x105.avif 300w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-768x269.avif 768w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-1536x538.avif 1536w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3-18x6.avif 18w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-3.avif 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Depuis votre tableau de bord, rendez-vous sur <strong>Plugins &gt; Ajouter un nouveau<\/strong>, recherchez \u201c BadgeShift for reCAPTCHA \u201d, puis installez-le et activez-le. Une fois qu'il est activ\u00e9, ouvrez <strong>Param\u00e8tres &gt; BadgeShift<\/strong>, s\u00e9lectionnez <strong>\u00c0 gauche<\/strong> dans la section \u00ab Position du badge \u00bb, puis enregistrez. Si vous souhaitez le d\u00e9caler l\u00e9g\u00e8rement, les champs de d\u00e9calage horizontal et vertical vous permettent de d\u00e9finir la distance exacte par rapport aux bords inf\u00e9rieur et gauche.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"361\" src=\"https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-1.avif\" alt=\"Panneau de param\u00e8tres de BadgeShift configur\u00e9 pour d\u00e9placer le badge reCAPTCHA V3 vers la gauche\" class=\"wp-image-5147\" srcset=\"https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-1.avif 796w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-1-300x136.avif 300w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-1-768x348.avif 768w, https:\/\/www.wpconsults.com\/wp-content\/uploads\/2025\/06\/image-1-18x8.avif 18w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Et voil\u00e0, le tour est jou\u00e9. Le badge appara\u00eet d\u00e9sormais dans le coin inf\u00e9rieur gauche, et vous n\u2019avez m\u00eame pas eu besoin d\u2019ouvrir un \u00e9diteur de code. Pour la plupart des utilisateurs qui n\u2019ont besoin que de cette seule modification, le plugin est franchement le choix le plus s\u00fbr, car les param\u00e8tres sont conserv\u00e9s m\u00eame en cas de changement de th\u00e8me et vous ne risquez pas de vous tromper en saisissant un s\u00e9lecteur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9placez-le \u00e0 l'aide d'un seul bloc CSS (c'est ce que j'utilise moi-m\u00eame)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous savez comment coller quelques lignes de CSS, vous n'avez pas besoin d'un plugin. Ajoutez ceci \u00e0 <strong>Apparence &gt; Personnaliser &gt; CSS suppl\u00e9mentaire<\/strong>, ou dans la feuille de style de votre th\u00e8me enfant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grecaptcha-badge {\n    left: 4px !important;\n    right: auto !important;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Le <code>\u00e0 droite : auto<\/code> La ligne a autant d'importance que le <code>gauche<\/code> d'une part, parce que Google positionne le badge \u00e0 droite par d\u00e9faut ; si vous ne configurez que <code>gauche<\/code> sans publier <code>droit<\/code>, le badge peut se retrouver \u00e9tir\u00e9 sur toute la largeur de l'\u00e9cran. Le <code>!important<\/code> Ces indicateurs sont pr\u00e9sents car les styles int\u00e9gr\u00e9s de Google sont sp\u00e9cifiques, et sans eux, votre r\u00e8gle est discr\u00e8tement ignor\u00e9e. Il s'agit du m\u00eame type de remplacement cibl\u00e9 que j'utilise lorsque je <a href=\"https:\/\/www.wpconsults.com\/fr\/personnaliser-manuellement-la-page-de-connexion-de-wordpress-2\/\">personnaliser manuellement une page de connexion WordPress<\/a>, lorsque vous appliquez une mise en forme \u00e0 du code HTML dont vous n'avez pas le contr\u00f4le.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je privil\u00e9gie l'approche CSS sur les sites de mes clients, car cela fait un plugin de moins \u00e0 mettre \u00e0 jour, \u00e0 auditer et dont il faut se soucier, et je n'aurai plus jamais besoin d'un panneau de configuration pour modifier la position du badge. Si un site utilise d\u00e9j\u00e0 un plugin de formulaires ou de s\u00e9curit\u00e9 proposant une option de position du badge, je m'en sers simplement au lieu d'ajouter quoi que ce soit de nouveau.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ne vaudrait-il pas mieux masquer le badge plut\u00f4t que de le d\u00e9placer ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C\u2019est l\u00e0 que les gens s\u2019attirent des ennuis. Les conditions d\u2019utilisation de Google vous autorisent certes \u00e0 masquer le badge, mais uniquement si vous ajoutez une mention claire d\u2019attribution partout o\u00f9 reCAPTCHA est utilis\u00e9, par exemple : \u201c Ce site est prot\u00e9g\u00e9 par reCAPTCHA ; la Politique de confidentialit\u00e9 et les Conditions d\u2019utilisation de Google s\u2019appliquent \u201d, avec les deux liens actifs. La r\u00e8gle officielle est pr\u00e9cis\u00e9e dans <a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed\" rel=\"nofollow noopener\" target=\"_blank\">Foire aux questions sur reCAPTCHA de Google<\/a>, et \u00e7a vaut le coup de le lire avant de cacher quoi que ce soit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez vraiment le supprimer plut\u00f4t que de simplement le d\u00e9placer, j'explique la marche \u00e0 suivre conforme \u00e0 la r\u00e9glementation dans mon guide sur <a href=\"https:\/\/www.wpconsults.com\/fr\/cacher-le-badge-recaptcha\/\">Masquer le badge reCAPTCHA sur un site WordPress<\/a>. Pour la plupart des sites, cependant, le d\u00e9placer vers la gauche vous permet d'obtenir le coin \u00e9pur\u00e9 que vous souhaitiez sans avoir \u00e0 vous soucier des mentions d'attribution ; c'est pourquoi je consid\u00e8re le masquage comme un dernier recours, et non comme la premi\u00e8re solution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le badge ne bouge toujours pas ? V\u00e9rifiez ces points<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Neuf fois sur dix, c'est un probl\u00e8me de mise en cache. Si vous utilisez un plugin de mise en cache ou un CDN, l'ancienne feuille de style est toujours servie ; videz donc le cache de votre site et celui de votre navigateur, puis v\u00e9rifiez \u00e0 nouveau. Si le badge ne s'affiche toujours pas, il se peut que votre th\u00e8me ou un autre plugin charge ses propres styles de badge apr\u00e8s les v\u00f4tres. Dans ce cas, le code CSS ci-dessus (avec la balise <code>!important<\/code> (drapeaux) l'emporte g\u00e9n\u00e9ralement ; si ce n'est pas le cas, cela signifie que votre s\u00e9lecteur est remplac\u00e9 et vous pouvez alors augmenter la sp\u00e9cificit\u00e9 ou charger la r\u00e8gle ult\u00e9rieurement. Et si le badge est compl\u00e8tement absent plut\u00f4t que mal plac\u00e9, le probl\u00e8me se situe en amont : reCAPTCHA v3 ne se d\u00e9clenche pas encore sur ce formulaire ou cette page ; corrigez donc d'abord l'int\u00e9gration, puis occupez-vous de la position.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alors, faut-il un plugin ou du CSS pour d\u00e9placer le badge ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si c'\u00e9tait mon site, j'opterais pour les trois lignes de CSS, car la modification de la position est un r\u00e9glage que l'on d\u00e9finit une fois pour toutes et je pr\u00e9f\u00e8re ne pas avoir \u00e0 utiliser un plugin suppl\u00e9mentaire juste pour g\u00e9rer une seule r\u00e8gle. Cela dit, je ne pense pas que le plugin soit un mauvais choix ; pour quelqu'un qui \u00e9vite le code et qui souhaite disposer d'un panneau qu'il peut modifier ult\u00e9rieurement, <strong>BadgeShift<\/strong> C'est un outil \u00e9pur\u00e9, d\u00e9di\u00e9 \u00e0 une seule fonction, qui fait exactement ce qu'il promet, et dont les param\u00e8tres sont conserv\u00e9s m\u00eame si vous changez de th\u00e8me.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quoi qu\u2019il en soit, la r\u00e8gle \u00e0 retenir est celle qui vous \u00e9vitera des ennuis : vous pouvez d\u00e9placer le badge comme bon vous semble, mais ne le masquez que si vous r\u00e9int\u00e9grez le texte d\u2019attribution de Google sur la page.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-changelog is-layout-flow wp-block-group-is-layout-flow\" id=\"article-update-logs\">\n<h2 class=\"wp-block-heading\">Journal des mises \u00e0 jour<\/h2>\n<p class=\"wp-block-paragraph\"><strong>27 juin 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>Nous avons ajout\u00e9 une deuxi\u00e8me m\u00e9thode ne n\u00e9cessitant aucun plugin (un court extrait de code CSS) en plus de la solution propos\u00e9e par BadgeShift, et pr\u00e9cis\u00e9 la r\u00e8gle de Google selon laquelle le badge ne peut \u00eatre masqu\u00e9 que si vous conservez le texte d'attribution obligatoire.<\/li><\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Vous souhaitez d\u00e9placer le badge reCAPTCHA v3 vers la gauche dans WordPress ? Voici deux m\u00e9thodes simples pour y parvenir : une m\u00e9thode CSS et une option de plugin, sans endommager le badge.<\/p>","protected":false},"author":1,"featured_media":7253,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kb_optimizer_status":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","rank_math_title":"How to Move reCAPTCHA V3 Badge to Left in WordPress","rank_math_description":"Want to move reCAPTCHA V3 badge to the left in WordPress? Two clean ways, a no-code plugin and a one-line CSS fix, without breaking Google's rules.","rank_math_focus_keyword":"Move reCAPTCHA V3 Badge","_colophon_preset":"regular","_colophon_fc_on":"","_colophon_edited_on":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-3196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips-tutorials"],"_links":{"self":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/comments?post=3196"}],"version-history":[{"count":4,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3196\/revisions"}],"predecessor-version":[{"id":7267,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3196\/revisions\/7267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media\/7253"}],"wp:attachment":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media?parent=3196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/categories?post=3196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/tags?post=3196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}