Technologiczne, Gadżety, Telefony Komórkowe, Pobieranie Aplikacji!

Jak dodać Przewiń do Doładowania & przycisk w dół w WordPressie

Jak dodać przycisk Przewiń do góry i w dół w WordPress

Chcesz dodać płynny efekt przewijania na górę swojej witryny WordPress? Efekt przewijania jest świetny, gdy masz długą stronę i chcesz zapewnić użytkownikom łatwy sposób powrotu na stronę. Pomoże to poprawić komfort użytkowania Twojej witryny.

W tym artykule dowiesz się, jak dodać efekt przewijania w WordPress za pomocą jQuery i wtyczki.

Kliknij poniższy baner, aby kupić hosting WordPress w najniższej cenie i najwyższej prędkości od Ded9.com.

Co to jest gładki zwój i kiedy należy go używać?

Jeśli witryna nie ma przyklejonego menu nagłówka, użytkownicy przewijający do dołu strony lub długie posty WordPress muszą ręcznie przesuwać lub przewijać w górę, aby zobaczyć opcje u góry strony. Potrzebujesz przycisku, który szybko przeniesie użytkowników na górę strony.

Możesz dodać tę funkcję jako prosty link tekstowy bez użycia jQuery, w ten sposób:

^Do góry

Jeśli ustawisz ten tryb, kliknięcie linku przeniesie się w górę bardzo szybko i nie zobaczysz przewijania, co może być denerwujące dla większości ludzi.

Ale dodany przez nas efekt przewijania przyciąga użytkownika przyjemnym efektem wizualnym. Korzystanie z takich elementów może znacznie poprawić komfort korzystania z Twojej witryny.

Zobaczmy, jak możesz dodać płynne przewijanie do powyższych efektów za pomocą wtyczki WordPress i jQuery.

Jak dodać efekt przewijania na górę za pomocą wtyczki WordPress?

Ta metoda jest zalecana dla początkujących, ponieważ możesz dodać efekt przewijania do swojej witryny WordPress bez dotykania ani jednej linii kodu. Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować WPFront Przewiń Najwyższą wtyczkę.

Po aktywacji możesz przejść do Ustawienia »Przewiń w górę z pulpitu nawigacyjnego WordPress. Tutaj możesz skonfigurować wtyczkę i dostosować efekt płynnego przewijania.

Najpierw musisz kliknąć pole „Włączone”, aby włączyć przycisk przewijania w górę w swojej witrynie. Następnie zobaczysz opcje edycji przesunięcia przewijania, rozmiaru przycisku, krycia, czasu zanikania, czasu przewijania i innych.

Jeśli przewiniesz w dół, znajdziesz więcej opcji, takich jak edycja czasu automatycznego ukrywania, włączenie opcji ukrywania przycisku na małych urządzeniach i ukrywanie go na stronie wp-admin.

Możesz także edytować działanie przycisku po kliknięciu. Domyślnie trafia na górę strony, ale możesz zmienić go na konkretny element w poście lub nawet link do strony.

Istnieje również możliwość zmiany lokalizacji przycisku. Domyślnie jest wyświetlany w prawym dolnym rogu ekranu, ale możesz przenieść go także w dowolne inne rogi.

Wtyczka Scroll Top udostępnia również filtry umożliwiające wyświetlanie przycisku przewijania w górę tylko na wybranych stronach.

Zwykle pojawia się na wszystkich stronach Twojego bloga WordPress. Możesz jednak przejść do sekcji Wyświetlanie na stronach i wybrać, gdzie chcesz wyświetlać przewijanie, aby uzyskać maksymalny efekt.

Wtyczka oferuje również gotowe projekty przycisków, spośród których możesz wybierać. Powinieneś być w stanie łatwo znaleźć projekt pasujący do Twojej witryny.

Jeśli nie możesz znaleźć odpowiedniego obrazu przycisku, istnieje możliwość przesłania niestandardowego obrazu z biblioteki multimediów WordPress.

Kiedy skończysz, kliknij przycisk Zapisz zmiany. Możesz teraz odwiedzić swoją witrynę i zobaczyć, jak przycisk przewijania w górę działa.

Dodanie płynnego efektu przewijania za pomocą jQuery w WordPress

Ta metoda nie jest zalecana dla początkujących. Jest odpowiedni dla osób, które czują się komfortowo w edytowaniu motywów, ponieważ wymaga dodania kodu do swojej witryny.

Użyjemy jQuery, trochę CSS i linii kodu HTML w motywie WordPress, aby dodać efekt płynnego przewijania.

Najpierw otwórz edytor tekstu, taki jak Notatnik, i utwórz plik. Śmiało, zapisz go jako smoothscroll.js. W kolejnym kroku musisz skopiować i wkleić ten kod do pliku:

jQuery(dokument).ready(function($){ $(window).scroll(function(){ if ($(this).scrollTop() < 200) { $('#smoothup').fadeOut(); } else { $('#wygładzenie').fadeIn(); } }); $('#wygładzenie').on('kliknięcie', funkcja(){ $('html, treść').animate({scrollTop: 0}, 'szybko' zwróć fałsz; });

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

To skrypt jQuery, który dodaje efekt płynnego przewijania do przycisku przenoszącego użytkowników na górę strony.

Wszystko, co musisz zrobić, to załadować plik smoothscroll.js do swojego motywu. W tym celu kolejkujemy skrypt w WordPressie.

Następnie skopiuj i wklej ten kod do plikufunctions.php motywu:

wp_enqueue_script( ‘smoothup’, get_template_directory_uri() ‘https://cdn2.wpbeginner.com/js/smoothscroll.js’, array( ‘jquery’ ), ”, true);

W powyższym kodzie powiedzieliśmy WordPressowi, aby załadował nasz skrypt i bibliotekę jQuery, ponieważ od tego zależy nasza wtyczka.

Teraz, gdy dodaliśmy część jQuery, dodajmy rzeczywisty link do naszej witryny WordPress, który przekieruje użytkowników z powrotem na górę. Umieść ten kod HTML w dowolnym miejscu pliku footer.php motywu.

Być może zauważyłeś, że kod HTML zawiera łącze, ale nie zawiera tekstu. Dzieje się tak dlatego, że używamy ikony obrazu ze strzałką w górę do reprezentowania przycisku powrotu na górę.

W tym przykładzie używamy ikony o wymiarach 40x40px. Po prostu dodaj następujący niestandardowy CSS do stylizacji swojego motywu.

W tym kodzie używamy ikony obrazu jako obrazu tła przycisku i umieszczamy ją w ustalonej pozycji. Dodaliśmy także małą animację CSS, która obraca przycisk, gdy użytkownik najedzie na niego myszką.

#smoothup {wysokość: 40px; szerokość: 40px; pozycja:stała; dół: 50 pikseli; po prawej: 100 pikseli; wcięcie tekstu: -9999px; Nie wyświetla się; tło: url(“https://www.example.com/wp-content/uploads/2013/07/top_icon.png”); -czas przejścia-webkit: 0,4 s; -moz-czas trwania przejścia: 0,4 s; czas przejścia: 0,4 s; } #smoothup:hover { -webkit-transform: obrót (360 stopni) } tło: url(”) bez powtarzania; }

W powyższym CSS pamiętaj o zastąpieniu https://www.example.com/wp-content/uploads/2013/07/top_icon.png adresem URL obrazu, którego chcesz użyć. Możesz przesłać ikonę obrazu za pomocą narzędzia do przesyłania multimediów WordPress, skopiować adres URL obrazu, a następnie wkleić go do kodu.

Mamy nadzieję, że ten artykuł pomógł Ci dodać efekt przewijania w górę do Twojej witryny WordPress za pomocą wtyczki i kodu jQuery.

Bezpłatne pobieranie motywów WordPressPobierz bezpłatne motywy WordPress PremiumPobierz motywy WordPressPobierz najlepsze motywy WordPress do pobrania za darmodarmowy kurs on-linepobierz oprogramowanie HuaweiPobieranie premium motywów WordPresspobierz płatny kurs Udemy za darmo