Samouczek WordPress: Jak stworzyć nieskończoną przewijaną stronę WP

Aktualizacja: 29 lipca 2014 r. / Artykuł: Rochester Oliveira

Na pewno ciężko pracujesz, aby poprawić użyteczność witryny, aby Twoi użytkownicy byli bardziej zadowoleni i częściej wracają, prawda? Jednym z ulepszeń, które możesz wprowadzić, jest technika przewijania nieskończonego. Zasadniczo jest to to samo, co na Twitterze lub Facebooku, gdzie na początku wyświetlana jest tylko podstawowa zawartość, a podczas przewijania w dół dodawane są kolejne treści. Jest to całkiem niezłe, aby poprawić wydajność witryny (skracając czas ładowania) i poprawiając komfort użytkownika (ponieważ nie trzeba wykonywać żadnych czynności, aby załadować więcej elementów, np. Kliknięcie przycisku).

Zobaczymy, dlaczego i jak korzystać z niej we własnej witrynie

Przykłady witryny Infinite Scrolling

Zawsze dobrze jest sprawdzić, co robią tamci faceci, a tego rodzaju efekt (trudny wiele razy niezauważalny) jest używany przez wiele dużych witryn i aplikacji, takich jak Facebook (ten kanał na żywo), Twitter, Pinterest, Feedly.

Feedly

i twitterze

Nieskończony zwój - nakazy i nakazy

Ta technika spowoduje usunięcie zwykłego linku do stronicowania witryny ("starsze posty" lub ponumerowane strony, które masz po swoich wpisach). Wielkim "pro" tej techniki jest czas ładowania, ponieważ na początku ładowanych jest mniej elementów, możesz mieć o wiele szybszą stronę, a ponieważ dodawanych jest więcej elementów bez przeładowania strony, użytkownik może przewinąć w dół dla 10 "stron" postów bez nawet zauważając, pozostając dłużej w swojej witrynie.

Może być stosowany w większości witryn, ale lepiej nadaje się do blogów lub witryn podobnych do portfela, gdzie masz dużo treści i obrazów, a nie chcesz przytłoczyć użytkownika dużą ilością treści.

Ten przewodnik nie wymaga biegłości w kodowaniu i, szczerze mówiąc, z pewnością nauczysz się trochę, jak poprawić swój motyw WordPress.

Aktywa

Użyjemy Wtyczka JS Paul'a. Pobierz go i zainstaluj w folderze js kompozycji. Wykorzystamy dwadzieścia dwanaście do nauki propozycji, ale możesz go użyć w dowolnym motywie (i zadawać pytania, jeśli to nie działa).

Będziesz także potrzebował ładnego obrazu GIF do swojej wiadomości „ładującej się”. Możesz znaleźć ich wiele, ale pliki AjaxLoad Witryna ma dość niesamowite narzędzie, które pomoże ci z wieloma gotowymi stylami i możesz wybrać kolor, który lepiej pasuje do twojego schematu kolorów.

Gdy masz już scenariusz i fajny obraz gifa pod Wp-content / themes / twentytwelve / js, możemy zacząć!

Kod PHP

Ok, nie bój się, podamy ci fragment kodu „kopiuj i wklej”, ale oto, co musimy zrobić, aby to działało:

  • Stwórz funkcję, która wewnętrznie załaduje i zarejestruje nieskończoną wtyczkę przewijania - Zapobiegnie to dwukrotnemu załadowaniu WordPressa i złamaniu funkcji kompozycji
  • Wczytaj skrypt tylko wtedy, gdy masz stronę, która nie jest pojedynczym postem - tylko strony, na których masz więcej niż jeden post do wyświetlenia, będą musiały załadować więcej elementów.

Plik functions.php jest sercem Twojego motywu. Wszystkie funkcje są tam zwykle lub są wywoływane z innych plików. Możemy dodać ten kod do pliku funkcji, aby dodać obsługę nieskończonego przewijania (dodaj ją na końcu pliku):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

Alternatywne podejście - ładowanie stron i niestandardowych typów wpisów

Poprzedni kod będzie ładował wszystkie posty, ale co jeśli chcesz pokazać strony lub niestandardowe typy postów (np. Elementy portfolio, jeśli Twój motyw je obsługuje)? Cóż, możemy trochę zmodyfikować kod i sprawić, żeby działał również.

Jedyne potrzebne dostosowanie to indeks, kategoria lub jakikolwiek inny plik, który załaduje elementy, zamienisz bieżącą pętlę na inny kod. Możesz zidentyfikować swoją pętlę za pomocą tego kodu:

while (have_posts ()):

Tak więc, gdy już go znajdziesz, możesz użyć tego magicznego kodu:

'page', // Tylko strony); query_posts ($ args); // załaduj posty if (have_posts ()):?>

Wnioski

To tylko "rozgrzewka". Jest wiele rzeczy, które możesz zrobić przy takim podejściu. Na przykład, możesz załadować produkty do swojego sklepu (może za pomocą WooCommerce) jako użytkownik przewija, lub nawet dodać więcej kodu JS i CSS, aby stworzyć i stworzyć niesamowitą ładowarkę podobną do paralaksy dla obrazów postów.

Co sądzisz o tej technice? Czy lubisz to? Używałbyś tego? Podziel się swoimi przemyśleniami, korzystając z sekcji komentarzy!

O Rochester Oliveira

Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.