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. Powinieneś go używać, gdy chcesz zapewnić użytkownikom mniej szokujący sposób nawigacji po długich stronach, zwłaszcza w przypadku funkcji takich jak przyciski „powrót na górę”.

Chyba że witryna ma przyklejone menu nagłówka, użytkownicy przewijający długi post lub stronę WordPress do samego dołu muszą ręcznie przesunąć palcem lub przewinąć drogę z powrotem na górę, aby nawigować po witrynie.

To może być prawdziwa irytacja, a użytkownicy często po prostu naciskają przycisk wstecz i wychodzą. Dlatego potrzebujesz przycisku, aby szybko wysłać użytkowników na górę wpisu 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 wizualnie przyjemnym 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:

• Wskazówka 1: Dodawanie płynnego efektu przewijania do góry za pomocą wtyczki WordPress (łatwe)
• Wskazówka 2: Dodawanie efektu płynnego przewijania na górę za pomocą jQuery w WordPress (zaawansowane)
• Dodatkowa wskazówka: Inne subtelne efekty animacji, które angażują odwiedzających
• FAQ: Dodawanie efektu przewijania na górę w WordPress za pomocą jQuery
• Dalsza lektura: Więcej zasobów na temat motywów WordPress

Bez dalszych ceregieli, zacznijmy od pierwszej metody.

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.

Najpierw musisz zainstalować i aktywować wtyczkę 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 tak, aby przewijał do konkretnego elementu w poście lub 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 przycisku obrazkowego, który by Ci odpowiadał, istnieje opcja przesłania niestandardowego obrazu z biblioteki multimediów WordPress.

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

Teraz możesz odwiedzić swoją stronę internetową WordPress, aby zobaczyć przycisk przewijania na górę w akcji.

Dodawanie efektu płynnego przewijania na górę za pomocą jQuery w WordPress

Zanim zaczniemy, pamiętaj, że ta metoda nie jest zalecana dla początkujących. Jest odpowiednia dla osób, które czują się komfortowo edytując motywy, ponieważ obejmuje dodawanie kodu do Twojej strony internetowej.

Aby dodać efekt płynnego przewijania do góry, użyjemy jQuery, trochę CSS i pojedynczej linii kodu HTML w Twoim motywie WordPress.

Najpierw otwórz edytor tekstu, taki jak Notatnik, i utwórz plik. Zapisz go jako smoothscroll.js.

Następnie musisz skopiować i wkleić ten kod do pliku:

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 kod to skrypt jQuery, który doda efekt płynnego przewijania do przycisku, przenoszącego użytkowników na górę strony.

Następnie możesz zapisać plik i przesłać go do folderu /js/ w katalogu motywu WordPress.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat jak używać FTP do przesyłania plików do WordPress.

Jeśli Twój motyw nie ma katalogu /js/, możesz go utworzyć i przesłać do niego plik smoothscroll.js.

Możesz również zapoznać się z naszym przewodnikiem po strukturze plików i katalogów WordPress, aby uzyskać więcej informacji.

Następną rzeczą, którą musisz zrobić, jest załadowanie pliku smoothscroll.js w swoim motywie.

Aby to zrobić, dodamy skrypt w WordPress, po prostu kopiując i wklejając ten kod do pliku functions.php swojego motywu.

Jednak nie zalecamy bezpośredniego edytowania plików motywu, ponieważ najmniejszy błąd może zepsuć Twoją witrynę.

Zamiast tego możesz użyć wtyczki takiej jak WPCode, najlepsza wtyczka fragmentów kodu dla WordPress, i postępować zgodnie z naszym tutorialem na temat dodawania niestandardowych fragmentów kodu w WordPress:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Powyższy kod mówi WordPressowi, aby załadował nasz skrypt i bibliotekę jQuery, ponieważ nasza wtyczka od nich zależy.

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 wklej ten kod HTML w dowolnym miejscu pliku footer.php swojego motywu za pomocą WPCode.

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

Jeśli potrzebujesz pomocy, zapoznaj się z naszym samouczkiem na temat jak dodać kod nagłówka i stopki w WordPress

Możesz zauważyć, że kod HTML zawiera link, ale nie tekst kotwicy. Dzieje się tak, ponieważ użyjemy ikony obrazu ze strzałką w górę, aby wyświetlić przycisk powrotu na górę.

W tym przykładzie używamy ikony 40x40px. Po prostu dodaj poniższy niestandardowy CSS do arkusza stylów swojego motywu.

W tym kodzie używamy ikony obrazu jako tła przycisku i ustawiamy ją w stałej pozycji. Dodaliśmy również małą animację CSS, która obraca przycisk, gdy użytkownik najeżdża na niego myszą:

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
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) }
background: url('') no-repeat;
}

W powyższym CSS upewnij się, że zastąpiłeś https://www.example.com/wp-content/uploads/2013/07/top_icon.png adresem URL obrazu, którego chcesz użyć.

Możesz przesłać własną ikonę obrazu za pomocą narzędzia do przesyłania multimediów WordPress, skopiować adres URL obrazu, a następnie wkleić go do kodu.

I to w zasadzie wszystko!

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.

To prosty sposób, aby Twoje strony wydawały się bardziej żywe. Szczegółowe instrukcje znajdziesz w naszym przewodniku jak dodać efekt paralaksy.

Efekt przełączania wyszukiwania utrzymuje porządek, wyświetlając pasek wyszukiwania dopiero wtedy, gdy ktoś kliknie ikonę. Pomaga to Twojemu projektowi wyglądać mniej zagraconym, jednocześnie ułatwiając odwiedzającym znalezienie tego, czego potrzebują.

Jeśli Twój motyw nie ma tej funkcji wbudowanej, 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 ludziom oglądać zdjęcia w większym, nieodwracającym uwagi wyskakującym okienku, bez opuszczania strony. To drobny szczegół, ale ma ogromne znaczenie dla każdego, kto uwielbia przeglądać Twoje wizualizacje.

Ponadto wtyczki galerii, takie jak Envira Gallery, ułatwiają dodanie tej funkcji. Aby to zrobić, możesz skorzystać z naszego przewodnika po tym, jak dodać galerię 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 mądry dodatek do stron z dużą ilością treści. W długich wpisach na blogu lub samouczkach, oszczędza odwiedzającym kłopot ze przewijaniem z powrotem do góry, co sprawia, że ich przeglądanie jest przyjemniejsze.

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

Nie powinno. Metoda wtyczki jest lekka i zoptymalizowana pod kątem wydajności, a fragment kodu jQuery jest maleńki. Zatem nie będzie miał 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 wtyczki, jak i niestandardowego kodu 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 kodu 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 na górę na Twojej stronie za pomocą jQuery. 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.