Wie man eine Schaltfläche "Zurück zur vorherigen Seite" in WordPress hinzufügt (2 einfache Methoden)

In diesem Tutorial führe ich Sie durch den Prozess des Hinzufügens einer Schaltfläche “Zurück zur vorherigen Seite” oder ”Zurückgehen” mit ElementorDiese Website verwendet Affiliate-Links, um empfohlene Produkte und Dienstleistungen zu bewerben. und Gutenberg/Block Editor.

Methode 1: Hinzufügen der Schaltfläche “Zurück” mit Elementor

Stellen Sie sicher, dass Sie über ElementorDiese Website verwendet Affiliate-Links, um empfohlene Produkte und Dienstleistungen zu bewerben, die auf Ihrer WordPress-Website installiert und aktiviert sind.

Schritt 1: Suchen Sie das Button-Widget in Elementor

1. Melden Sie sich bei Ihrem WordPress-Administrations-Dashboard an.
2. Navigieren Sie zu der Seite, auf der Sie die Schaltfläche “Zurück zur vorherigen Seite” hinzufügen möchten.
3. Bearbeiten Sie die Seite mit ElementorDiese Website verwendet Affiliate-Links, um empfohlene Produkte und Dienstleistungen zu fördern.
4. Suchen Sie im Elementor-Editor das “Button”-Widget und fügen Sie es an der gewünschten Stelle auf der Seite ein.

Schritt 2: Konfigurieren Sie die erweiterte Registerkarte des Schaltflächen-Widgets

1. Klicken Sie auf das hinzugefügte Button-Widget.
2. Gehen Sie in der linken Seitenleiste zum Menüpunkt “Fortgeschrittene”Registerkarte ".
3. Suchen Sie die “CSS-ID”und geben Sie einen eindeutigen Bezeichner ein, z. B. ‘zurückgehen’.
4. Speichern Sie die Änderungen, die Sie am Schaltflächen-Widget vorgenommen haben.

Schritt 3: Hinzufügen eines HTML-Widgets in Elementor

1. Gehen Sie zurück zum Elementor-Editor.
2. Suchen Sie das “HTML”-Widget und fügen Sie es an der gewünschten Stelle oder genau unter der Schaltfläche auf derselben Seite ein.

Schritt 4: JavaScript-Code einfügen

Fügen Sie den folgenden JavaScript-Code in das HTML-Widget ein:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-back').on('click', function() {
            window.history.go(-1);
            return false;
        });
    });
</script>

<Skript Typ="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-zurück').auf('anklicken.', Funktion() {
            window.history.gehen.(-1);
            return falsch;
        });
    });
</Skript>

Dieses Skript verwendet jQuery, um einen Klick auf die Schaltfläche mit der ID ‘go-back’ zu erkennen, und veranlasst den Browserverlauf, einen Schritt zurückzugehen.

4.1: Verwenden Sie alternativ ein Plugin (Sowohl für Elementor als auch für Gutenberg)

Wenn Sie einen Plugin-basierten Ansatz bevorzugen. Ich empfehle die Verwendung dieser Methode:

1. Installieren und aktivieren Sie das “Kopf- und Fußzeilen einfügen”Plugin".
2. Weiter zu “Einstellungen” im WordPress-Administrationsmenü und klicken Sie auf “Kopf- und Fußzeilen einfügen.“
3. Fügen Sie den JavaScript-Code in das Feld “Skripte in der Fußzeile”Kasten".
4. Klicken Sie auf den “Speichern Sie”, um Ihre Änderungen zu speichern.

Herzlichen Glückwunsch! Sie haben mit Elementor erfolgreich eine Schaltfläche “Zurück zur vorherigen Seite” zu Ihrer WordPress-Website hinzugefügt. Diese einfache Ergänzung kann die Benutzernavigation und die allgemeine Benutzererfahrung auf Ihrer Website erheblich verbessern. Testen Sie die Schaltfläche, um sicherzustellen, dass sie wie erwartet funktioniert und den Nutzern ein nahtloses Browsing-Erlebnis bietet.

Methode 2: Hinzufügen “Schaltfläche ”Zurück" Gutenberg-Block-Editor verwenden

In diesem Teil des Tutorials führe ich Sie durch den Prozess des Hinzufügens einer “Zurück zur vorherigen Seite” Schaltfläche mit dem Gutenberg-Editor und bietet Elementor-Nutzern eine alternative Lösung.

Voraussetzungen:

Stellen Sie sicher, dass Ihre WordPress-Website Gutenberg verwendet (WordPress 5.0 oder höher).

Schritt 1: Erstellen Sie eine neue Seite/einen neuen Beitrag oder bearbeiten Sie eine vorhandene Seite/einen vorhandenen Beitrag.

1. Melden Sie sich bei Ihrem WordPress-Administrations-Dashboard an.
2. Erstellen Sie eine neue Seite/einen neuen Beitrag oder bearbeiten Sie eine bestehende Seite, zu der Sie die Schaltfläche “Zurück zur vorherigen Seite” hinzufügen möchten.

Der Aufbau von Backlinks ist einfacher denn je Versuchen Sie SerpZila.

Schritt 2: Hinzufügen eines Schaltflächenblocks

1. Klicken Sie im Gutenberg-Editor auf das ‘+’-Symbol, um einen neuen Block hinzuzufügen.
2. Suchen Sie nach dem “Button”-Block und fügen Sie ihn zu Ihrem Inhalt hinzu.

Schritt 3: Konfigurieren Sie den Schaltflächenblock

1. Wählen Sie den hinzugefügten Schaltflächenblock aus.
2. Konfigurieren Sie in der rechten Seitenleiste die Einstellungen für die Schaltflächen.
3. Geben Sie den Text der Schaltfläche ein (z. B. “Zurück“).
4. Fügen Sie optional einen Link hinzu oder lassen Sie ihn leer.

Schritt 4: Hinzufügen einer benutzerdefinierten CSS-Klasse zum Schaltflächenblock

1. Scrollen Sie nach unten zum “Fortgeschrittene” in der rechten Seitenleiste.
2. Finden Sie die “Zusätzliche CSS-Klasse” und geben Sie eine benutzerdefinierte Klasse ein, z. B., ‘zurück-gehen-btn’.
3. Aktualisieren Sie die Seite/den Beitrag, um Ihre Änderungen zu speichern.

Schritt 5: Ein HTML-Widget hinzufügen

1. Klicken Sie auf “+”Symbol ".
2. Suchen Sie das “HTML”Widget" an die gewünschte Stelle oder genau unter die Schaltfläche auf derselben Seite.

Schritt 6: Folgenden JavaScript-Code einfügen

Fügen Sie den folgenden JavaScript-Code in das HTML-Widget ein:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-back').on('click', function() {
            window.history.go(-1);
            return false;
        });
    });
</script>

<Skript Typ="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-zurück').auf('anklicken.', Funktion() {
            window.history.gehen.(-1);
            return falsch;
        });
    });
</Skript>

Dieses Skript verwendet jQuery, um einen Klick auf die Schaltfläche mit der ID ‘go-back’ zu erkennen, und veranlasst den Browserverlauf, einen Schritt zurückzugehen.

6.1: Verwenden Sie alternativ ein Plugin (Sowohl für Elementor als auch für Gutenberg)

Wenn Sie einen Plugin-basierten Ansatz bevorzugen:

1. Installieren und aktivieren Sie das “Kopf- und Fußzeilen einfügen”Plugin".
2. Gehen Sie im WordPress-Administrationsmenü auf “Einstellungen” und klicken Sie auf “Kopf- und Fußzeilen einfügen”.”
3. Fügen Sie den JavaScript-Code in das Feld “Skripte in der Fußzeile” ein.
4. Klicken Sie auf die Schaltfläche “Speichern”, um Ihre Änderungen zu speichern.

Sie haben mithilfe des Gutenberg-Editors in WordPress erfolgreich eine Schaltfläche “Zurück zur vorherigen Seite” hinzugefügt. Diese unkomplizierte Lösung verbessert die Benutzernavigation auf Ihrer Website. Testen Sie die Schaltfläche, um sicherzustellen, dass sie wie erwartet funktioniert und ein reibungsloses Nutzererlebnis bietet.