Hinzufügen der Tastaturnavigation mit Pfeiltasten in WordPress

Möchten Sie die Tastaturnavigation mit Pfeiltasten in WordPress hinzufügen?

Die Tastaturnavigation kann Ihre Website benutzerfreundlicher machen, da die Besucher mit den Pfeiltasten von Beitrag zu Beitrag wechseln können. WordPress bietet diese Navigationsfunktionen jedoch nicht standardmäßig an.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress ganz einfach eine Tastaturnavigation mit Pfeiltasten hinzufügen können.

Warum sollte man in WordPress eine Tastaturnavigation mit Pfeiltasten hinzufügen?

Das Hinzufügen einer Tastaturnavigation ermöglicht es den Nutzern, Blogbeiträge auf Ihrer WordPress-Website einfach zu durchsuchen.

Die Nutzer können den nächsten und den vorherigen Blogbeitrag anzeigen, indem sie auf die Pfeiltasten rechts und links auf ihrer Tastatur klicken.

Diese Funktion ist praktisch, wenn Sie möchten, dass die Benutzer die Beiträge in einer bestimmten Reihenfolge durchblättern können. Zum Beispiel, wenn Sie Blog-Einträge verwenden, um Kapitel eines Buches, Portfolio-Elemente, historische Ereignisse oder mehr zu veröffentlichen.

Das Hinzufügen einer Pfeiltasten-Tastaturnavigation kann auch eine großartige Möglichkeit sein, die Benutzererfahrung in Ihrem WordPress-Blog zu verbessern, indem es die Benutzer dazu anregt, Ihre Website genauer zu erkunden.

Sehen wir uns also an, wie man in WordPress Schritt für Schritt eine Tastaturnavigation mit Pfeiltasten hinzufügen kann:

Methode 1: Hinzufügen der Pfeiltasten-Tastaturnavigation mit WPCode (empfohlen)

Sie können die Pfeiltasten-Navigation auf Ihrer WordPress-Website ganz einfach hinzufügen, indem Sie Code in die Datei functions.php Ihres WordPress-Themes einfügen.

Auf diese Weise können die Nutzer mit den Pfeiltasten auf ihrer Tastatur zwischen verschiedenen Seiten und Beiträgen auf Ihrer Website wechseln.

Denken Sie jedoch daran, dass das Hinzufügen von benutzerdefiniertem Code zu WordPress-Kerndateien riskant sein kann und dass ein kleiner Fehler Ihre Website zerstören kann.

Aus diesem Grund empfehlen wir immer die Verwendung von WPCode. Es ist das beste WordPress Code Snippets Plugin auf dem Markt, das es sicher und einfach macht, Code zu Ihrer Website hinzuzufügen.

Zunächst müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie im WordPress-Admin-Dashboard auf die Seite Code Snippets “ + Snippet hinzufügen.

Dort können Sie auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“ klicken.

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Namen für Ihr Code-Snippet eingeben können.

Wählen Sie dann einfach „Universal Snippet“ als „Code-Typ“ aus dem Dropdown-Menü in der rechten Ecke des Bildschirms

Kopieren Sie dann einfach den folgenden Code und fügen Sie ihn in das Feld „Codevorschau“ ein:

<script type="text/javascript">
        document.onkeydown = function (e) {
            var e = e || event, 
            keycode = e.which || e.keyCode; 
            if (keycode == 37 || keycode == 33)
                location = "<?php echo get_permalink(get_previous_post()); ?>";
            if (keycode == 39 || keycode == 34)
                location = "<?php echo get_permalink(get_next_post()); ?>";
        }
    </script>

Danach blättern Sie zum Abschnitt „Einfügen“, um einen Ort für den Codeausschnitt auszuwählen.

Wählen Sie hier einfach die Option „Site Wide Footer“ aus dem Dropdown-Menü neben der Option „Standort“.

Wählen Sie dann „Automatisch einfügen“ als Einfügemethode für den benutzerdefinierten Code.

Der Code wird nun bei der Aktivierung automatisch auf Ihrer Website ausgeführt.

Blättern Sie dann zurück zum Anfang der Seite und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ um.

Dann müssen Sie nur noch auf die Schaltfläche „Snippet speichern“ klicken.

Das war’s! Sie haben die Navigation mit den Pfeiltasten nach links und rechts erfolgreich in Ihre Website integriert.

Methode 2: Hinzufügen der Pfeiltasten-Tastaturnavigation mit dem Pfeiltasten-Navigations-Plugin

Wenn Sie Ihrer Website keinen Code hinzufügen möchten, können Sie das Plugin Arrow Keys Navigation verwenden.

Mit diesem Plugin können Sie mit den Pfeiltasten rechts und links auf Ihrer Tastatur durch die vorherigen und nächsten Beiträge auf Ihrer Website navigieren.

Zunächst müssen Sie das Plugin für die Pfeiltasten-Navigation installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Da es sich um ein sehr einfaches Plugin handelt, erfordert es keine zusätzliche Konfiguration. Sobald Sie das Plugin aktiviert haben, können Sie nun mit den Pfeiltasten zu verschiedenen Beiträgen auf Ihrer Website wechseln.

Denken Sie daran, dass Sie mit diesem Plugin nur zwischen verschiedenen Beiträgen auf Ihrer Website wechseln können. Sie können also nicht mit den Pfeiltasten von einer Seite zur anderen wechseln.

Sie können zum Beispiel nicht mit den Pfeiltasten von der Seite „Home“ zur Seite „Contact Us“ wechseln.

Nachdem Sie das Plugin aktiviert haben, können Sie eine Benachrichtigungsleiste oder ein Popup-Fenster auf Ihrer Website einfügen, das den Nutzern mitteilt, dass sie jetzt durch verschiedene Blogbeiträge navigieren können, indem sie einfach die Pfeiltasten verwenden, um von einem Beitrag zum nächsten zu gelangen.

Ausführlichere Anweisungen finden Sie in unserem Tutorial zur Erstellung einer Warnleiste in WordPress.

Pfeiltastennavigation für WordPress-Slider und Bildergalerien

Mit den beiden oben genannten Lösungen können Benutzer mit Pfeiltasten durch Ihre Blogbeiträge navigieren. Manchmal möchten Sie jedoch andere Funktionen hinzufügen, wie z. B. das Verschieben von Bildern mit Pfeiltasten oder das Verschieben Ihres Schiebereglers mit Pfeiltasten.

In diesen Fällen müssen Sie ein WordPress-Galerie-Plugin und/oder ein WordPress-Slider-Plugin verwenden. Die meisten gängigen Slider- und Galerie-Plugins verfügen über integrierte Pfeiltasten-Navigationsfunktionen.

Wir empfehlen die Verwendung von Envira Gallery, weil es das beste Galerie-Plugin ist, mit dem Sie Ihre Bilder nach Ihren Wünschen anpassen können, einschließlich Wasserzeichen, Pfeiltasten und Alt-Text.

Weitere Informationen finden Sie in unserem Tutorial zur Erstellung einer Bildergalerie in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man in WordPress eine Tastaturnavigation mit Pfeiltasten hinzufügt. Vielleicht interessieren Sie sich auch für unsere Top-Auswahl der besten WordPress-Plugins oder unsere Anleitung zum Hinzufügen von Sonderzeichen in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.