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

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: Jul 29, 2014

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 os Infinite Scrolling site

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).

Potrzebny będzie również ładny obraz gif dla wiadomości „ładowanie”. Możesz znaleźć ich wiele, ale 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
  • Załaduj skrypt tylko wtedy, gdy masz stronę, która nie jest jedną post-tylko strony, na których masz więcej niż 1 post, aby pokazać, będzie trzeba załadować więcej przedmiotó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):

<? php / ************************ PRZEWÓD NIEWŁAŚCIWEGO PRZEWODU ***************** ******** / / * Funkcja, która zarejestruje i zainstaluje skrypt nieskończonej scole, który ma być użyty w motywie. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // nazwa skryptu get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // gdzie plik jest tablicą ('jquery'), // ten skrypt wymaga skryptu jquery null, // nie ma numeru wersji skryptu true // skrypt zostanie umieszczony na stopce); if (! is_singular ()) {// tylko wtedy, gdy mamy więcej niż 1 post // załadujemy ten skrypt wp_enqueue_script ('infinite_scrolling'); }} // Zarejestruj nasze niestandardowe skrypty! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Funkcja, która ustawi nieskończone przewijanie do wyświetlenia na stronie. * / function set_infinite_scrolling () {if (! is_singular ()) {// ponownie tylko wtedy, gdy mamy więcej niż 1 post // dodać skrypt js poniżej?> <script type = "text / javascript"> / * To jest inifinite scrolling setting, możesz to modyfikować według własnej woli * / var inf_scrolling = {/ * img: to ścieżka ładowania obrazu, dodaj ładną ikonę ładowania gif tam msgText: wiadomość ładowania zakończonaMsg: ukończona wiadomość ładowania * / loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Ładowanie kolejnych wpisów ....", finishedMsg: "Wpisy załadowane !!",}, / * Następny element to ustaw nextSelector. NextSelector to klasa nawigacyjna strony css. W naszym przypadku jest to # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector to identyfikator css nawigacji strony "navSelector": "# nav-below" ", // itemSelector to div, w którym jest wyświetlany post" itemSelector ":" article ", // contentSelector to div, w którym zawartość strony (posty) jest wyświetlana" contentSelector ":" # content "}; / * Ostatnią rzeczą do zrobienia jest skonfigurowanie contentSelector do nieskończonego przewijania, z jQuery funkcji z infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * musimy dodać tę akcję na stopce strony. 100 to numer priorytetu, który odpowiada za późniejsze wykonanie. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

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:

<div id = "content" role = "main"> <? php / * Pokaż tylko Strony na nieskończonym przewijaniu! Oto sekret: możesz ustawić post_type na to, czego potrzebujesz, to proste! Niektóre post_types mogą być: portfolio, projekt, produkt Możemy dodać dowolną liczbę typów postów, oddzielając je przecinkami, takimi jak "post", "strona", "produkt" * / $ args = array (// ustawianie argumentów "post_type" => "strona", // tylko strony); query_posts ($ args); // ładuj posty jeśli (have_posts ()):?> <? php / * Rozpocznij pętlę * /?> <? php while (have_posts ()): the_post (); // "zwykły" kod pętli do wyświetlania tych elementów?>

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.