Slik lager du uendelig Scroll Pagination

Uendelig scroll paginering er inspirert fra Facebook og Twitter. Dette er bare paginering hvor brukeren må rulle til bunnen av siden for å lese flere artikler. Dette er en måte å forbedre brukeropplevelsen på et nettsted, men hvis du gjør feil, kan det også gi en dårlig opplevelse. Hvis du skal implementere denne typen paginering, må du sørge for at du ikke inkluderer viktige koblinger nederst på siden. Årsaken til dette er at når en bruker prøver å klikke på den aktuelle linken, laster siden automatisk inn nye oppføringer og trykker koblingen av skjermen hver gang. Du kan enten sette et fast posisjon-bunntekstområde eller gjøre sidebaret ditt synlig hele tiden.

Leter du etter en rask løsning?

Hvis du leter etter en rask løsning, er det en flott samling av uendelig rulleskript og plugins over på Envato Market. Fra bare noen få dollar er det en fin måte å implementere noe på noen få minutter, som ville ta mye lengre tid å bygge fra grunnen av!

Enten du ønsker en løsning for WordPress, Magento, WooCommerce eller ditt eget oppsett, er det noe for deg!

Trinn 1 Planlegg din paginering

Det er viktig at du planlegger din paginering, hvor du vil inkludere den, og hvordan du skal behandle den. En vanlig måte å gjøre paginering på er å oppgi sidetalene nederst på siden. Ved å bruke denne metoden vises imidlertid ikke flere sidetall på slutten av artikkellisten, da de ikke lenger er nødvendig. Denne paginasjonen kan brukes på alle temaer så lenge du ikke inneholder masse informasjon i din sidefelt, da det kanskje ikke gir den ønskede effekten.

Vår uendelige rullepaginering vil bruke jQuery og ajax-funksjonalitet til å gjøre forespørselen og hente flere artikler som skal vises til brukeren. I denne opplæringen vil jeg bruke temaet tjue ti som et eksempel, du kan se den fungerende demoen til den uendelige rulle her.

Trinn 2 Bygg Ajax-funksjonen

Vi vil bruke WordPress 'ajax-funksjonalitet til å ringe for denne paginasjonen. Først utarbeider vi grunnleggende funksjonen for paginering, vennligst sett inn følgende kode til temaet ditt functions.php

funksjon wp_infinitepaginate () $ loopFile = $ _POST ['loop_file']; $ paged = $ _POST ['page_no']; $ posts_per_page = get_option ('posts_per_page'); # Legg inn postene query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); exit; 

Denne funksjonen blir brukt til å ringe for paginering, i utgangspunktet sender vi to variabler til denne funksjonen via ajax, en er sidenummeret og en annen er filmalmen vi skal bruke til vår paginering. For å aktivere denne funksjonen å bli brukt med WordPress ajax, trenger vi følgende kode.

add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for innlogget bruker add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // hvis bruker ikke er logget inn

Standard handling for WordPress ajax ville være wp_ajax_ (vårt handlingsnavn), derfor hvorfor navnet uendelig_scroll blir brukt i kodeeksemplet. Vi må legge til to handlinger, en for innloggede brukere og en annen er for brukere som ikke er logget inn.

Deretter må vi bygge ajax-funksjonen som sender de to variablene vi trenger for vår paginering. Du kan bruke WordPress-kroker til å sette inn denne jQuery-ajax-funksjonen eller umiddelbart sette den inn i temaet ditt header.php

Dette blir det grunnleggende ajax-anropet som vi skal lage, og vi bruker "uendelig" som vårt handlingsnavn. WordPress vil automatisk ringe til vår funksjon wp_infinitepaginate (); fordi vi definerer det i vårt tema functions.php tidligere.

Trinn 3 Bestem når brukeren ruller til undersiden av siden

For å aktivere uendelig rullepaginering, må vi avgjøre når brukeren treffer bunnen av siden. Dette kan oppnås enkelt via jQuery ved hjelp av følgende kode.

Nå kan vi vite når brukeren treffer bunnen av siden. Neste må vi ringe loadArticle Fungerer innenfor rullefunksjonen. Jeg legger til en teller som skal brukes som sidenummeret til vår samtale.

Hver gang brukeren ruller til bunnen av siden, vil telleren øke, og dette vil gjøre at vi kan få sidenummeret til å passere wp_infinitepage () fungere innenfor vårt tema functions.php. Med scroll- og loadArticle-funksjonene kan vi nå gjøre ajax-funksjonen i WordPress-temaet, men resultatet kan ikke vises hvis vi ikke har definert loopfilen i vår temamappe.

Trinn 4 Sette opp vårt tema

Viktigst, vi må sette opp diven som vil holde det nye innholdet som er blitt bedt om å bruke vår ajax-funksjon. I Tusen Ti-temaet er det allerede en div vi kan bruke, som er div med id = "innhold" så vi vil inkludere div id i vår ajax-funksjon. Hvis du bruker andre temaer som ikke vikler sin sløyfe i en div, kan du bare pakke loop-funksjonen som eksempelkoden nedenfor for å oppnå det samme resultatet.

 sløyfeinnhold 

Deretter trenger vi en loopfil for dette. Tusen Ti temaet har allerede en loopfil inkludert, dette er hovedgrunnen til at jeg valgte tjue ti for dette eksempelet, fordi det er lettere for alle som ønsker å referere til dette senere. Hvis du ikke har noen loop.php, bare opprett en ny loop-fil, og kopier loop-funksjonen i din index.php inn i den nye filen og lastet den inn i temaets mappe. For alle som bruker Twenty Ten-temaet, vil du gjerne kommentere paginasjonen som er inkludert i filen, fordi vi ikke trenger det lenger (vennligst se veilednings kildefilen om hvordan du gjør dette).

Trinn 5 Legge til Ajax Loader

Dette er valgfritt, bare for å gi en fin berøring til vår uendelige rullepaginering. Vi legger til et ajax loader-bilde som vi treffer nederst på siden. Du kan legge til følgende kode i din footer.php

Laster ... 

en # inifiniteLoader posisjon: fast; z-indeks: 2; bunn: 15px; høyre: 10px; display: none; 

hvis (! er_single () ||! is_page ()): // vår jQuery-funksjon her endif;