{"id":2529,"date":"2024-01-05T20:09:40","date_gmt":"2024-01-05T20:09:40","guid":{"rendered":"https:\/\/wpconsults.com\/?p=2529"},"modified":"2026-07-18T22:09:04","modified_gmt":"2026-07-19T03:09:04","slug":"bouton-de-retour-a-la-page-precedente-2","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/fr\/back-to-previous-page-button\/","title":{"rendered":"Comment ajouter un bouton \"Retour \u00e0 la page pr\u00e9c\u00e9dente\" dans WordPress (2 m\u00e9thodes faciles)"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Un bouton \u00ab Retour \u00bb permet aux visiteurs de revenir en un clic \u00e0 la page qu'ils venaient de consulter, ce qui s'av\u00e8re pratique dans les guides d\u00e9taill\u00e9s, les pages de r\u00e9sultats de recherche et les processus de paiement en plusieurs \u00e9tapes. C'est un petit d\u00e9tail, mais cela \u00e9vite aux utilisateurs d'avoir \u00e0 chercher la fl\u00e8che de retour du navigateur, et sur mobile, ces petits d\u00e9sagr\u00e9ments finissent par s'accumuler.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je vais vous pr\u00e9senter deux m\u00e9thodes simples pour en ajouter un dans WordPress : un petit extrait de code HTML qui ne n\u00e9cessite aucun plugin, et une solution sans code pour ceux qui pr\u00e9f\u00e8rent \u00e9viter de coder. Je vais \u00e9galement aborder un point que la plupart des tutoriels n\u00e9gligent : ce qui se passe lorsqu'un visiteur acc\u00e8de directement \u00e0 la page sans historique permettant de revenir en arri\u00e8re.<\/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\n<ul class=\"wp-block-list\">\n<li>Un bouton \u00ab Retour \u00bb indique simplement au navigateur de revenir \u00e0 la page pr\u00e9c\u00e9dente dans son historique, en utilisant <code>history.back()<\/code>, ce qui revient \u00e0 dire que <code>history.go(-1)<\/code>.<\/li>\n<li>La solution la plus fiable consiste \u00e0 utiliser un petit bouton HTML personnalis\u00e9, sans avoir besoin de plugin.<\/li>\n<li>Si un visiteur arrive directement sur le site, il n'y a pas d'historique auquel se r\u00e9f\u00e9rer ; il faut donc ajouter une v\u00e9rification de la source de provenance qui, \u00e0 d\u00e9faut, redirige vers votre page d'accueil.<\/li>\n<li>La m\u00e9thode \u00ab sans code \u00bb consiste \u00e0 utiliser un bouton du constructeur de pages ou un lien du menu, m\u00eame si certains th\u00e8mes suppriment les liens JavaScript pour des raisons de s\u00e9curit\u00e9.<\/li>\n<li>Le bouton \u00ab Retour \u00bb est une fonctionnalit\u00e9 pratique, mais ne constitue pas un v\u00e9ritable moyen de navigation ; veillez donc \u00e0 conserver un fil d'Ariane ou un lien clair vers la page parente pour les robots d'indexation et les visiteurs directs.<\/li>\n<\/ul>\n\n<\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .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-id3268_6ddb5a-74 .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-id3268_6ddb5a-74 .kb-table-of-contents-title{font-weight:600;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette4, #2D3748);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:var(--global-palette1, #3182CE);}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:var(--global-palette1, #3182CE);}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .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-id3268_6ddb5a-74 .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<h2 class=\"wp-block-heading\">\u00c0 quoi sert r\u00e9ellement le bouton \u00ab Retour \u00bb ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Il ne s'agit pas vraiment d'une fonctionnalit\u00e9 de WordPress, mais plut\u00f4t d'une fonctionnalit\u00e9 du navigateur. Le bouton \u00ab Retour \u00bb appelle <code>history.back()<\/code>, qui indique au navigateur du visiteur de revenir \u00e0 l'entr\u00e9e pr\u00e9c\u00e9dente de son historique, exactement comme s'il avait cliqu\u00e9 sur la fl\u00e8che de retour (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History\/back\" target=\"_blank\" rel=\"noopener nofollow\">MDN pr\u00e9sente l'API History ici<\/a>).<\/p>\n\n\n<p class=\"wp-block-paragraph\">Comme il consulte l'historique du navigateur, il redirige toujours les utilisateurs vers l'endroit o\u00f9 <strong>ils<\/strong> provient, et non d'une page fixe que vous choisissez. C'est \u00e0 la fois la force et la faiblesse de cette approche, et c'est pourquoi la solution de secours ci-dessous est importante.<\/p>\n\n\n<h2 class=\"wp-block-heading\">M\u00e9thode 1 : un bouton HTML personnalis\u00e9 (sans plugin)<\/h2>\n\n<p class=\"wp-block-paragraph\">C'est la m\u00e9thode que j'utilise moi-m\u00eame, car elle tient en une seule ligne, fonctionne partout o\u00f9 l'on peut ajouter du code HTML et ne n\u00e9cessite pas l'installation d'un plugin qu'il faudrait ensuite g\u00e9rer. Il suffit d'ins\u00e9rer un <strong>HTML personnalis\u00e9<\/strong> Placez le code dans le bloc o\u00f9 vous souhaitez que le bouton apparaisse et collez ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><button type=\"button\">\u2190 Retour<\/button><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">C'est l\u00e0 tout l'int\u00e9r\u00eat. Le hic, ce sont les arriv\u00e9es directes : si un visiteur arrive depuis Google ou via un lien partag\u00e9, son historique sur votre site est vide, donc <code>history.back()<\/code> soit ne fait rien, soit les redirige hors de votre site. La solution consiste \u00e0 v\u00e9rifier d'abord la source de r\u00e9f\u00e9rence et \u00e0 rediriger vers votre page d'accueil lorsqu'il n'y a nulle part o\u00f9 revenir (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/referrer\" target=\"_blank\" rel=\"noopener nofollow\">La propri\u00e9t\u00e9 `document.referrer` est expliqu\u00e9e sur MDN<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><button type=\"button\">\u2190 Retour<\/button><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Utilisez la deuxi\u00e8me version dans vos projets concrets. Elle se comporte de la m\u00eame mani\u00e8re pour les visiteurs habituels, mais elle \u00e9vite \u00e0 tout moment qu\u2019un visiteur arrivant directement sur la page ne se retrouve bloqu\u00e9 sur un bouton qui ne fait rien, ce qui offre une bien meilleure exp\u00e9rience aux personnes que la recherche vous envoie pr\u00e9cis\u00e9ment.<\/p>\n\n\n<h2 class=\"wp-block-heading\">M\u00e9thode 2 : un bouton \u00ab Retour \u00bb sans code<\/h2>\n\n<p class=\"wp-block-paragraph\">Si vous pr\u00e9f\u00e9rez ne pas toucher du tout au code HTML, la plupart des \u00e9diteurs de pages peuvent s'en charger \u00e0 votre place. Dans un \u00e9diteur comme Kadence, ajoutez un \u00e9l\u00e9ment \u00ab Bouton \u00bb et d\u00e9finissez son lien sur <code>javascript:history.back()<\/code>, et vous obtenez le m\u00eame comportement avec un \u00e9diteur visuel, la plupart des autres g\u00e9n\u00e9rateurs proposant ce type d'option.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Souvent, les utilisateurs essaient plut\u00f4t de l'ajouter en tant que \u00ab lien personnalis\u00e9 \u00bb dans le menu, ce qui peut fonctionner, mais attention : WordPress nettoie le contenu <code>javascript :<\/code> liens dans les menus sur de nombreuses configurations, il ne fait donc rien, sans le signaler. Si l'acc\u00e8s via le menu ne fonctionne pas chez vous, utilisez \u00e0 la place le bloc \u00ab HTML personnalis\u00e9 \u00bb de la m\u00e9thode 1, ou, en dernier recours, un petit plugin d\u00e9di\u00e9 au bouton \u00ab Retour \u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>M\u00e9thode<\/th><th>Comment \u00e7a marche ?<\/th><th>Id\u00e9al pour<\/th><th>Attention \u00e0<\/th><\/tr><\/thead><tbody><tr><td><strong>Bouton HTML personnalis\u00e9<\/strong><\/td><td>Un bouton d'une seule ligne ex\u00e9cutant la fonction history.back() dans un bloc HTML personnalis\u00e9<\/td><td>Quelqu'un serait-il d'accord pour copier-coller une ligne ?<\/td><td>Ajouter la solution de secours pour les arriv\u00e9es directes<\/td><\/tr><tr><td><strong>Sans code (\u00e9diteur ou menu)<\/strong><\/td><td>Un bouton du constructeur de pages ou un lien de menu permettant de revenir en arri\u00e8re<\/td><td>Les utilisateurs sans connaissances en programmation sur un \u00e9diteur de pages<\/td><td>Les menus suppriment souvent les liens JavaScript, ce qui fait que le bouton ne fonctionne pas.<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Les deux m\u00e9thodes pour ajouter un bouton \u00ab Retour \u00bb dans WordPress, et les pi\u00e8ges \u00e0 \u00e9viter pour chacune d'entre elles.<\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\">Un simple bouton \u00ab Retour \u00bb suffit-il ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Un bouton \u00ab Retour \u00bb est tr\u00e8s pratique, et je suis ravi d'en ajouter un, mais il doit venir compl\u00e9ter une navigation bien con\u00e7ue plut\u00f4t que de s'y substituer. Les robots d'indexation ne cliquent jamais dessus, et les visiteurs qui acc\u00e8dent directement \u00e0 la page n'ont pas d'historique \u00e0 exploiter ; ces lecteurs ont donc toujours besoin d'un v\u00e9ritable moyen de naviguer sur votre site.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Veillez \u00e0 conserver un lien parent ou de cat\u00e9gorie clair et, dans l'id\u00e9al, un fil d'Ariane afin que chacun puisse remonter d'un niveau gr\u00e2ce \u00e0 une URL valide. Si vous proc\u00e9dez ainsi, le bouton \u00ab Retour \u00bb deviendra un petit plus appr\u00e9ciable, ce qui est exactement son r\u00f4le. Si jamais une version flottante de ce bouton venait \u00e0 entrer en conflit avec un widget d'angle, consultez mon guide sur <a href=\"https:\/\/www.wpconsults.com\/fr\/comment-deplacer-le-badge-recaptcha-v3-vers-la-gauche-dans-wordpress\/\">d\u00e9placer le badge reCAPTCHA v3<\/a> pr\u00e9sente le m\u00eame type de solution ; pour d'autres astuces pratiques, consultez mes guides sur <a href=\"https:\/\/www.wpconsults.com\/fr\/personnaliser-manuellement-la-page-de-connexion-de-wordpress-2\/\">Personnalisation de la page de connexion WordPress<\/a> et <a href=\"https:\/\/www.wpconsults.com\/fr\/changer-lurl-de-ladmin-de-wp-sans-plugin-2\/\">Modifier l'URL de wp-admin sans plugin<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Alors, quelle m\u00e9thode de retour en arri\u00e8re devriez-vous utiliser ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Si c'\u00e9tait mon site, j'opterais pour la m\u00e9thode 1 avec la solution de secours via l'en-t\u00eate \u00ab referrer \u00bb, car elle tient en une seule ligne, ne n\u00e9cessite aucun plugin et g\u00e8re discr\u00e8tement le cas d'acc\u00e8s direct qui pose probl\u00e8me \u00e0 la version de base. C'est l'option la plus simple pour quiconque peut ins\u00e9rer un extrait de code dans un bloc \u00ab HTML personnalis\u00e9 \u00bb.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Cela dit, opter pour une approche \u00ab sans code \u00bb est un choix tout \u00e0 fait judicieux si vous ne touchez jamais au code ; un bouton de cr\u00e9ation de page permet d'obtenir le m\u00eame r\u00e9sultat \u00e0 partir d'un \u00e9diteur visuel. Dans tous les cas, pensez \u00e0 pr\u00e9voir une solution de secours, conservez une v\u00e9ritable navigation, et ce bouton sera une aide plut\u00f4t qu'une source de frustration.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-post-cta is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Vous avez toujours du mal \u00e0 ajouter votre bouton \u00ab Retour \u00bb ?<\/h3>\n<p class=\"wp-block-paragraph\">Si le bouton ne fonctionne pas correctement ou si vous souhaitez l'int\u00e9grer de mani\u00e8re harmonieuse \u00e0 votre th\u00e8me, n'h\u00e9sitez pas \u00e0 <a href=\"https:\/\/www.wpconsults.com\/fr\/travailler-avec-wpconsults\/\">nous contacter<\/a> ou <a href=\"mailto:abdullah@wpconsults.com\">m'envoyer un courriel<\/a> et je me ferai un plaisir de vous orienter dans la bonne direction.<\/p>\n<\/div>\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>2 juillet 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>R\u00e9\u00e9criture avec un bouton fiable ne n\u00e9cessitant aucun plugin, ajout d'une solution de secours pour les visiteurs provenant d'un lien direct afin que cela fonctionne m\u00eame lorsqu'un utilisateur acc\u00e8de directement \u00e0 la page, et clarification des cas o\u00f9 il convient plut\u00f4t de recourir \u00e0 la navigation classique.<\/li><li>J'ai affin\u00e9 les titres des sections afin que chacun d'entre eux soit clair en soi.<\/li><\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Ajoutez un bouton \u00ab Retour \u00bb dans WordPress qui renvoie les visiteurs \u00e0 la page pr\u00e9c\u00e9dente, gr\u00e2ce \u00e0 deux m\u00e9thodes simples : un petit extrait de code HTML et une option sans code, ainsi qu'une solution de secours pour les pages d'atterrissage directes.<\/p>","protected":false},"author":1,"featured_media":2538,"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":"Go Back Button in WordPress: 2 Easy Ways to Add One","rank_math_description":"Want a go back button in WordPress so visitors can return to the previous page? Here are 2 easy methods, a small HTML snippet and a no-code route, done right.","rank_math_focus_keyword":"go back button wordpress","_colophon_preset":"regular","_colophon_fc_on":"","_colophon_edited_on":"","_wpc_translation_mode":"keep","_wpc_translation_visited":"2026-07-22 04:35 UTC (backfill)","_wpc_keep_translation":false,"_wpc_lastmod":"","footnotes":""},"categories":[7],"tags":[64],"class_list":["post-2529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips-tutorials","tag-without-plugin-series"],"_links":{"self":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/2529","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=2529"}],"version-history":[{"count":0,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/2529\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media\/2538"}],"wp:attachment":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media?parent=2529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/categories?post=2529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/tags?post=2529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}