Share
Paginarea cu parcurgere infinită este inspirată din Facebook și Twitter. Aceasta este doar paginare în cazul în care utilizatorul va trebui să defileze la partea de jos a paginii pentru a citi mai multe articole. Aceasta este o modalitate de a îmbunătăți experiența utilizatorilor pe un site Web, dar dacă faceți acest lucru greșit, acesta poate oferi și o experiență nepotrivită. Dacă intenționați să implementați acest tip de paginare, asigurați-vă că nu includeți linkuri importante în partea de jos a paginii. Motivul pentru aceasta este că atunci când un utilizator încearcă să facă clic pe acel link, pagina va încărca automat intrări noi și va împinge de fiecare dată legătura de pe ecran. Puteți seta fie o zonă de subsol în poziția fixă, fie puteți face vizibilă bara laterală tot timpul.
Dacă sunteți în căutarea unei soluții rapide, există o mare colecție de scripturi și pluginuri scroll infinite de la Envato Market. Pornind de la doar câțiva dolari, este o modalitate foarte bună de a implementa ceva în câteva minute, ceea ce ar dura mult mai mult pentru a construi de la zero!
Indiferent dacă doriți o soluție pentru WordPress, Magento, WooCommerce sau configurația proprie, există ceva pentru dvs.!
Este important să planificați în avans paginarea, unde doriți să o includeți și cum o veți procesa. Un mod obișnuit de a efectua paginarea este listarea numerelor paginilor din partea de jos a paginii. Cu toate acestea, folosind această metodă, la sfârșitul listei de articole nu se vor afișa mai multe numere de pagini, deoarece acestea nu mai sunt necesare. Această paginare poate fi utilizată pe toate temele, atâta timp cât nu includeți o mulțime de informații în secțiunea subsolului dvs., deoarece este posibil să nu dea efectul dorit.
Paginarea noastră infinită de defilare va folosi funcția jQuery și ajax pentru a face cererea și pentru a prelua mai multe articole pentru a fi afișate utilizatorului. În acest tutorial, voi folosi tema Twenty Ten ca exemplu, puteți vedea demo-ul de lucru al scroll-ului infinit aici.
Vom folosi funcția ajax WordPress pentru a face apelul pentru această paginare. Mai întâi pregătim funcția de bază pentru paginarea noastră, introduceți următorul cod în tema proprie functions.php
Accentsconagua
funcția wp_infinitepaginate () $ loopFile = $ _POST ['loop_file']; $ paged = $ _POST ['page_no']; $ posts_per_page = get_option ('posts_per_page'); # Încărcați posturile query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); Ieșire; Această funcție va fi utilizată pentru a face apelul pentru paginarea noastră, în principiu trimitem două variabile la această funcție prin ajax, unul este numărul paginii și altul este șablonul de fișier pe care îl vom folosi pentru paginarea noastră. Pentru a activa această funcție cu WordPress ajax, avem nevoie de următorul cod.
add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // pentru utilizatorul logat add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // dacă utilizatorul nu sa logat Acțiunea implicită pentru WordPress ajax ar fi wp_ajax_ (denumirea acțiunii noastre), prin urmare, numele infinite_scroll fiind folosit în exemplul de cod. Trebuie să adăugăm două acțiuni, una pentru utilizatorii conectați și altul pentru utilizatorii care nu sunt conectați.
În continuare, va trebui să construim funcția ajax care va trimite cele două variabile de care avem nevoie pentru paginarea noastră. Puteți utiliza cârligele WordPress pentru a introduce această funcție jQuery ajax sau imediat inserați-o în tema dvs. header.php
Acesta va fi apelul de bază ajax pe care îl vom face și vom folosi "infinite_scroll" drept numele nostru de acțiune. WordPress va suna automat funcția noastră wp_infinitepaginate (); deoarece îl definim în tema noastră functions.php în prealabil.
Pentru a activa paginarea infinită de defilare, trebuie să determinăm când utilizatorul atinge partea de jos a paginii. Acest lucru poate fi obținut cu ușurință prin jQuery utilizând următorul cod.
Acum putem ști când utilizatorul intră în partea de jos a paginii. Înainte trebuie să sunăm loadArticle funcție în cadrul funcției de defilare. Adăugesc un contor pentru a fi utilizat ca număr de pagină al apelului nostru.
De fiecare dată când utilizatorul avansează în partea de jos a paginii, contorul va crește și acest lucru ne va permite să trecem numărul paginii către wp_infinitepage () în cadrul tematicii noastre functions.php. Cu funcțiile de defilare și loadArticle, putem face apelul funcției ajax în cadrul temei noastre WordPress, dar rezultatul poate să nu apară dacă nu am definit fișierul buclă din dosarul tematic.
Cel mai important lucru este să configurați div care să conțină noul conținut care a fost solicitat utilizând funcția ajax. În tema Douăzeci și Zece, există deja o div pe care o putem folosi, care este cu div id = "conținut" așa că vom include div id în funcția noastră ajax. Dacă utilizați alte teme care nu împletesc bucla lor într-un div, puteți înfășura pur și simplu funcția buclă ca exemplul de mai jos pentru a obține același rezultat.
buclă
Apoi vom avea nevoie de un fișier cu buclă pentru acest lucru. Tema Twenty Ten are deja un fișier cu bucla inclusă, acesta fiind principalul motiv pentru care am ales Twenty Ten pentru acest exemplu, deoarece este mai ușor pentru oricine dorește să facă referire mai târziu. Dacă nu aveți niciunul loop.php, trebuie doar să creați un nou fișier de buclă și să copiați funcția buclă în interiorul dvs. index.php în noul fișier și îl încărcați în dosarul temei. Pentru cineva care utilizează tema Twenty Ten, ați dori să comentați paginarea inclusă în fișier, deoarece nu mai avem nevoie de ea (vă rugăm să consultați fișierul sursă tutorial despre cum să faceți acest lucru).
Acest lucru este opțional, doar pentru a da o notă plăcută paginii noastre scroll infinite. Vom adăuga o imagine ajax loader în timp ce apăsăm în partea de jos a paginii. Puteți adăuga următorul cod la dvs. footer.php
Se incarca…
și apoi adăugați următorul CSS în foaia de stil.
un # inifiniteLoader poziție: fix; z-index: 2; fund: 15px; dreapta: 10px; display: none;
Apoi vom adăuga câteva linii de cod la funcția jQuery pentru a afișa și ascunde acest element loader ajax.
Încărcătorul ajax va fi afișat odată ce utilizatorul va ajunge în partea de jos a paginii și va fi ascuns după finalizarea solicitării ajax.
Până acum, avem deja un paragraf de lucru infinit, dar lipsește un singur lucru. Funcția va continua să declanșeze de fiecare dată când un utilizator atinge pagina de jos, chiar dacă nu mai există postări care să fie afișate. Acesta este ceva ce nu vrem să avem. Vom adăuga un control în funcția de defilare, astfel încât atunci când nu mai sunt afișate pagini, se va opri.
Adăugăm un nou var total la funcția care va returna paginile totale disponibile pe site-ul nostru. Aceasta va fi utilizată pentru a ne asigura că nu se vor efectua apeluri suplimentare la pagină dacă pagina maximă a fost atinsă. Un alt lucru pe care ar trebui să-l adăugăm este o restricție în care această funcție va fi încărcată. Vrem doar acest lucru pe pagina noastră de pornire, arhivă sau poate căutare, dar nu pe un singur mesaj și pagină. Așa că am înfășurat un simplu PHP dacă altceva funcționează în codul nostru jQuery.
dacă (! is_single () ||! is_page ()): // funcția noastră jQuery aici endif;
Asta e tot ce aveți nevoie pentru paginare, vă rugăm să consultați fișierele sursă de exemplu codul utilizat în acest tutorial. Fișierele se bazează pe tema Twenty Ten.
Până acum ar trebui să puteți utiliza această funcție în oricare temă, dacă aveți alte sugestii sau întrebări suplimentare referitoare la acest tutorial, nu ezitați să lăsați un comentariu sau să mă contactați prin twitter. Îmi place să împărtășesc idei cu voi.
; ?>/images/ajax-loader.gif )