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 pageplugin ".
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 Using Gutenberg Block Editor

In this part of tutorial, I'll guide you through the process of adding a "Back to Previous Page" button using the Gutenberg editor, offering an alternative solution to Elementor users.

Prerequisites:

Ensure your WordPress site is using Gutenberg (WordPress 5.0 or later).

Step 1: Create a New Page/Post or Edit an Existing One

1. Log in to your WordPress admin dashboard.
2. Create a new page/post or edit an existing one where you want to add the "Back to Previous Page" button.

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

Step 2: Add a Button Block

1. Inside the Gutenberg editor, click on the '+' icon to add a new block.
2. Search for the "Button" block and add it to your content.

Step 3: Configure the Button Block

1. Select the added Button block.
2. In the right sidebar, configure the button settings.
3. Enter the button text (e.g., "Back").
4. Optionally, add a link or leave it blank.

Step 4: Add Custom CSS Class to the Button Block

1. Scroll down to the "Avancé" section in the right sidebar.
2. Trouver le "Additional CSS Class" field and enter a custom class, e.g., 'go-back-btn'.
3. Update the page/post to save your changes.

Step 5: Add an HTML Widget

1. Click on "+" icon.
2. Find and add the "HTML" widget to your desired location or exactly under the button on the same page.

Step 6: Insert Following JavaScript Code

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: Alternatively, Use a Plugin (pour Elementor et Gutenberg)

If you prefer a plugin-based approach:

1. Installez et activez le logiciel "Insérer des en-têtes et des pieds de pageplugin ".
2. Go to "Settings" in the WordPress admin menu and click on "Insert Headers and Footers."
3. Paste the JavaScript code into the "Scripts in Footer" box.
4. Click on the "Save" button to save your changes.

You've successfully added a "Back to Previous Page" button using the Gutenberg editor in WordPress. This straightforward solution enhances user navigation on your site. Test the button to ensure it works as expected, providing a smooth user experience.