Comment ajouter un bouton "Retour à la page précédente" dans WordPress (2 méthodes faciles)

Dans ce tutoriel, je vais vous guider à travers le processus d'ajout d'un bouton "Retour à la page précédente" ou "Revenir en arrière" à l'aide de ElementorCe site utilise des liens d'affiliation pour promouvoir des produits et services recommandés. et Gutenberg/ Éditeur de blocs.

Méthode 1 : Ajouter un bouton "Retour" à l'aide d'Elementor

Assurez-vous que vous avez ElementorCe site utilise des liens d'affiliation pour promouvoir les produits et services recommandés installés et activés sur votre site WordPress.

Étape 1 : Localiser le widget bouton dans Elementor

1. Connectez-vous au tableau de bord de WordPress.
2. Naviguez jusqu'à la page où vous souhaitez ajouter le bouton "Retour à la page précédente".
3. Modifier la page en utilisant ElementorCe site utilise des liens d'affiliation pour promouvoir des produits et services recommandés.
4. Dans l'éditeur Elementor, trouvez et ajoutez le widget "Bouton" à l'endroit de votre choix sur la page.

Étape 2 : Configuration de l'onglet Avancé du widget bouton

1. Cliquez sur le widget Bouton ajouté.
2. Dans la barre latérale gauche, allez à la section "AvancéOnglet ".
3. Localisez la rubrique "ID CSS"et saisissez un identifiant unique, tel que Retourner en arrière.
4. Enregistrez les modifications apportées au widget Bouton.

Étape 3 : Ajouter un widget HTML dans Elementor

1. Retournez dans l'éditeur Elementor.
2. Trouvez et ajoutez le widget "HTML" à l'endroit de votre choix ou exactement sous le bouton de la même page.

Étape 4 : Insérer le code JavaScript

Collez le code JavaScript suivant dans le widget HTML :

<scénario type="texte/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-back').sur('cliquer', fonction() {
            window.history.aller(-1);
            retour faux;
        });
    });
</scénario>

Ce script utilise jQuery pour détecter un clic sur le bouton avec l'ID "go-back" et déclenche l'historique du navigateur pour revenir en arrière d'une étape.

4.1 : Autre solution : utiliser un plugin (pour Elementor et Gutenberg)

Si vous préférez une approche basée sur les plugins. Je vous recommande d'utiliser cette méthode :

1. Installez et activez le logiciel "Insérer des en-têtes et des pieds de page" plugin.
2. Aller à "Paramètres"dans le menu d'administration de WordPress et cliquez sur "Insérer des en-têtes et des pieds de page."
3. Collez le code JavaScript dans le champ "Scripts dans le pied de page".
4. Cliquez sur le bouton "Économiser"pour enregistrer vos modifications.

Nous vous félicitons ! Vous avez ajouté avec succès un bouton "Retour à la page précédente" à votre site WordPress en utilisant Elementor. Ce simple ajout peut améliorer de manière significative la navigation des utilisateurs et l'expérience globale de l'utilisateur sur votre site web. Testez le bouton pour vous assurer qu'il fonctionne comme prévu et qu'il offre aux utilisateurs une expérience de navigation transparente.

Méthode 2 : Ajout "Bouton "Retour Utiliser l'éditeur de blocs Gutenberg

Dans cette partie du tutoriel, je vous guiderai à travers le processus d'ajout d'un "Retour à la page précédente en utilisant l'éditeur Gutenberg, offrant ainsi une solution alternative aux utilisateurs d'Elementor.

Prérequis :

Assurez-vous que votre site WordPress utilise Gutenberg (WordPress 5.0 ou version ultérieure).

Étape 1 : Créer une nouvelle page/un nouvel article ou modifier une page/un article existant

1. Connectez-vous au tableau de bord de WordPress.
2. Créez une nouvelle page/un nouvel article ou modifiez une page existante à laquelle vous souhaitez ajouter le bouton "Retour à la page précédente".

La création de backlinks est plus facile que jamais Essayez SerpZila.

Étape 2 : Ajouter un bloc de boutons

1. À l'intérieur de l'éditeur Gutenberg, cliquez sur l'icône " + " pour ajouter un nouveau bloc.
2. Recherchez le bloc "Bouton" et ajoutez-le à votre contenu.

Étape 3 : Configuration du bloc de boutons

1. Sélectionnez le bloc Bouton ajouté.
2. Dans la barre latérale droite, configurez les paramètres du bouton.
3. Saisissez le texte du bouton (par exemple, "Retour").
4. Il est possible d'ajouter un lien ou de le laisser vide.

Étape 4 : Ajouter une classe CSS personnalisée au bloc de boutons

1. Faites défiler vers le bas jusqu'à la rubrique "Avancé"dans la barre latérale droite.
2. Trouver le "Classe CSS supplémentaire" et saisissez une classe personnalisée, par exemple, 'go-back-btn'.
3. Mettez à jour la page/le message pour enregistrer vos modifications.

Étape 5 : Ajouter un widget HTML

1. Cliquez sur "+icône ".
2. Recherchez et ajoutez le "HTML"à l'endroit souhaité ou exactement sous le bouton de la même page.

Étape 6 : Insérer le code JavaScript suivant

Collez le code JavaScript suivant dans le widget HTML :

<scénario type="texte/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-back').sur('cliquer', fonction() {
            window.history.aller(-1);
            retour faux;
        });
    });
</scénario>

Ce script utilise jQuery pour détecter un clic sur le bouton avec l'ID "go-back" et déclenche l'historique du navigateur pour revenir en arrière d'une étape.

6.1 : Autre solution : utiliser un plugin (pour Elementor et Gutenberg)

Si vous préférez une approche basée sur les plugins :

1. Installez et activez le logiciel "Insérer des en-têtes et des pieds de page" plugin.
2. Allez dans "Réglages" dans le menu d'administration de WordPress et cliquez sur "Insérer des en-têtes et des pieds de page".
3. Collez le code JavaScript dans la case "Scripts dans le pied de page".
4. Cliquez sur le bouton "Enregistrer" pour sauvegarder vos modifications.

Vous avez ajouté avec succès un bouton "Retour à la page précédente" à l'aide de l'éditeur Gutenberg de WordPress. Cette solution simple améliore la navigation des utilisateurs sur votre site. Testez le bouton pour vous assurer qu'il fonctionne comme prévu, offrant une expérience utilisateur fluide.