How (And Why) to Add Infinite Scrolling to Client Websites

gru 31, 2021
admin

Gdy projektujesz witryny WordPress dla swoich klientów, użyteczność jest ważnym czynnikiem do rozważenia. Jednak niektóre z technik stosowanych w celu poprawy User Experience (UX) na jednej stronie, może nie być najlepsze metody dla innego.

Niekończące przewijanie jest jedna taktyka deweloperów i projektantów używać do utrzymania odwiedzających witrynę zaangażowanych. Podczas gdy niektórzy uważają, że może to zaszkodzić użyteczności stron internetowych, istnieje wiele przypadków, w których może to być korzystne.

W tym poście wyjaśnimy, czym jest nieskończone przewijanie i jakie typy stron mogą z niego skorzystać. Następnie przeprowadzimy Cię przez trzy metody, których możesz użyć, aby dodać tę funkcjonalność do stron swoich klientów. Zaczynajmy!

Wprowadzenie do nieskończonego przewijania

Nieskończone przewijanie jest techniką projektowania stron internetowych, w której nowa zawartość jest automatycznie ładowana, gdy odwiedzający osiągnie dół strony. Rezultatem jest stały, pozornie niekończący się strumień treści.

Popularne przykłady stron, które używają nieskończonego przewijania to sieci społecznościowe, takie jak Facebook, Twitter i Pinterest. Można je również zobaczyć na blogach i stronach rozrywkowych, takich jak Mashable i Buzzfeed:

Istnieje wiele korzyści z włączenia nieskończonego przewijania na tych stronach. Najbardziej oczywiste jest to, że oszczędza czas i zapewnia użytkownikom więcej treści bez potrzeby klikania na przycisk Czytaj więcej lub linki paginacji.

Z mniejszą ilością elementów rozpraszających, automatyczne podawanie treści może również oznaczać, że użytkownicy pozostają dłużej, co może przekładać się na wyższe wskaźniki zaangażowania. Plus, ta funkcja jest przyjazna dla urządzeń mobilnych.

Jednakże nie każda strona nadaje się do nieskończonego przewijania. Na przykład, jeśli masz stronę zorientowaną na cel, taką jak sklep e-commerce, może to utrudnić użytkownikom znalezienie tego, czego szukają. Może to również wpłynąć na wydajność witryny, jeśli nie jest prawidłowo zoptymalizowana.

Z drugiej strony, jeśli masz witrynę z liniową strukturą, może to być bardzo korzystne. Nieskończone przewijanie może być szczególnie przydatne dla celów opowiadania historii, czy to poprzez długie posty na blogu lub treści wizualne, takie jak obrazy.

Jak dodać nieskończone przewijanie do stron klientów (3 metody)

Jeśli tworzysz strony klientów, które są oparte na treści, możesz rozważyć dodanie funkcji nieskończonego przewijania. Rzućmy okiem na trzy metody, których możesz użyć, aby to zrobić.

Use an Infinite Scroll Plugin

Jedną z najszybszych i najprostszych metod, których możesz użyć, aby dodać nieskończone przewijanie do stron internetowych swoich klientów jest użycie wtyczki. Niektóre z nich, takie jak Jetpack, zawierają funkcje do implementacji tego elementu projektu.

Nie ma zbyt wielu samodzielnych wtyczek do nieskończonego przewijania. Jednak popularną, którą polecamy jest Ajax Load More:

Ta wtyczka jest darmowa i łatwa w użyciu, choć wymaga pewnej wiedzy programistycznej. Pozwala dodać nieskończone przewijanie dla leniwie ładujących się postów, stron i komentarzy.

Po zainstalowaniu i aktywowaniu wtyczki możesz skonfigurować odpowiednie parametry zapytań WordPress w oparciu o różne typy zawartości. Na stronie Ustawienia możesz dostosować i dostosować sposób, w jaki Ajax Load More zachowuje się w witrynach klientów. Na przykład możesz dodać swój własny niestandardowy CSS:

Wtyczka zawiera również Shortcode Builder, którego możesz użyć do szybkiego modyfikowania stron i postów z edytora treści lub plików szablonów. Inną cechą wtyczki, którą warto sprawdzić, jest jej Repeater Templates:

Możesz stworzyć własny szablon repeater i dostosować sposób działania HTML i PHP w ramach shortcode. Możesz także uwzględnić wiele instancji wtyczki Ajax Load More na pojedynczym poście, stronie lub szablonie.

Choć darmowa wtyczka zapewnia wiele funkcji nieskończonego przewijania, istnieje również wersja premium, która odblokowuje dostęp do większej liczby szablonów. Aby dowiedzieć się więcej, możesz sprawdzić dokumentację i stronę wsparcia Ajax Load More.

Wybierz motywy z wbudowanym nieskończonym przewijaniem

Jeśli nie chcesz dodawać kolejnej wtyczki do witryn swoich klientów, nie martw się. Możesz osiągnąć ten sam efekt używając motywu, który ma wbudowane nieskończone przewijanie.

Oczywiście, ta droga nie jest najbardziej praktyczna dla istniejących witryn. Zmiana motywu strony często wymaga obszernego rebrandingu. To nie jest dokładnie warte kłopotów tylko po to, aby uzyskać dostęp do nieskończonej funkcji przewijania – zwłaszcza biorąc pod uwagę, że można to osiągnąć za pomocą innych metod.

Istnieje zdrowa liczba motywów WordPress, które zawierają tę funkcjonalność. Możesz przeglądać katalog motywów WordPress i wyszukiwać według funkcji nieskończonego przewijania:

Choć sam motyw może być darmowy, pamiętaj, że możesz potrzebować uaktualnienia do wersji premium, aby używać nieskończonego przewijania. Istnieją jednak takie, które oferują tę funkcjonalność bez żadnych kosztów, takie jak Minimal Dark.

Gdy znajdziesz motyw, który Ci się podoba i zawiera tę funkcję, pobierz i zainstaluj go tak, jak każdy inny motyw. Większość z nich będzie zawierała tę funkcję w Menedżerze motywów.

Na przykład, z Minimal Dark, możesz znaleźć opcję nieskończonego przewijania przechodząc do Wygląd > Dostosuj > Opcje motywu > Opcje stronicowania:

Jeśli chcesz bardziej zaawansowanych funkcji, możesz rozważyć motyw premium. Theme Forest ma szeroki wybór, który zawiera nieskończone przewijanie.

Wskazówki do aktywacji i używania funkcji nieskończonego przewijania będą zależały od motywu, którego używasz. Dlatego najlepiej jest sprawdzić dokumentację dewelopera dla wskazówek.

Ręcznie dodaj kod do swojej witryny

Trzecią metodą implementacji nieskończonego przewijania – i jedną, która może być preferowana, jeśli jesteś doświadczonym deweloperem – jest ręczne dodanie kodu do swojej witryny. Ta opcja daje ci większą kontrolę i eliminuje potrzebę instalowania dodatkowej wtyczki.

Plus, możesz użyć tego kodu na stronach z motywami, które nie mają wbudowanego nieskończonego przewijania. Pierwszym krokiem jest aktywacja funkcji poprzez plik functions.php twojego motywu.

Aby to zrobić, dodaj następujący kod do pliku:

Gdy to jest kompletne, następnym krokiem jest ustawienie funkcji Render Parameter. Jest to część kodu, która zajmuje się ładowaniem postów do nieskończonego przewijania w pętli.

Aby posty były ładowane w sposób ciągły, dodaj funkcję mytheme_infite_scroll_init do pliku functions.php twojego motywu w następujący sposób:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

Po dodaniu tych dwóch fragmentów powinieneś być gotowy do pracy. Jednakże, jeśli to nie działa, być może będziesz musiał zmienić motyw strony. Starsze, przestarzałe produkty mogą nie obsługiwać nieskończonego przewijania w ogóle.

Wniosek

Nieskończone przewijanie nie jest dla każdego. Istnieją jednak pewne strony internetowe, takie jak blogi i inne publikacje online o dużej zawartości, gdzie może ono zapewnić lepszy UX, a nawet zwiększyć zaangażowanie.

W tym artykule omówiliśmy trzy metody, których możesz użyć, aby dodać nieskończone przewijanie do witryn swoich klientów:

  1. Użyj wtyczki do nieskończonego przewijania.
  2. Wybierz motywy z wbudowanym nieskończonym przewijaniem.
  3. Ręcznie dodaj kod do swojej witryny.

.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.