Przewodnik programisty Dodaj płynne przewijanie do najlepszego efektu w WordPress za pomocą JQuery

Opublikowany: 2022-06-03

Wszyscy kochamy WordPressa za jego płynność i to, że ułatwia korzystanie z wydajnego systemu zarządzania treścią.

To nie przesada, ale łatwe i przystępne tworzenie stron internetowych jest błogosławieństwem dla nowych webmasterów. WordPress ma dziesiątki funkcji, które pozwalają różnym właścicielom witryn zapewnić swoim użytkownikom super płynny i interaktywny interfejs.

Ci, którzy są nowicjuszami w WordPressie, mogą zapoznać się z samouczkami WordPress dotyczącymi zasobów takich jak The Blog Starter, który zawiera przewodnik krok po kroku, jak założyć bloga i nim zarządzać.

Jeśli skupiasz się tylko na treści w swojej witrynie, chcielibyśmy powiedzieć, że responsywna i atrakcyjna wizualnie witryna jest równie ważna jak treść.

Jeśli masz już witrynę internetową i nie wiesz od czego zacząć, poświęć trochę czasu i zainwestuj 30 minut każdego dnia, aby przemyśleć wygląd i interfejs swojej witryny. Zaufaj nam, ponieważ stopniowo znajdziesz elementy, które musisz naprawić. Gdy doładujesz swoją witrynę wspaniałymi działaniami wizualnymi, liczba rozmów wzrośnie.

A jeśli jesteś kimś, kto już zainwestował w zapewnienie użytkownikom bezproblemowego odwiedzania Twojej witryny, Kudos dla Ciebie! Cóż, przygotowaliśmy świetny samouczek dla wszystkich, którzy chcą jeszcze bardziej wprowadzić zmiany w swojej witrynie i poprawić ogólną wydajność wizualną swojej witryny.

W tym poście na blogu poprowadzimy Cię o dodaniu Smooth Scroll do najlepszego efektu w WordPress za pomocą jQuery.

Dlaczego warto korzystać z Smooth Scroll?

Zwykle, gdy strony internetowe zawierają długie artykuły, a użytkownik je przegląda, dotarcie do końca strony może być dla niego frustrujące.

Tak więc, jeśli Twoja witryna może zapewnić płynne przewijanie do góry za pomocą jednego kliknięcia, czytelnik uzna, że ​​Twoja witryna jest bezproblemowa i super gładka.

Tak więc, jeśli jesteś właścicielem witryny lub marketerem cyfrowym, musisz być oportunistą i upewnić się, że zrobisz wszystko, aby przyciągnąć dodatkową i organiczną publiczność do swojej witryny.

Sposoby dodania płynnego przewijania do najlepszego efektu w WordPress

Aby móc dodać płynne przewijanie do To Effect w WordPress, możesz skorzystać z dowolnego z poniższych sposobów:

1. Korzystanie z kodu napisanego w jQuery

2. Korzystanie z wtyczki

Zwykle wolimy kodować od wtyczek, ponieważ nie pozostawia to miejsca na czkawkę, jeśli zostanie to zrobione we właściwy sposób. Wtyczki mogą czasami zmniejszyć szybkość ładowania witryny, ale kodowanie może pomóc w dodaniu pewnych dostosowań bez wpływu na szybkość. W szczególności w tym samouczku wyjaśnimy proces kodowania.

Jak dodać efekt Smooth Scroll do Top w WordPress z kodowaniem?

Aby dodać płynne przewijanie do góry na swojej stronie WordPress za pomocą kodowania, musisz wykonać następujące cztery kroki:

  1. Utwórz plik „Smoothscrolleffect.js”.
  2. Dołącz funkcję „Smoothscrolleffect.js” do swojego motywu.
  3. Dodaj ikonę w motywie
  4. Powiązanie efektu ze stronami internetowymi

Gdy skończysz z tymi 4 krokami, możesz zdobyć więcej czytelników. Jeśli jesteś programistą, możesz tworzyć własne skrypty zgodnie z własnymi wymaganiami.

Dla nie-programistów dokładnie wyjaśniliśmy każdy krok i dodaliśmy wymagany kod. Musisz więc tylko przeczytać kroki i odpowiednio je wykonać.

Krok 1: Utwórz plik „Smoothscrolleffect.js”

To jest najważniejszy plik, który utworzysz na tym etapie. Jeśli nie uda Ci się skutecznie wdrożyć tego kroku, możesz nie osiągnąć pełnego płynnego przewijania.

W tym kroku utworzymy plik „.js” (jQuery), który zawiera funkcję, która doda płynne przewijanie do efektu Top. Postępuj zgodnie z instrukcjami, aby utworzyć plik „.js” i przesłać go do katalogu witryny.

  1. Utwórz nowy plik notatnika w swoim systemie.
  2. Skopiuj następujący kod:

jQuery(dokument).gotowy(funkcja($){

$(okno).scroll(funkcja(){

if ($(this).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} w przeciwnym razie {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('klik', function(){

$('html, body').animate({scrollTop:0}, 'szybko');

zwróć fałsz;

});

});

  1. Wklej kod w pliku notatnika.
  2. Zapisz go pod dowolną nazwą, ale upewnij się, że rozszerzenie to „.js”.
  3. Zaloguj się do cPanel swojej witryny.
  4. Przejdź do katalogu witryny „/js/”

Uwaga: Jeśli Twoja witryna nie ma katalogu js, musisz go utworzyć.

  1. Prześlij plik „.js”, który utworzyłeś w swoim systemie w katalogu.

Krok 2: Dołącz płynny zwój do motywu

W powyższym kroku utworzyliśmy plik (z funkcją płynnego przewijania) w katalogu strony internetowej i w tym kroku połączymy funkcję płynnego przewijania z naszym motywem. W tym celu wykonaj następujące czynności:

Przejdź do edytora motywów w panelu administratora WordPress. Otwórz function.php do edycji. i wklej w nim następujący kod.

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

Kliknij „Zapisz zmiany”.

Krok 3. Dodaj ikonę do motywu

Oczywiście chcesz dodać ikonę do swojej witryny, dzięki której możesz zaoferować czytelnikowi przewijanie do góry. Poza tym musisz uczynić go bardziej interaktywnym i responsywnym. Możesz to zrobić za pomocą CSS w następujący sposób:

  1. Przejdź do stylesheet.css swojego motywu w edytorze motywów.
  2. Skopiuj następujący kod.

#smoothup {

wysokość: 40px;

szerokość: 40px;

Pozycja:stała;

Dół:50px;

Po prawej:100px;

Wcięcie tekstu:-9999px;

Nie wyświetla się;

Background:url(„http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-czas trwania przejścia na webkit: 0,4 s;

-moz-czas trwania przejścia: 0,4s; czas trwania przejścia: 0,4 s;

}

#smoothup:najedź {

-transformacja webkit: rotacja(360deg) }

tło: url() bez powtórzeń;

}

  1. Wklej go w arkuszu stylów swojego motywu.
  2. Kliknij „Zapisz zmiany”.

Tutaj możesz zmienić ikonę zgodnie ze swoimi wymaganiami; użyliśmy referencji. Aby zmienić obraz, możesz go wgrać na swoją stronę i wkleić do pola Tło: URL w powyższym kodzie.

Krok 4: Łączenie płynnego przewijania ze stronami internetowymi.

Teraz, gdy stworzyliśmy plik „.js”, wrzuciliśmy go do katalogu witryny, dołączyliśmy go do motywu i stworzyliśmy ikonę efektu, czas na ostatni krok. Połączymy teraz efekt płynnego przewijania ze wszystkimi stronami w witrynie. Wykonaj kroki:

  1. Otwórz footer.php w edytorze motywów.
  2. Skopiuj następujący kod:
    1. <a href=”#top” id=”smoothup” title=”Powrót do góry”></a>
  3. Wklej go na stronie footer.php.
  4. Kliknij „Zapisz zmiany”.

Gratulacje! Udało Ci się dodać górny efekt płynnego przewijania do swojej witryny WordPress za pomocą jQuery.

Wniosek

Mamy nadzieję, że powyższy samouczek skutecznie pomoże Ci dodać efekt „smooth scroll to Top” w WordPressie za pomocą JQuery i zainteresuje użytkowników doskonałą nawigacją w witrynie.

Jeśli napotkasz jakiekolwiek problemy z wykonaniem powyższych kroków, daj nam znać, upuszczając komentarz poniżej.