Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać nawigację za pomocą klawiszy strzałek w WordPress

Usprawnienie nawigacji na twojej witrynie internetowej może poprawić wrażenia użytkownika, ułatwiając odwiedzającym sprawne przeglądanie treści.

Dodanie nawigacji za pomocą klawiszy strzałek w WordPress umożliwia użytkownikom poruszanie się po wpisach Twojej witryny za pomocą klawiszy strzałek. WordPress nie oferuje jednak domyślnie takich funkcji nawigacji.

W WPBeginner skupiamy się na tworzeniu płynnego i przyjemnego doświadczenia użytkownika. Z biegiem czasu testowaliśmy różne metody poprawy użyteczności naszej witryny, w tym nawigację za pomocą klawiszy strzałek. Chociaż ta funkcja nie jest ważna dla naszego bloga, rozumiemy, jak może być korzystna dla autorów e-booków i mniejszych blogów, którzy chcą poprawić wrażenia czytelników.

W tym artykule pokażemy, jak łatwo dodać nawigację za pomocą klawiszy strzałek w WordPress.

How to add arrow key keyboard navigation in WordPress

Dlaczego warto dodać nawigację za pomocą klawiszy strzałek w WordPress?

Dodanie nawigacji za pomocą klawiatury pozwala użytkownikom na łatwe przeglądanie wpisów na Twoim blogu w witrynie internetowej WordPress.

Użytkownicy mogą zobaczyć następne i poprzednie wpisy na blogu, klikając klawisze strzałek w prawo i w lewo na klawiaturze.

Funkcja ta przydaje się, gdy użytkownicy chcą łatwo przeglądać wpisy w kolejności sekwencyjnej. Na przykład, jeśli używasz wpisów na blogu do publikowania rozdziałów książki, elementów portfolio, wydarzeń historycznych lub innych.

Dodanie nawigacji za pomocą klawiszy strzałek może być również świetnym sposobem na poprawę komfortu korzystania z Twojego bloga WordPress, zachęcając użytkowników do dalszego eksplorowania witryny.

Biorąc to pod uwagę, zobaczmy, jak łatwo dodać nawigację za pomocą klawiszy strzałek w WordPress, krok po kroku:

Metoda 1: Dodanie nawigacji za pomocą klawiszy strzałek przy użyciu WPCode (zalecane)

Możesz łatwo dodać nawigację za pomocą strzałek na swojej witrynie WordPress, dodając kod do pliku functions. php twojego motywu WordPress.

W ten sposób użytkownicy będą mogli przełączać się między różnymi stronami i wpisami w twojej witrynie za pomocą klawiszy strzałek na klawiaturze.

Należy jednak pamiętać, że dodawanie własnego kodu do plików rdzenia WordPressa może być ryzykowne, a drobny błąd może zepsuć twoją witrynę.

Dlatego zawsze zalecamy korzystanie z WPCode. Jest to najlepsza na rynku wtyczka do fragmentów kodu WordPress, która umożliwia bezpieczne i łatwe dodawanie kodu do twojej witryny internetowej.

Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Uwaga: WPCode ma również darmową wersję, której można użyć w tym poradniku. Jednak przejście na płatny plan odblokuje więcej funkcji, takich jak biblioteka fragmentów kodu, logika warunkowa i inne.

Po włączaniu, udaj się na stronę Fragmenty kodu ” + Dodaj fragment z kokpitu administracyjnego WordPress.

Następnie możesz kliknąć przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.

Add new snippet

Spowoduje to przejście do strony „Create Custom Snippet”, gdzie można rozpocząć od wpisania rodzaju nazwy dla twojego fragmentu kodu.

Tutaj wystarczy wybrać „Universal Snippet” jako „fragment kodu” z rozwijanego menu w prawym rogu ekranu.

Uwaga: Nie wybieraj „JavaScript” jako twojego rodzaju kodu. Nawet jeśli jest to kod JavaScript, będzie on działał na twojej witrynie tylko wtedy, gdy wybierzesz opcję „Universal Snippet”.

Choose Universal code type for arrow keys navigation

Następnie wystarczy skopiować i wkleić poniższy kod w polu „Podgląd kodu”:

<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>

Następnie przewiń w dół do sekcji „Wstaw”, aby wybrać lokalizację fragmentu kodu.

Tutaj należy wybrać opcję „Stopka dla całej witryny” z rozwijanego menu obok opcji „Położenie”.

Choose Site Wide Footer from the Location dropdown

Następnie wybierz „Auto Insert” jako metodę wstawienia własnego kodu.

Kod będzie teraz automatycznie wykonywany na twojej witrynie internetowej po włączaniu.

Choose an insertion method

Następnie przewiń z powrotem do góry strony i przełącz przełącznik z „Nieaktywny” na „Aktywny”.

Następnie wystarczy kliknąć przycisk „Zapisz fragment kodu”.

Save your arrow keys navigation snippet

To wszystko! Pomyślnie dodałeś nawigację lewym i prawym klawiszem strzałki na twojej witrynie internetowej.

Metoda 2: Dodanie nawigacji za pomocą klawiszy strzałek przy użyciu wtyczki Arrow Keys Navigation

Jeśli nie chcesz dodawać kodu do twojej witryny internetowej, możesz skorzystać z wtyczki Arrow Keys Navigation.

Wtyczka ta włącza nawigację po poprzednich i następnych wpisach w twojej witrynie za pomocą klawiszy strzałek w prawo i w lewo na klawiaturze.

Najpierw należy zainstalować i włączyć wtyczkę Arrow Keys Navigation. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: Ta wtyczka nie była ostatnio aktualizowana. Przetestowaliśmy ją jednak z najnowszą wersją WordPressa i nadal działa. Więcej szczegółów można znaleźć w naszym przewodniku na temat korzystania z nieaktualnych wtyczek.

Activate the plugin

Ponieważ jest to bardzo prosta wtyczka, nie wymaga dodatkowej konfiguracji. Po włączaniu wtyczki możesz teraz przełączać się na różne wpisy na twojej witrynie za pomocą klawiszy strzałek.

Należy pamiętać, że ta wtyczka pozwala tylko na przełączanie się między różnymi wpisami na twojej witrynie internetowej, więc nie będziesz mógł używać klawiszy strzałek do przechodzenia z jednej strony na drugą.

Na przykład, nie możesz przełączyć się ze strony „Strona główna” na twoją stronę „Kontakt z nami” za pomocą klawiszy strzałek.

Po włączaniu wtyczki możesz dodać pasek powiadomień lub wyskakujące okienko na twojej witrynie internetowej, które informuje użytkowników, że mogą teraz nawigować po różnych wpisach na blogu, po prostu używając klawiszy strzałek, aby przejść z jednego wpisu do drugiego.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym poradnikiem na temat tworzenia paska powiadomień w WordPress.

Nawigacja za pomocą strzałek dla WordPress Slider i Galerie Obrazków

Powyższe dwa rozwiązania pozwolą użytkownikom nawigować po twoich wpisach na blogu za pomocą klawiszy strzałek. Czasami jednak możesz chcieć dodać inne funkcje, takie jak umożliwienie użytkownikom przesuwania obrazków za pomocą klawiszy strzałek lub przesuwanie pokazu slajdów za pomocą klawiszy strzałek.

W takich przypadkach konieczne będzie użycie wtyczki galerii WordPress i/lub wtyczki pokazu slajdów WordPress. Większość popularnych pokazów slajdów i wtyczek galerii ma wbudowane funkcje nawigacji za pomocą strzałek.

Zalecamy korzystanie z Envira Gallery, ponieważ jest to najlepsza wtyczka do galerii, która pozwala na dostosowanie obrazków do twoich upodobań, w tym znaków wodnych, strzałek i tekstu alternatywnego.

Is Envira Gallery the right photo and video gallery plugin for you?

Aby uzyskać szczegółowe informacje, zapoznaj się z naszym poradnikiem na temat tworzenia galerii obrazków w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać nawigację za pomocą klawiszy strzałek w WordPress. Warto również zapoznać się z naszymi propozycjami najlepszych kreatorów motywów WordPress do zaprojektowania 111111 pięknej witryny internetowej lub najbardziej przydatnych skrótów klawiszowych dla WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

5 komentarzyZostaw odpowiedź

  1. Jiří Vaněk

    I tried using the snippet on my friend’s site and it works great. He has a travel blog designed as a travel diary and this was a very good way to make the site more enjoyable for people. Thanks for the code provided.

  2. Brian

    Works like a charm, for the first WP Code option. But any ideas how to get this to 'loop’ around all the available posts in a post type? Currently at the first or last post the implementation just reloads that post page.

    • WPBeginner Support

      Not at the moment but we will look into the possibility for a future article update!

      Administrator

  3. Shiran

    Why does this work backwards? Meaning, I have to hit the „back” arrow to move forward…

    • WPBeginner Support

      There may be an issue with your keyboard itself, have you tried using an on-screen keyboard to see if the issue happens when using a different keyboard?

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.