Infinite scroll pagination està inspirat en Facebook i Twitter. Això és solament una paginació on l’usuari haurà de desplaçar-se a la fi de la pàgina per llegir més articles. Aquesta és una forma de millorar l’experiència d’usuari en un lloc web, però si ho fas malament, també pot donar una mala experiència. Si va a implementar aquest tipus de paginació, vos de no incloure enllaços importants a la part inferior de la pàgina. La raó d’això és que quan un usuari intenta fer clic en aquest enllaç en particular, la pàgina carregarà automàticament noves entrades i empenyerà l’enllaç fora de la pantalla cada vegada. Podeu establir una àrea de peu de pàgina de posició fixa o fer que la seva barra lateral estigui visible tot el temps.
Buscant una solució ràpida?
Si està buscant una solució ràpida, hi ha una gran col·lecció de scripts i complements de desplaçament infinit en Envato Market. A partir d’uns pocs dòlars, és una excel·lent manera d’implementar alguna cosa en uns minuts que trigaria molt més a construir-se des de zero.!
Ja sigui que estiguis buscant una solució per a WordPress, Magento, WooCommerce o la teva pròpia configuració, hi ha alguna cosa per a tu.!
Pas 1 planeja el teu paginació
És important que planifiqui amb anticipació el seu paginació, on voleu incloure-la i com la processarà. Una forma comuna de fer paginació és llistant els números de pàgina a la part inferior de la pàgina. No obstant això, a l’usar aquest mètode, no apareixeran més números de pàgina a la fin de la seva llista d’articles, ja que ja no són necessaris. Aquesta paginació es pot usar en tots els temes sempre que no incloguis molta informació a la secció de la teva peu de pàgina, ja que pot no donar l’efecte desitjat ..
La nostra paginació de desplaçament infinit utilitzarà les funcions jQuery i ajax per realitzar la sol·licitud i recuperar més articles per mostrar-los a l’usuari. En aquest tutorial, faré servir el tema Twenty Ten com a exemple, pots veure la demostració de treball de l’infinit scroll aquí.
Pas 2 Construint la Funció Ajax
Farem servir la funcionalitat ajax de WordPress per fer la trucada per aquesta paginació. Primer preparem la funció bàsica per a la nostra paginació, per Inseriu el següent codi en el seu tema funciones.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;
Aquesta funció es farà servir per fer la trucada de la nostra paginació, bàsicament vam enviar dues variables a aquesta funció a través de ajax, una és el número de pàgina i una altra és la plantilla d’arxiu que utilitzarem per a la nostra paginació. Per permetre que aquesta funció es faci servir amb WordPress ajax, necessitem el següent codi.
add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // para el usuario registrado en add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // si el usuario no ha iniciado sesión
L’acció per defecte per a WordPress ajax seria wp_ajax_ (nuestro nombre de acción), d’aquí el motiu pel qual s’usa el nom infinite_scroll en l’exemple de codi. Necessitem afegir dues accions, una per a usuaris registrats i altra per a usuaris que no han iniciat sessió.
A continuació, haurem de construir la funció ajax que enviarà les dues variables que necessitem per a la nostra paginació. Podeu utilitzar els ganxos de WordPress per inserir aquesta funció jQuery ajax o inseriu immediatament en el seu tema header.php
Aquesta serà l’anomenada bàsica ajax que anem a fer i fem servir “infinite_scroll” com el nostre nom d’acció. WordPress cridarà automàticament a la nostra funció. wp_infinitepaginate (); Perquè el definim en el nostre tema. funciones.php prèviament.
Pas 3 Determineu quan l’usuari es desplaça a la part inferior de la pàgina
Per habilitar la paginació de desplaçament infinit, hem de determinar quan l’usuari arriba a la fin de la pàgina. Això es pot aconseguir fàcilment a través de jQuery usant el següent codi.
Ara podem saber quan l’usuari arriba a la fi de la pàgina. A continuació hem de trucar a l’cargaArtículo funció dins de la funció de desplaçament. Estic afegint un comptador per a usar com el número de pàgina de la nostra crida ..
Cada vegada que l’usuari es desplaça a la part inferior de la pàgina, el comptador augmentarà i això ens permetrà que el nombre de pàgina passi al nostre wp_infinitepage () funciona dins del nostre tema funciones.php. Amb les funcions scroll i loadArticle, ara podem fer la trucada ajax function dins del nostre tema de WordPress, però és possible que el resultat no aparegui si no hem definit l’arxiu de bucle dins de la nostra carpeta de temes ..
Pas 4 configurant el nostre tema
El més important és que necessitem configurar el div que contindrà el nou contingut sol·licitat amb la nostra funció ajax. En el tema de Twenty Ten, ja hi ha un div que podem fer servir, que és el div amb id = "contenido" Així que inclourem la identificació de div a la nostra funció ajax. Si fa servir altres temes que no emboliquen seu bucle en un div, simplement pot embolicar la funció de bucle com el codi d’exemple a continuació per aconseguir el mateix resultat.
contenido de bucle
A continuació necessitarem un arxiu de bucle per això. El tema Twenty Ten ja té un arxiu de bucle inclòs, aquesta és la raó principal per la qual vaig triar Twenty Ten per aquest exemple, perquè és més fàcil per a qualsevol persona que vulgui fer referència a això més endavant. Si no tens cap loop.php, simplement creï un nou arxiu de bucle i copieu la funció de bucle dins del seu index.php en el nou arxiu i el va pujar a la carpeta del seu tema. Per a qualsevol persona que usi el tema Twenty Ten, voldrà comentar la paginació inclosa a l’arxiu perquè no el necessitarem més (consulteu el fitxer font de l’tutorial per saber com fer-ho).
Pas 5 Si afegim Ajax Loader
Això és opcional, només per donar-li un toc agradable a la nostra paginació de desplaçament infinit. Afegirem una imatge de l’carregador ajax quan arribem a la fi de la pàgina. Pots afegir el següent codi al teu footer.php
Cargando…
i després afegeix el següent CSS al teu full d’estils.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
a continuació, afegirem algunes línies de codi a la nostra funció jQuery per mostrar i ocultar aquest element de l’carregador ajax.
el carregador de ajax es mostrarà un cop que l’usuari arribi a la fi de la pàgina i s’ocultarà una vegada que la sol·licitud de ajax hagi finalitzat ..
Pas 6 Limitació addicional per millorar el desplaçament infinit
Fins ara, ja tenim un desplaçament infinit en funcionament, però falta una cosa. La funció seguirà activant-se cada vegada que un usuari arribi a la pàgina inferior, encara que no hi hagi més publicacions que mostrar. Això és una cosa que no volem tenir. Afegirem un control a la nostra funció de desplaçament perquè quan no es mostrin més pàgines, s’aturi ..
Afegim una nova var total a la funció que retornarà el total de pàgines disponibles al nostre lloc. Això s’utilitzarà per garantir que no es facin trucades addicionals a la pàgina si s’ha arribat a la pàgina màxima. Una altra cosa que ens agradaria afegir és una restricció on es carregarà aquesta funció. Només volem això a la nostra pàgina d’inici, arxiu o potser recerca, però no en la nostra única publicació i pàgina. Així que emboliquem un simple PHP si mas Funciona en el nostre codi jQuery.
if (! is_single () ||! is_page ()): // nuestra función jQuery aquí endif;
Això és pràcticament tot el que necessita per la paginació; consulteu els arxius d’origen, per exemple, el codi utilitzat en aquest tutorial. Els arxius estan basats en el tema Twenty Ten ..