So fügen Sie Pfeiltasten-Tastaturnavigation in WordPress hinzu

Die Verbesserung der Navigation Ihrer Website kann die Benutzererfahrung verbessern und es den Besuchern erleichtern, Inhalte effizient zu durchsuchen.

Das Hinzufügen der Pfeiltasten-Navigation in WordPress ermöglicht es Benutzern, mit nur ihren Pfeiltasten durch die Beiträge Ihrer Website zu navigieren. WordPress bietet diese Navigationsfunktionen jedoch nicht standardmäßig an.

Bei WPBeginner konzentrieren wir uns darauf, eine reibungslose und angenehme Benutzererfahrung zu schaffen. Im Laufe der Zeit haben wir verschiedene Methoden getestet, um die Benutzerfreundlichkeit unserer Website zu verbessern, einschließlich der Navigation mit Pfeiltasten. Obwohl diese Funktion für unseren Blog nicht wichtig ist, verstehen wir, wie sie für E-Book-Autoren und kleinere Blogs, die das Leseerlebnis verbessern möchten, von Vorteil sein könnte.

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

Warum Pfeiltasten-Tastaturnavigation in WordPress hinzufügen?

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

Benutzer können die nächsten und vorherigen Blogbeiträge anzeigen, indem sie auf die rechten und linken Pfeiltasten auf ihrer Tastatur klicken.

Diese Funktion ist praktisch, wenn Sie möchten, dass Benutzer Beiträge einfach in sequenzieller Reihenfolge durchsuchen können. Zum Beispiel, wenn Sie Blogbeiträge verwenden, um Kapitel eines Buches zu veröffentlichen, Portfolio-Elemente, historische Ereignisse oder mehr.

Das Hinzufügen einer Pfeiltastennavigation kann auch eine großartige Möglichkeit sein, die Benutzererfahrung auf Ihrem WordPress-Blog zu verbessern, indem Benutzer ermutigt werden, Ihre Website weiter zu erkunden.

Lassen Sie uns nun Schritt für Schritt sehen, wie Sie die Pfeiltasten-Tastaturnavigation in WordPress einfach hinzufügen können:

• Methode 1: Hinzufügen der Pfeiltasten-Tastaturnavigation mit WPCode (empfohlen)
• Methode 2: Hinzufügen der Pfeiltasten-Tastaturnavigation mit dem Arrow Keys Navigation Plugin
• Pfeiltasten-Navigation für WordPress Slider und Bildergalerien

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

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

Wenn sie dies tun, können die Benutzer mit den Pfeiltasten auf ihrer Tastatur zwischen verschiedenen Seiten und Beiträgen auf Ihrer Website wechseln.

Beachten Sie jedoch, dass das Hinzufügen von benutzerdefiniertem Code zu WordPress-Kern-Dateien riskant sein kann und ein kleiner Fehler Ihre Website lahmlegen kann.

Deshalb empfehlen wir immer die Verwendung von WPCode. Es ist das beste WordPress-Code-Snippet-Plugin auf dem Markt, das das Hinzufügen von Code zu Ihrer Website sicher und einfach macht.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Details finden Sie in unserem Anfängerleitfaden zum Thema Installieren eines WordPress Plugins.

Nach der Aktivierung gehen Sie im WordPress-Admin-Dashboard zur Seite Code-Snippets » + Snippet hinzufügen .

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

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie mit der Eingabe eines Namens für Ihr Code-Snippet beginnen können.

Wählen Sie hier einfach im Dropdown-Menü in der rechten Ecke des Bildschirms „Universeller Ausschnitt“ als „Code-Typ“ aus.

Kopieren Sie als Nächstes einfach den folgenden Code und fügen Sie ihn in das Feld „Code-Vorschau“ 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>

Scrollen Sie danach nach unten zum Abschnitt „Einfügen“, um einen Speicherort für den Code-Snippet auszuwählen.

Wählen Sie hier die Option „Site-weite Fußzeile“ aus dem Dropdown-Menü neben der Option „Position“.

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

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

Scrollen Sie danach zurück zum Seitenanfang und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“.

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

Das war's! Sie haben erfolgreich die Links- und Rechts-Pfeiltasten-Navigation auf Ihrer Website hinzugefügt.

Methode 2: Hinzufügen der Pfeiltasten-Tastaturnavigation mit dem Arrow Keys Navigation Plugin

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

Dieses Plugin ermöglicht es Ihnen, mit den rechten und linken Pfeiltasten auf Ihrer Tastatur durch die vorherigen und nächsten Beiträge Ihrer Website zu navigieren.

Zuerst müssen Sie das Plugin Arrow Keys Navigation installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

Beachten Sie, dass dieses Plugin nur das Wechseln zwischen verschiedenen Beiträgen auf Ihrer Website ermöglicht, sodass Sie die Pfeiltasten nicht verwenden können, um von einer Seite zur anderen zu gelangen.

Sie können beispielsweise nicht mit den Pfeiltasten von Ihrer „Startseite“ zu Ihrer „Kontaktseite“ wechseln.

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

Detaillierte Anweisungen finden Sie in unserem Tutorial zum Erstellen einer Alert-Bar in WordPress.

Pfeiltasten-Navigation für WordPress Slider und Bildergalerien

Die beiden oben genannten Lösungen ermöglichen es den Benutzern, Ihre Blogbeiträge mit den Pfeiltasten zu navigieren. Manchmal möchten Sie jedoch möglicherweise andere Funktionalitäten hinzufügen, z. B. Benutzern das Verschieben von Bildern mit Pfeiltasten oder vielleicht das Verschieben Ihres Sliders mit Pfeiltasten zu ermöglichen.

In diesen Fällen müssen Sie ein WordPress-Galerie-Plugin und/oder ein WordPress-Slider-Plugin verwenden. Die meisten beliebten Slider- und Galerie-Plugins verfügen über eine integrierte Pfeiltastennavigation.

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

Weitere Details finden Sie in unserem Tutorial zum Erstellen einer Bildergalerie in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Pfeiltasten-Tastaturnavigation in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Top-Auswahl für die besten WordPress Theme Builder sehen, um eine schöne Website zu gestalten, oder die nützlichsten Tastenkombinationen für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.