Paginarea infinită de derulare este inspirată de Facebook și Twitter. Acesta este doar o paginare în care utilizatorul va trebui să deruleze la sfârșitul paginii pentru a citi mai multe articole. Aceasta este o modalitate de a îmbunătăți experiența utilizatorului pe un site web, dar dacă o faceți greșit, poate oferi, de asemenea, o experiență rea. Dacă intenționați să implementați acest tip de pagină, asigurați-vă că nu includeți legături importante în partea de jos a paginii. Motivul pentru aceasta este că atunci când un utilizator încearcă să facă clic pe acea legătură particulară, pagina va încărca automat intrări noi și va împinge linkul de pe ecran de fiecare dată. Puteți seta o zonă de picior de poziție fixă sau puteți face ca bara laterală să fie vizibilă tot timpul.
Căutați o soluție rapidă?
Dacă căutați o soluție rapidă, există a Colecția mare de scripturi și accesorii infinite de deplasare în piață se înscrie. De la câțiva dolari, este o modalitate excelentă de a implementa ceva în câteva minute încât ar lua mult mai mult pentru a fi construit de la zero.
Fie că sunteți în căutarea unei soluții pentru WordPress, Magento, WOOCOMMERCE sau configurația proprie, există ceva pentru dvs.!
iv id = „bb82607ad7”
pas 1 Planul paginii
Este important să planificați Paginarea dvs. în avans, unde doriți să includeți și cum o va procesa. O formă comună de fabricare a paggănerii este listarea numerelor de pagină din partea de jos a paginii. Cu toate acestea, atunci când utilizați această metodă, nu vor apărea mai multe numere de pagini la sfârșitul listei de articole, deoarece acestea nu mai sunt necesare. Această pagină poate fi utilizată pe toate subiectele atâta timp cât nu includeți o mulțime de informații în secțiunea subsolului dvs., deoarece este posibil să nu dați efectul dorit ..
Pagingul nostru infinit de scroll va fi folosit Funcțiile jQuery și Ajax pentru a face cererea și pentru a prelua mai multe elemente pentru a le arăta utilizatorului. În acest tutorial, voi folosi cele douăzeci zece tematice ca exemplu, puteți vedea derularea demonstrației de lucru Infinity aici.
Pasul 2 Construirea funcției AJAX
Vom folosi WordPress Ajax Funcționalitate pentru a face apel pentru această pagină. În primul rând, pregătim funcția de bază pentru paginarea noastră, vă rugăm să introduceți următorul cod în funcțiile dvs. de subiect.php
función wp_infinitepaginate () $ loopFile = $ _POST ; $ paged = $ _POST ; $ posts_per_page = get_option ('posts_per_page'); # Cargue los posts query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); salida;
Această funcție va fi utilizată pentru a face apelul Din paginarea noastră, trimitem în principal 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 permite ca această funcție să fie utilizată cu WordPress Ajax, avem nevoie de următorul cod.
DIV ID = „F8C4EF10ED”>
Acțiunea implicită pentru WordPress Ajax ar fi wp_ajax_ (nuestro nombre de acción), de aici motivul pentru care numele infinite_scroll este utilizat în exemplul de cod. Trebuie să adăugăm două acțiuni, unul pentru utilizatorii înregistrați și altul pentru utilizatorii care nu s-au autentificat.
Apoi, 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 insera această funcție JQuery Ajax sau introduceți imediat pe antetul dvs.Php subiect
Acesta va fi apelul de bază AJAX pe care noi vor face și de a folosi „infinite_scoll” ca numele nostru de acțiune. WordPress va apela automat funcția noastră. wp_infinitepaginate (); pentru că îl definim pe subiectul nostru. funcții.php anterior.
Pasul 3 Determinați când utilizatorul se deplasează în partea de jos a paginii
pentru a activa pagina de derulare Infinită, trebuie să determinăm când utilizatorul ajunge la sfârșitul pagina. Acest lucru poate fi realizat cu ușurință prin jQuery utilizând următorul cod.
Acum putem ști când utilizatorul ajunge la sfârșitul paginii. Mai jos trebuie să numim funcția cargaArtículo în cadrul funcției de defilare. Am adăugat un metru de utilizat ca număr de pagină al apelului nostru ..
De fiecare dată când utilizatorul se mută în partea de jos a paginii, contorul va fi Creșterea și acest lucru ne va permite să trecem numărul nostru de pagini pentru a merge la wp_infinitepage () funcționează în cadrul funcțiilor noastre de subiect.php. Cu funcțiile de defilare și încărcare, putem face acum așa-numita funcție AJAX în tema WordPress, dar este posibil ca rezultatul să nu apară dacă nu am definit fișierul buclă în dosarul nostru de subiecte.
Pasul 4 Configurarea subiectului nostru
Cel mai important lucru este că trebuie să configuram DIV care va conține noul conținut solicitat cu funcția AJAX. În tema a douăzeci și zece, există deja un div pe care îl putem folosi, care este div cu id = "contenido", astfel că vom include ID-ul DIV pe funcția noastră Ajax. Dacă utilizați alte subiecte care nu vă înconjoară bucla dvs. într-un div, puteți pur și simplu să înfășurați funcția buclă ca codul de eșantion de mai jos pentru a obține același rezultat.
iv id = „Fe804231Cb”
Voi avea nevoie de un fișier buclă pentru asta. Tema douăzeci și zece are deja un fișier de buclă inclus, acesta este motivul principal pentru care am ales douăzeci zece pentru acest exemplu, deoarece este mai ușor pentru oricine dorește să se refere la acest lucru mai târziu. Dacă nu aveți niciun fel de loop.php, pur și simplu creați un fișier nou buclă și copiați funcția buclă în index.php în noul fișier și încărcați-l în dosarul de pe subiect. Pentru oricine folosește tema douăzeci și zece, veți dori să comentați pagina inclusă în fișier deoarece nu mai avem nevoie de el (vezi fișierul sursă tutorial pentru a afla cum să o faci).
Pasul 5 Adăugarea Ajax Loader
Acest lucru este opțional, doar pentru a oferi o notă frumoasă la pagina noastră infinită de defilare. Vom adăuga o imagine a încărcătorului Ajax când ajungem la sfârșitul paginii. Puteți adăuga următorul cod la subsol.php
Cargando…
și apoi adăugați următorul CSS în fișa stilurilor dvs.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
Următor, vom adăuga câteva linii de cod la funcția noastră de jquery pentru a afișa și ascunde acest element de încărcare AJAX.
DIV id =” 90482b1bce „>
Încărcătorul AJAX va fi afișat odată ce utilizatorul ajunge la sfârșitul paginii și va fi ascuns odată ce cererea AJAX este terminată.
Pasul 6 Limitarea suplimentară pentru a îmbunătăți deplasarea infinită
până la Acum, avem deja o deplasare infinită în funcțiune, dar un lucru lipsește. Funcția va continua să fie activată de fiecare dată când un utilizator ajunge la pagina de jos, deși nu mai există nicio publicații. Acesta este ceva ce nu vrem să avem. Vom adăuga un control în funcția noastră de derulare, astfel încât atunci când nu mai sunt afișate pagini, opriți ..
Adăugați o nouă varietate totală la funcția care va Returnați numărul total de pagini disponibile pe site-ul nostru. Acest lucru va fi utilizat pentru a se asigura că apelurile suplimentare nu sunt făcute în pagină dacă a fost atinsă pagina maximă. Un alt lucru pe care l-am dori să adăugăm este o restricție în cazul în care această funcție va fi percepută. Vrem doar acest lucru pe pagina noastră de pornire, fișier sau poate căutăm, dar nu în singura publicație și pagină. Deci, în codul nostru de jQURY
care este practic tot ceea ce aveți nevoie paginare; Consultați fișierele sursă, de exemplu, codul utilizat în acest tutorial. Fișierele se bazează pe tema douăzeci și zece ..