Jak dodać nieskończony przewijanie do WordPress/WooCommerce

Czy chcesz zaimplementować nieskończone przewijanie w swojej witrynie, ale nie wiesz jak? Trafiłeś we właściwe miejsce! W tym artykule pokażemy, jak dodać nieskończone przewijanie do dowolnej witryny WordPress i sklepu WooCommerce .

Zanim zagłębimy się w to, najpierw zrozummy różnice między paginacją a nieskończonym przewijaniem.

Różnica między paginacją a nieskończonym przewijaniem

Paginacja to system nawigacji oparty na podziale treści na zestawy stron, gdzie każda strona zawiera ustaloną liczbę elementów. Aby poruszać się między stronami, musisz kliknąć numer strony lub poprzednią/następną, a przeglądarka przeniesie Cię do tej konkretnej strony.

Najczęstszym przykładem paginacji są wyniki wyszukiwania Google. Kiedy szukasz czegoś w Google, zwraca listę odpowiednich wyników, które są podzielone na różne strony. Jeśli przewiniesz w dół strony wyszukiwania, zobaczysz listę ponumerowanych linków prowadzących do każdej strony. Stamtąd możesz kliknąć dowolny numer, aby przejść do tej konkretnej strony.

Z drugiej strony Infinite scroll ma inne podejście do nawigacji. Zamiast dzielić zawartość na zestaw stron, używa AJAX do wyświetlania całej zawartości na jednej stronie. Początkowo wyświetlana jest niewielka liczba elementów, podczas gdy więcej treści jest ładowanych automatycznie, gdy użytkownik kontynuuje przewijanie w dół. Ideą nieskończonego przewijania jest to, że niezależnie od tego, ile użytkownicy przewijają, zawsze zobaczą jakąś treść.

Najlepszymi przykładami nieskończonego przewijania są serwisy społecznościowe, takie jak Facebook, Instagram, Twitter i tak dalej. Przeglądając swój kanał, zobaczysz, że nigdy się nie kończy i zawsze coś Ci pokazuje. Kanał ładuje więcej postów, dopóki przewijasz w dół. Tak działa nieskończony zwój.

Zarówno paginacja, jak i nieskończony przewijanie są obecnie bardzo popularne, ale nie ma lepszej metody. Oba mają swoje plusy i minusy, więc będą bardziej odpowiednie dla różnych scenariuszy. W zależności od wymagań i warunków, możesz preferować jedno od drugiego.

To prowadzi nas do pytania, kiedy dodawanie nieskończonego przewijania do WordPressa ma sens? Kiedy jest to bardziej odpowiednie niż paginacja? Spójrzmy.

Kiedy używać nieskończonego przewijania?

Korzystanie z nieskończonego przewijania lub paginacji jako preferowanej metody nawigacji jest czysto subiektywne. Tu nie ma dobra ani zła i to całkowicie zależy od Twoich potrzeb i upodobań. Ponieważ jednak obie metody są szeroko stosowane, odwiedzający są przyzwyczajeni do pewnych rzeczy i oczekują pewnych zachowań w zależności od witryny. Dlatego wybór odpowiedniego systemu nawigacyjnego może przynieść Ci ogromne korzyści.

Teraz, który z nich jest dla Ciebie odpowiedni? To w dużej mierze zależy od Twoich wymagań i dlatego tylko Ty możesz lepiej przeanalizować swoją sytuację, zważyć zalety i wady każdego z nich i podjąć tę decyzję.

Na przykład witryny eCommerce, które zawierają tysiące produktów, są lepiej wyposażone w paginację. Ułatwia to nawigację między stronami zamiast bez końca przewijać ogromny ekwipunek. Na przykład Amazon, największa platforma eCommerce na świecie, wykorzystuje paginację do celów nawigacji.

Wręcz przeciwnie, jeśli Twój sklep zawiera stosunkowo mniej produktów uporządkowanych w kategorie, nieskończony zwój może być dla Ciebie dobrą opcją. Ponieważ każda kategoria będzie miała mniejszą liczbę przedmiotów, znalezienie produktów nie będzie dużym problemem dla kupujących. Może być również wygodniejsze dla użytkowników mobilnych, ponieważ przewijanie jest łatwiejsze i bardziej płynne niż klikanie małych numerów stron.

Z drugiej strony strona bloga może bardziej skorzystać na nieskończonym przewijaniu. Dzięki nieskończonemu przewijaniu posty będą ładować się automatycznie, więc użytkownicy nie będą musieli podejmować żadnych dodatkowych kroków, aby odkryć więcej treści. Dzięki temu użytkownicy są zaangażowani, dzięki czemu dłużej pozostaną na stronie.

To tylko kilka przykładów rzeczy, które powinieneś rozważyć, aby podjąć decyzję. Jak wspomniano wcześniej, nie ma dobrego ani złego wyboru, po prostu wybierz to, co najlepiej pasuje do Twojej konkretnej sytuacji.

Dla zainteresowanych nieskończonym przewijaniem, rzućmy okiem na jego zalety i wady.

Korzyści z nieskończonego przewijania

Po pierwsze, nieskończone przewijanie poprawia wrażenia użytkownika, wykorzystując AJAX do ładowania całej zawartości na tej samej stronie, dzięki czemu użytkownicy nie muszą klikać numerów stron, aby przechodzić między stronami i czekać na ich ponowne załadowanie za każdym razem.

Podobnie nieskończone przewijanie zwiększa zaangażowanie użytkowników i sprawia, że ​​odwiedzający spędzają więcej czasu w Twojej witrynie. Dzięki nieskończonemu przewijaniu treść ładuje się automatycznie, gdy użytkownik przewija, stale dostarczając użytkownikom interesujące treści, które wzbudzają ich zainteresowanie i utrzymują ich na stronie.

Lepsze wrażenia użytkownika i większe zaangażowanie pomagają również zmniejszyć współczynnik odrzuceń. Wyszukiwarki uważają to za oznakę dobrej treści, która pomaga poprawić SEO witryny.

Co więcej, nieskończone przewijanie jest zwykle preferowane przez użytkowników mobilnych. Przewijanie w dół na urządzeniach z ekranem dotykowym jest o wiele łatwiejsze i bardziej intuicyjne niż klikanie małych numerów stron. Sprawia również, że przeglądanie jest szybsze, ponieważ użytkownicy nie muszą za każdym razem czekać na ponowne wczytanie stron.

To są główne zalety nieskończonego przewijania, ale są też pewne wady. Przyjrzyjmy się niektórym niedogodnościom nieskończonego przewijania.

Wady nieskończonego przewijania

Jeśli masz sklep z tysiącami produktów lub witrynę z mnóstwem postów, nawigacja może być trudna z nieskończonym przewijaniem. Jest to szczególnie ważne, gdy odwiedzający są zainteresowani produktem lub postem znajdującym się na dole listy. Znalezienie go może wymagać sporo przewijania, co może negatywnie wpłynąć na wrażenia użytkownika.

Co więcej, przy nieskończonym przewijaniu stopka witryny może stać się niedostępna. Zwykle stopka strony internetowej zawiera przydatne informacje i linki. Jeśli jest nieosiągalny, użytkownik nie będzie mógł zobaczyć tych informacji i przegapić ważnych szczegółów.

Co więcej, nieskończone przewijanie zajmuje dużo pamięci, ponieważ zawartość ładuje się na tej samej stronie. W najgorszych przypadkach może to spowodować wyczerpanie pamięci, a nawet awarię serwera. Tak więc, jeśli chcesz używać nieskończonego przewijania, powinieneś użyć zarządzanego hostingu, aby uniknąć wyczerpania pamięci.

To wszystko za i przeciw. Zobaczmy teraz, jak zaimplementować nieskończone przewijanie w witrynie WordPress.

Jak dodać nieskończony przewijanie do WordPressa

Najłatwiejszym sposobem na zaimplementowanie nieskończonego przewijania w witrynie jest użycie dedykowanej wtyczki. Istnieje wiele narzędzi, z których możesz skorzystać, ale w tym samouczku użyjemy AJAX Load More , opracowanego przez Darrena Cooneya. Jest to narzędzie freemium, które pozwala dodawać nieskończone przewijanie do dowolnego sklepu WooCommerce i witryny WordPress.

Zainstaluj i skonfiguruj AJAX Załaduj więcej wtyczki

Najpierw musisz zainstalować wtyczkę. Przejdź do pulpitu administracyjnego WP i przejdź do Wtyczki> Dodaj nowy. Wyszukaj AJAX Load More i naciśnij przycisk Zainstaluj teraz . Po zainstalowaniu wtyczki naciśnij Aktywuj .

Następnie przejdź do AJAX Load More> Settings w lewej kolumnie, aby skonfigurować wtyczkę. Tutaj możesz określić parametry domyślne. Możesz ustawić domyślny typ kontenera, klasy kontenera, styl przycisku/ładowania i nie tylko.

Teraz, gdy zainstalowaliśmy i skonfigurowaliśmy narzędzie, nadszedł czas, aby dodać nieskończone przewijanie do witryny WordPress lub WooCommerce.

Dodaj nieskończony zwój do WooCommerce

W tej sekcji dodamy funkcję nieskończonego przewijania do sklepu WooCommerce. Proces implementacji go na WordPressie jest bardzo podobny i został opisany poniżej. Jeśli chcesz po prostu dołączyć nieskończone przewijanie do WordPressa, możesz pominąć tę część i przejść do sekcji Dodaj nieskończone przewijanie do postów WordPress/strony bloga .

Krok 1: Utwórz szablon repeatera

Szablon określa, w jaki sposób Twoje produkty będą wyświetlane na interfejsie użytkownika. Szablon repeatera przechodzi przez wszystkie Twoje produkty i wyświetla je zgodnie z zapisanym szablonem. Ponieważ ta wtyczka wykorzystuje szablon repeatera do wyświetlania produktów, musisz go najpierw utworzyć. W panelu administracyjnym WP przejdź do AJAX Load More> Repeater Templates.

Jesteśmy zainteresowani dodaniem nieskończonego przewijania do naszej strony sklepu WooCommerce, więc musimy zastąpić domyślny szablon repeatera szablonem WooCommerce. Większość motywów kompatybilnych z WooCommerce używa domyślnego pliku content-product.php do wyświetlania produktów. Wystarczy zastąpić domyślny szablon repeatera następującym szablonem.

 <?php wc_get_template_part( 'zawartość', 'produkt' ); ?>

Alternatywnie, możesz skopiować i wkleić cały kod z szablonu content-product.php do sekcji szablonu repeatera. Możesz użyć swojego panelu sterowania administratora lub dowolnego klienta FTP, takiego jak FileZilla , aby uzyskać dostęp do szablonu content-product.php . Szablon będzie znajdować się w wp-content\plugins\woocommerce\templates . Gdy to zrobisz, naciśnij Zapisz , aby zapisać szablon repeatera.

Uwaga: Jeśli ten szablon nie działa, być może będziesz musiał sprawdzić swój motyw, aby zobaczyć, czy używa jakiejś zmodyfikowanej formy szablonu content-product.php .

Teraz, gdy stworzyliśmy nasz szablon repeatera, przejdźmy do następnego kroku.

Krok 2: Zbuduj krótki kod

W panelu administratora przejdź do AJAX Load More> Shortcode Builder , aby wygenerować krótki kod. Tutaj możesz dostosować ustawienia wyświetlania i parametry zapytania, z których każdy dodaje parametr do shortcode. Jest to ważny krok, ponieważ ten krótki kod będzie potrzebny do późniejszego wyświetlania produktów.

Jeśli nie znasz skrótów i jak ich używać, zajrzyj do tego przewodnika.

Ustawienia wyświetlania

Sekcja Ustawienia wyświetlania zawiera wiele opcji, które możesz ustawić, aby zmienić sposób wyświetlania rzeczy w interfejsie sklepu. Możesz zmienić styl przycisku/ładowania na przycisk Załaduj więcej lub ikonę ładowania. Możesz także włączyć opcję przewijania, aby produkty były automatycznie ładowane, gdy użytkownik przewija w dół. Z drugiej strony wyłączenie opcji przewijania będzie wymagało od użytkownika naciśnięcia przycisku Załaduj więcej , aby załadować więcej produktów.

Parametry zapytania

W sekcji Parametry zapytania możesz ustawić liczbę postów do załadowania na żądanie AJAX, wybrać typy postów (post, media, strona docelowa itp.), które chcesz wyświetlić i nie tylko. Gdy skończysz z parametrami, wygenerowany krótki kod znajdziesz w sekcji wyjściowej krótkiego kodu po prawej stronie. Skopiuj ten krótki kod, ponieważ będziesz go później używać.

Ponieważ domyślnie nie ma opcji dla WooCommerce w sekcji Post Type , musisz dodać parametr woocommerce i ręcznie usunąć parametr post_type . Aby to zrobić, po prostu dodaj woocommerce = “true” do shortcode i usuń parametr post_type = “post” .

Ustawiając parametr woocommerce na true, wtyczka automatycznie uwzględni odpowiednie parametry produktu, aby wyświetlić produkty. Twój shortcode powinien wyglądać mniej więcej tak:

 [ ajax_load_more woocommerce="true" container_type="div" posts_per_page="4" ]

Teraz, gdy masz już swój ostateczny shortcode, użyjmy go, aby dodać nieskończone przewijanie do Twojej witryny WooCommerce/WordPress.

Krok 3: Dodaj Shortcode do Archive-Products.php

Plik archive-product.php to szablon używany do wyświetlania produktów WooCommerce na stronie sklepu. Umieścisz swój shortcode w szablonie, aby produkty były ładowane przez wtyczkę AJAX Load More .

Zanim dodasz krótki kod, musisz zrobić kopię pliku archive-product.php i umieścić go w katalogu wp-content\themes\your-theme(eg, astra)\woocommerce . Jeśli katalog woocommerce nie istnieje, utwórz go. Oryginalny szablon archive-product.php znajduje się w wp-content\plugins\woocommerce\templates . Możesz wprowadzić te zmiany za pośrednictwem administracyjnego panelu sterowania lub klienta FTP.

Należy pamiętać, że umieszczenie pliku archive-product.php w głównym katalogu motywu zastąpi oryginalne ustawienia szablonu. Oznacza to, że umieszczając plik archive-product.php w katalogu motywu, WooCommerce nada mu wyższy priorytet. Jeśli plik znajduje się w katalogu motywów, odczyta go i nie odczyta oryginalnego pliku w katalogu wtyczek.

Co więcej, jest to bezpieczna procedura, ponieważ oryginalny plik nadal znajduje się w katalogu wtyczek, więc jeśli coś pójdzie nie tak z plikiem klonu, możesz go usunąć i nadal mieć oryginalny plik w katalogu wtyczek.

Teraz otwórz ostatnio skopiowany plik szablonu za pomocą dowolnego edytora tekstu. Poszukaj instrukcji warunkowej, która wygląda tak: if(wc_get_loop_prop('total')){ } . Zobacz zrzut ekranu poniżej.

Zaznacz całą instrukcję warunkową i zastąp ją następującym kodem:

 // archiwum-produkt.php
if ( wc_get_loop_prop( 'ogółem' ) ) {
   echo do_shortcode('[ajax_load_more woocommerce="true" container_type="div" posts_per_page="4"]');
}

Pamiętaj, aby zastąpić shortcode swoim shortcode. Następnie zapisz plik. Następnie przejdź do interfejsu, przejdź do strony sklepu i przewiń w dół. Voila! Zobaczysz swój nieskończony zwój w akcji.

Dodaj nieskończone przewijanie do postów WordPress/strony bloga

Dodawanie nieskończonego przewijania do stron postów/blogów WordPress przebiega podobnie jak WooCommerce, ale ma kilka różnic. Zobaczmy, jak krok po kroku wdrożyć nieskończone przewijanie na WordPressie.

Krok 1: Utwórz szablon repeatera

W przypadku strony bloga użyjemy szablonu content-blog.php jako naszego szablonu repeatera. Po prostu przejdź do katalogu swojej witryny za pomocą administracyjnego panelu sterowania lub klienta FTP i przejdź do wp-content\themes\your-theme(eg, astra)\template-parts . Znajdziesz tam szablon content-blog.php .

Skopiuj kod z pliku szablonu i wklej go do sekcji szablonu repeatera wtyczki. Następnie zapisz szablon repeatera.

Krok 2: Zbuduj krótki kod

Teraz musisz utworzyć krótki kod. W tym celu przejdź do pulpitu nawigacyjnego WP Admin i przejdź do AJAX Load More> Shortcode Builder. Wybierz ustawienia wyświetlania i parametry zapytania, aby wygenerować krótki kod, a gdy będziesz z niego zadowolony, skopiuj krótki kod.

Krok 3: Dodaj skrót do strony bloga

Jeśli nie masz jeszcze strony bloga, utwórz nową stronę i nazwij ją Blog . Podczas edycji strony kliknij ikonę „ +” w lewym górnym rogu, a pojawi się okno dialogowe. Wyszukaj blok shortcode i wybierz go, aby dodać go do swojej strony.

Teraz wklej shortcode skopiowany w poprzednim kroku do bloku shortcode i zaktualizuj stronę.

Brawo! Właśnie dodałeś nieskończone przewijanie do swojej strony bloga WordPress. Proces dodawania go do dowolnego innego posta lub strony jest dokładnie taki sam.

Wniosek

Podsumowując, korzystanie z nieskończonego przewijania może być dobrym rozwiązaniem, które usprawni nawigację i zapewni użytkownikom lepsze wrażenia w witrynie. Nie jest tajemnicą, że doświadczenie użytkownika ma kluczowe znaczenie dla każdego rodzaju działalności. Zwiększa zaangażowanie użytkowników, a w rezultacie sprawia, że ​​odwiedzający pozostają na Twojej stronie dłużej, wracają częściej i zwiększają szanse na konwersję.

Dzięki nieskończonemu przewijaniu treść ładuje się automatycznie, gdy użytkownik dotrze do końca strony. W ten sposób użytkownicy mogą odkrywać bardziej wartościowe treści bez konieczności przechodzenia między wieloma stronami. Co więcej, nieskończone przewijanie sprawia, że ​​nawigacja na urządzeniach mobilnych jest wygodniejsza i przyspiesza proces przeglądania.

Jednak przewijanie w nieskończoność ma również pewne wady, takie jak nieosiągalna stopka lub wyczerpanie pamięci. Dlatego musisz rozważyć zalety i wady przed podjęciem decyzji, czy wdrożyć nieskończone przewijanie w swojej witrynie, czy nie. Nie ma dobrego lub złego wyboru, wszystko sprowadza się do Twoich potrzeb biznesowych.

W tym artykule opisaliśmy, jak dodać nieskończone przewijanie do WordPressa i WooCommerce za pomocą wtyczki AJAX Load More . Ten proces zajmuje tylko kilka minut, jest bezpłatny i może pomóc w poprawie komfortu użytkowników Twojej witryny.

Aby uzyskać więcej narzędzi do dodawania nieskończonego przewijania do Twojej witryny, spójrz na ten post z większą liczbą wtyczek, których możesz użyć.

Czy kiedykolwiek próbowałeś używać nieskończonego przewijania w swojej witrynie lub sklepie? Jakie było twoje doświadczenie? Daj nam znać w komentarzach poniżej!