Jeśli na swojej stronie masz długie artykuły, czy podstrony o dużej ilości treści, to warto dodać strzałkę powrotu. Funkcjonalność ta sprawi, że Twoja strona stanie się łatwiejsza w obsłudze i podniesiesz jej User Experience. Strzałka powrotu w WordPress – zobacz jak ją dodać. Serdecznie zapraszam do artykułu 🙂

Strzałka powrotu w WordPress

Strzałka standardowo pojawia się w prawym dolnym rogu ekranu, po przewinięciu strony w dół. Jest to bardzo przydatna funkcjonalność zwłaszcza w przypadku, gdy na stronie znajdują się zakładki o dużej ilości treści. Użytkownicy czytający artykuły mogą w szybki sposób przemieścić się do początku strony. Dzięki strzałce powrotu nie muszą przewijać strony ręcznie.

Strzałka powrotu w WordPress przy użyciu wtyczki

Polecam wtyczkę WPFront Scroll Top. Wtyczka ta jest bardzo prosta w obsłudze, a zarazem ma wiele przydatnych funkcjonalności pozwalających nam na dostosowanie strzałki do naszych preferencji.

Po zainstalowaniu i aktywacji wtyczki przejdź do jej ustawień: Ustawienia -> ScrollTop.

Następnie skonfiguruj ustawienia wtyczki wedle własnego uznania. Poniżej omawiam poszczególne opcje.

• Enabled – zaznacz pole, żeby włączyć strzałkę powrotu.
• JavaScript Async – opcja ta pozwala na zwiększenie wydajności strony. Jednak uważaj, ponieważ może ona spowodować konflikt na Twojej stronie. Jeśli włączysz tę opcję, dokłądnie sprawdź, czy nie wywołała błędów.
• Scroll Offset – odległość mierzona w pikselach, na jaką należy przewinąć stronę, żeby ukazała się strzałka powrotu.
• Button Size – w tym miejscu zmienisz wielkość strzałki. Wpisanie do obu pól wartości zero spowoduje przywrócenie domyślnego rozmiaru.
• Button Opacity – zmiana przezroczystości strzałki. Domyślnie wynosi ona 80%.
• Button Fade Duration – czas animacji pojawiania się strzałki. Domyślnie wynosi on 200ms.
• Scroll Duration – czas przewijania strony. Domyślnie wynosi on 400ms.

• Auto Hide – włączenie auto ukrywania strzałki.
• Auto Hide After – ilość czasu bezczynności na stronie mierzona w sekundach, po której strzałka zostanie ukryta. Żeby opcja ta zadziałała musisz uprzednio włączyć Auto Hide.
• Hide on Small Devices – włączenie ukrywania strzałki powrotu na mniejszych urządzeniach.
• Small Device Max Width – ustawienie szerokości maksymalnej mierzonej w pikselach, poniżej której strzałka powrotu zostanie ukryta. Żeby opcja ta zadziałała musisz uprzednio włączyć Hide on Small Devices.
• Hide on Small Window – właczenie ukrywania strzałki powrotu po zmniejszeniu okna przeglądarki.
• Small Window Max Width – ustawienie szerokości maksymalnej okna przeglądarki w pikselach, poniżej której strzałka powrotu zostanie ukryta. Żeby opcja ta zadziałała musisz uprzednio włączyć Small Window Max Width.
• Hide on WP-ADMIN – ukrycie strzałki w kokpicie WordPress.
• Hide on iframes – ukrycie strzałki powrotu wewnątrz elementów iframe. Iframe jest elementem języka HTML. Element iframe powala na umieszczenie dokumentu HTML wewnątrz innego dokumentu HTML.

• Button style – styl przycisku. Przycisk może być w formie obrazka (Image), tekstu (Text) lub ikonki Font Awesome. Po wybraniu danej opcji zmienią się opcje poniżej.
• Button Action – zachowanie przycisku. Domyślnym ustawieniem jest Scroll to Top, czyli przewijanie strony do góry. Natomiast Scroll to Element pozwala na ustawienie elementu HTML, do którego ma kierować przycisk. Ostatnia opcja Link to Page pozwala na podlinkowanie przycisku do dowolnego adresu. UWAGA: jeśli chcesz stworzyć standardową strzałkę powrotu, to pozostań przy domyślnym ustawieniu Scroll to Top.

• Location – zmiana położenia strzałki. Bottom Right – prawy dolny róg (jest to ustawienie domyślnie i moim zdaniem najlepsze), Bottom Left – lewy dolny róg, Top Right – prawy górny róg, Top Left – lewy górny róg.
• Margin X – poziome odsunięcie od krawędzi.
• Margin Y – pionowe odsunięcie od krawędzi.

• Display on Pages – możesz pokazać przycisk na wszystkich stronach, albo na wybranych.

Strzałka w formie obrazka

Jeśli w sekcji Button Style wybrałeś opcję Image, to znaczy, że strzałka będzie wyświetlana w formie obrazka. Zatem pojawią Ci się poniższe opcje:

• Image Button – w tym miejscu możesz wybrać jak ma wyglądać strzałka.

Możesz także wgrać swój obrazek.

Strzałka w formie tekstu

Jeśli w sekcji Button style wybrałeś opcję Text, to znaczy, że strzałka będzie wyświetlana w formie tekstu. Zatem pojawią Ci się poniższe opcje:

• Text – miejsce na tekst.
• Text Color – kolor tekstu.
• Background Color – kolor tła, na którym znajduje się tekst.
• Mouse Over Color – kolor przycisku po najechaniu kursorem myszy.
• Custom CSS – miejsce na własny kod CSS.

Strzałka powrotu w formie ikonki Font Awesome

Font Awesome jest to dość rozbudowana biblioteka icon fonts. Są to fonty wyświetlające zamiast tekstu ikonki.

Jeśli w sekcji Button style wybrałeś opcję Font Awesome, to znaczy, że strzałka będzie wyświetlana w formie ikonki Font Awesome . Zatem pojawią Ci się poniższe opcje:

• Icon Class – klasa ikonki.

• Font Awesome URL – pozostaw puste pole, jeśli chcesz korzystać z biblioteki hostowanej przez BootstrapCDN.
• Do not include URL – zaznacz tę opcję, jeśli masz już podpiętą pod stronę bibliotekę Font Awesome.
• Icon Color – kolor ikonki.
• Custom CSS – miejsce na własny kod CSS.