Jak dodać efekt płynnego przewijania do góry w WordPress przy użyciu jQuery

Czy kiedykolwiek przewijałeś długi post na blogu WordPress lub stronę produktu na telefonie, tylko po to, by zdać sobie sprawę, że musiałeś przesunąć palcem aż do samego góry, aby znaleźć menu? Twoi odwiedzający mogą czuć to samo.

Na dłuższych stronach ta niewielka niedogodność może szybko przerodzić się we frustrację. Niektórzy mogą po prostu opuścić Twoją witrynę WordPress zamiast wracać.

Płynny przycisk przewijania do góry może pomóc Ci natychmiast to naprawić. Ta funkcja daje czytelnikom szybki sposób na powrót do góry, co może utrzymać ich zaangażowanie i zachęcić do dalszego przeglądania Twojej strony.

W tym przewodniku podzielimy się dokładnie tym, jak dodać płynny efekt przewijania do góry w WordPress przy użyciu jQuery. Nie martw się, jest to prostsze niż myślisz! 💡

Co to jest płynne przewijanie i kiedy go używać?

Płynne przewijanie to efekt nawigacji, który przesuwa stronę w górę lub w dół w stałym, płynnym ruchu, zamiast natychmiastowego przeskakiwania do sekcji.

Chyba że witryna ma statyczne menu nagłówka, użytkownicy przewijający długi post lub stronę WordPress do samego dołu muszą ręcznie przesuwać lub przewijać palcem, aby wrócić na górę i nawigować po witrynie.

Może to być prawdziwa uciążliwość, a użytkownicy często po prostu klikają przycisk wstecz i wychodzą. Dlatego potrzebujesz przycisku, który szybko przeniesie użytkowników na górę posta lub strony.

Zazwyczaj można dodać tę funkcjonalność jako prosty link tekstowy bez użycia jQuery, w ten sposób:

<a href="#" title="Back to top">^Top</a>

Spowoduje to wysłanie użytkowników na górę poprzez przewinięcie całej strony w milisekundach. Działa, ale efekt może być drażniący, trochę jak uderzenie w wyboje na drodze.

Płynne przewijanie jest przeciwieństwem tego. Przesunie użytkownika z powrotem na górę z przyjemnym wizualnie efektem. Używanie takich elementów może drastycznie poprawić doświadczenie użytkownika na Twojej stronie.

Mając to na uwadze, przedstawimy dwie metody dodania płynnego efektu przewijania na górę na Twojej stronie WordPress za pomocą wtyczki i jQuery. Oto szybki przegląd wszystkich rzeczy, które omówimy w tym przewodniku:

Bez dalszych ceregieli, zacznijmy od pierwszej metody.

Wskazówka 1: Dodawanie płynnego efektu przewijania do góry za pomocą wtyczki WordPress

Ta metoda jest zalecana dla początkujących, ponieważ pozwala dodać efekt przewijania do góry do strony WordPress bez dotykania ani jednej linii kodu.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki WPFront Scroll Top. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Ustawienia » Powrót na górę z panelu administracyjnego WordPress. Tutaj możesz skonfigurować wtyczkę i dostosować efekt płynnego przewijania.

Stąd pierwszą rzeczą, którą musisz zrobić, to kliknąć pole wyboru „Włączone”, aby aktywować przycisk przewijania do góry na Twojej stronie. Następnie zobaczysz opcje edycji przesunięcia przewijania, rozmiaru przycisku, przezroczystości, czasu zanikania, czasu przewijania i innych.

Po przewinięciu w dół znajdziesz więcej opcji, takich jak edycja czasu automatycznego ukrywania i włączenie opcji ukrycia przycisku na małych urządzeniach lub ekranie wp-admin.

Możesz również edytować działanie przycisku po jego kliknięciu. Domyślnie przewinie on stronę do góry, ale możesz zmienić to, aby przewinął do konkretnego elementu w poście, a nawet linkował do strony.

Dodatkowo możesz dostosować lokalizację przycisku. Chociaż zazwyczaj pojawia się on w prawym dolnym rogu ekranu, masz możliwość przeniesienia go do dowolnego innego rogu.

Wtyczka WPFront Scroll Top oferuje filtry, aby wyświetlać przycisk przewijania do góry tylko na wybranych stronach.

Zazwyczaj pojawi się on na wszystkich stronach Twojego bloga WordPress.

Możesz jednak przejść do sekcji „Wyświetl na stronach” i wybrać, gdzie chcesz wyświetlić efekt przewijania do góry.

Wtyczka oferuje również gotowe projekty przycisków. Powinieneś bez problemu znaleźć projekt pasujący do Twojej witryny.

Jeśli nie możesz znaleźć gotowego obrazka przycisku, który Ci odpowiada, istnieje opcja przesłania niestandardowego obrazka z biblioteki multimediów WordPress.

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

Możesz teraz odwiedzić swoją witrynę WordPress, aby zobaczyć przycisk przewijania do góry w akcji.

Wskazówka 2: Dodawanie płynnego efektu przewijania do góry za pomocą jQuery w WordPress

W tej metodzie dodamy płynny efekt przewijania do góry za pomocą jQuery, trochę CSS i pojedynczej linii kodu HTML. Nasz zespół ręcznie przetestował i zweryfikował ten dokładny fragment kodu na świeżej instalacji WordPress, aby zapewnić, że działa bez zakłócania funkcjonalności motywu.

Mając to na uwadze, wiele poradników będzie wymagało edycji plików motywu w celu dodania przycisku płynnego przewijania do góry. Ale to nie jest przyjazne dla początkujących – nawet najmniejszy błąd może zepsuć Twoją witrynę.

Dlatego zalecamy korzystanie z WPCode, gdy chcesz dodać niestandardową funkcjonalność, taką jak płynne przewijanie. Jest to najlepszy wtyczka do fragmentów kodu dla WordPressa, która pozwala bezpiecznie dodawać niestandardowe fragmenty – wszystko bez modyfikowania plików motywu.

Niektóre z naszych marek partnerskich używają WPCode do dodawania i zarządzania swoimi niestandardowymi fragmentami kodu i działa to naprawdę dobrze.

Aby dowiedzieć się więcej, możesz zapoznać się z naszą pełną recenzją WPCode, aby zobaczyć wszystkie jego funkcje.

Najpierw musisz zainstalować i aktywować darmową wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Na następnym ekranie zobaczysz bibliotekę kodu WPCode.

Kliknij „Użyj fragmentu” pod „Dodaj swój własny kod (niestandardowy fragment).”

Pojawi się okno dialogowe z prośbą o podanie typu kodu.

Upewnij się, że wybrałeś „Fragment JavaScript”.

Teraz, gdy jesteś w edytorze kodu, najpierw nadaj swojemu niestandardowemu fragmentowi kodu jasną nazwę. Jest to tylko do Twojej wiadomości, ale zalecamy używanie jasnej, opisowej nazwy.

Następnie wklej poniższy kod do pola „Podgląd kodu”:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Ten skrypt jQuery wykonuje całą ciężką pracę związaną z efektem płynnego przewijania.

Najpierw ukrywa przycisk, dopóki użytkownik nie przewinie w dół o 200 pikseli. Kiedy użytkownik kliknie przycisk, skrypt płynnie animuje stronę z powrotem do 0 pikseli (na samą górę).

Dołączyliśmy również linię return false;, aby zapobiec domyślnemu zachowaniu linku HTML, które natychmiast przeniosłoby użytkownika na górę i zepsuło animację.

Oto jak może to wyglądać na Twoim ekranie:

Następnie przewiń w dół do sekcji „Wstawianie”.

Najpierw upewnij się, że masz wybrane „Automatyczne wstawianie”. Zapewnia to, że fragment uruchamia się automatycznie na Twojej stronie bez konieczności ręcznego umieszczania.

Następnie sprawdźmy lokalizację.

Istnieje wiele opcji do wyboru, w tym nagłówek, stopka, menu nawigacyjne i inne. W przypadku przycisku przewijania do góry, „Stopka całej witryny” jest świetną opcją, ponieważ zapewnia dostępność przycisku na wszystkich stronach bez zakłócania zawartości Twojej witryny.

Po wykonaniu tego możesz przełączyć przełącznik na „Aktywny”, aby skrypt zaczął działać natychmiast na Twojej stronie.

A potem nie zapomnij kliknąć przycisku „Zapisz fragment”, aby włączyć skrypt.

Teraz, gdy dodaliśmy jQuery, dodajmy rzeczywisty link do naszej witryny WordPress, który przeniesie użytkowników z powrotem na górę.

Aby to zrobić, po prostu dodaj ten kod HTML do stopki swojej witryny za pomocą WPCode.

Przejdź do Fragmenty kodu » Nagłówek i Stopka i dodaj ten fragment do obszaru „Stopka”:

<a href="#top" id="smoothup" title="Back to top"></a>

Nie zapomnij kliknąć „Zapisz zmiany”, gdy skończysz. Jeśli potrzebujesz pomocy, zapoznaj się z naszym poradnikiem na temat jak dodać kod nagłówka i stopki w WordPress

Jeśli teraz wyświetlisz swoją witrynę, nie zobaczysz żadnego przycisku. Dzieje się tak, ponieważ nasz kod HTML zawiera link, ale brak mu tekstu kotwiczącego. Jest on obecnie całkowicie niewidoczny.

Aby to naprawić, użyjemy ikony obrazu (jak strzałka w górę), aby wyświetlić przycisk powrotu na górę. W tym celu musisz dodać niestandardowy kod CSS.

Możesz dodać kod CSS w arkuszu stylów swojego motywu lub za pomocą WPCode. Użycie WPCode jest bezpieczniejsze, ponieważ nie zostanie utracone po aktualizacji motywu.

Zanim dodasz kod, musisz:

1. Prześlij ikonę obrazu (np. strzałkę) do swojej biblioteki multimediów WordPress. Rozmiar może być dowolny, jaki najlepiej pasuje do Twojej witryny — jako przykład użyliśmy 40x40px. Jeśli użyjesz innego rozmiaru, upewnij się, że zmienisz wartości height i width w poniższym kodzie CSS.
2. Skopiuj adres URL obrazu, który właśnie przesłałeś. Następnie upewnij się, że zastąpisz tymczasowy adres URL obrazu (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) w poniższym fragmencie kodu CSS swoim rzeczywistym adresem URL obrazu.

Zapewni to prawidłowe wyświetlanie przycisku przewijania na górę i efekt obrotu po najechaniu myszką.

Teraz przejdźmy do Fragmenty kodu » + Dodaj fragment.

Następnie możesz najechać kursorem na „Dodaj własny kod (Fragment niestandardowy).”

Kliknij przycisk „Użyj fragmentu”, gdy się pojawi.

W pojawiającym się oknie dialogowym musisz wybrać typ kodu.

Wybierzmy „Fragment CSS”.

W edytorze nadaj swojemu niestandardowemu fragmentowi kodu jasną nazwę, ułatwiającą organizację.

Następnie możesz dodać następujący niestandardowy kod CSS do pola „Podgląd kodu”:

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    text-indent: -9999px;
    display: none;
    background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#smoothup:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}</pre>

Ten kod CSS ustawia stały rozmiar i pozycję ikony, a także dodaje małą animację po najechaniu myszką, która obraca przycisk.

Nie musisz nic edytować w sekcji Wstawianie. Zapewnia to zastosowanie kodu CSS w całej witrynie bez wpływu na inne elementy.

Na koniec przełącz przełącznik, aby aktywować fragment, i kliknij „Zapisz zmiany”.

I to w zasadzie wszystko!

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć swoje płynne przewijanie na górę w akcji:

Dodatkowa wskazówka: Inne subtelne efekty animacji, które angażują odwiedzających

Płynny przycisk powrotu na górę strony to tylko jeden ze sposobów na uczynienie Twojej witryny bardziej przyjazną dla użytkownika. Istnieje wiele innych drobnych efektów animacji, które możesz dodać, aby delikatnie kierować uwagę i sprawić, że przeglądanie Twojej witryny będzie bezproblemowe.

Na przykład efekt paralaksy sprawia, że obrazy tła poruszają się z inną prędkością niż treść, tworząc wrażenie głębi i ruchu. Nowoczesne kreatory stron, takie jak SeedProd, mają tę funkcjonalność wbudowaną, co pozwala na tworzenie tego efektu bez pisania kodu.

To prosty sposób, aby Twoje strony wydawały się bardziej żywe. Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat dodawania efektu paralaksy.

Efekt przełączania wyszukiwania utrzymuje porządek, wyświetlając pasek wyszukiwania dopiero po kliknięciu ikony. Ta funkcja ukrywa pole wprowadzania tekstu wyszukiwania, dopóki użytkownik aktywnie nie kliknie przycisku, aby je ujawnić. Pomaga to zachować mniej zagracony wygląd projektu, jednocześnie ułatwiając odwiedzającym znalezienie tego, czego potrzebują.

Jeśli Twój motyw nie ma tej funkcji, wtyczki takie jak WPCode mogą pomóc. Szczegółowe informacje znajdziesz w naszym przewodniku na temat dodawania efektu przełączania wyszukiwania w WordPress.

A jeśli masz galerię obrazów, efekt lightbox pozwala użytkownikom przeglądać zdjęcia w większym, niezakłóconym wyskakującym okienku, bez opuszczania strony. Ten efekt nakładki wyświetla obrazy w skupionym oknie, przyciemniając resztę strony. To drobny szczegół, ale ma ogromne znaczenie dla każdego, kto uwielbia eksplorować Twoje wizualizacje.

Dodatkowo, wtyczki do galerii, takie jak Envira Gallery, ułatwiają dodanie tej funkcji. Aby to zrobić, możesz zapoznać się z naszym przewodnikiem na temat dodawania galerii w WordPress z efektem lightbox.

Te udogodnienia to nie tylko "miłe dodatki"; pokazują odwiedzającym, że pomyślałeś o ich doświadczeniu. To może sprawić, że będą bardziej skłonni zostać i odkrywać. 🕵️

Często zadawane pytania: Dodawanie efektu przewijania do góry w WordPress przy użyciu jQuery

Zanim zakończymy, oto kilka często zadawanych pytań przez czytelników dotyczących dodawania przycisku przewijania na górę w WordPress.

Czy przycisk przewijania do góry jest konieczny dla każdej witryny?

Nie zawsze. Ale to sprytny dodatek do stron z dużą ilością treści. W długich postach na blogu lub samouczkach oszczędza odwiedzającym kłopot z przewijaniem całej drogi w górę, co sprawia, że ich przeglądanie jest przyjemniejsze.

Czy dodanie przycisku przewijania do góry spowolni moją witrynę?

Nie powinno. Metoda z wtyczką jest lekka i zoptymalizowana pod kątem wydajności, a fragment kodu jQuery jest maleńki. Dlatego nie będzie miała żadnego zauważalnego wpływu na szybkość Twojej witryny.

Gdzie najlepiej umieścić przycisk przewijania do góry?

Większość witryn umieszcza go w prawym dolnym rogu ekranu. To miejsce sprawia, że jest widoczny i łatwo dostępny, nie odwracając uwagi od głównej treści.

Czy mogę użyć linku tekstowego zamiast obrazu dla mojego przycisku?

Absolutnie. Zarówno metoda z wtyczką, jak i niestandardowy kod mogą być skonfigurowane za pomocą prostego linku tekstowego „Powrót na górę” zamiast ikony. Wtyczka oferuje tę opcję od razu, a w przypadku metody z kodem wystarczy dostosować HTML i CSS, aby pasowały do Twojego stylu.

Dalsza lektura: Więcej zasobów na temat motywów WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dodać płynny efekt przewijania do góry na Twojej stronie za pomocą jQuery. Dostosowywanie motywu za pomocą takich funkcji to tylko jeden krok w budowaniu przyjaznej dla użytkownika witryny. Chcesz zagłębić się w motywy WordPress? Te zasoby Ci pomogą:

• Najpopularniejsze i najlepsze motywy WordPress
• Co się dzieje po zmianie motywu WordPress?
• Rzeczy, które MUSISZ zrobić przed zmianą motywu WordPress
• Czym jest framework motywów WordPress i jakie są najlepsze frameworki motywów?
• Jak dostosować swój motyw WordPress
• Jak znaleźć pliki do edycji w motywie WordPress
• Jak profesjonalnie korzystać z narzędzia WordPress Theme Customizer
• Kompletny przewodnik dla początkujących po edycji całych stron w WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.