Hur man skapar oändlig rullningspagination

Infinite scroll pagination är inspirerad från Facebook och Twitter. Det här är bara pagination där användaren kommer att behöva bläddra längst ner på sidan för att läsa mer artiklar. Detta är ett sätt att förbättra användarupplevelsen på en webbplats, men om du gör fel kan det också ge en dålig upplevelse. Om du ska implementera denna typ av pagination, se till att du inte innehåller viktiga länkar längst ner på sidan. Anledningen till detta är att när en användare försöker klicka på den specifika länken, laddar sidan automatiskt nya poster och trycker länken från skärmen varje gång. Du kan antingen ställa in ett fältområde med fast position eller göra ditt sidofält synligt hela tiden.

Letar efter en snabb lösning?

Om du letar efter en snabb lösning finns det en bra samling av oändliga blädderskript och plugins över på Envato Market. Börja från några få dollar är det ett bra sätt att genomföra någonting om några minuter som skulle ta mycket längre tid att bygga från början!

Oavsett om du vill ha en lösning för WordPress, Magento, WooCommerce eller din egen installation, finns det något för dig!

Steg 1 Planera din pagination

Det är viktigt att du planerar med din pagination, där du vill inkludera den och hur du ska bearbeta den. Ett vanligt sätt att göra pagination är genom att lista sidnumren längst ner på sidan. Med hjälp av den här metoden visas dock inte fler sidnummer i slutet av din artikellista, eftersom de inte längre behövs. Denna pagination kan användas på alla teman så länge du inte innehåller massor av information i din sidfot, eftersom det kanske inte ger den önskade effekten.

Vår oändliga rullningspagination kommer att använda jQuery och ajaxfunktionalitet för att göra begäran och hämta fler artiklar som ska visas för användaren. I denna handledning kommer jag att använda Twenty Ten-temat som ett exempel, du kan se den fungerande demoen i den oändliga scrollen här.

Steg 2 Bygg Ajax-funktionen

Vi kommer att använda WordPress 'ajaxfunktionalitet för att ringa för denna pagination. Först förbereder vi grundfunktionen för vår pagination, var vänlig och sätt in följande kod till ditt tema functions.php

funktion wp_infinitepaginate () $ loopFile = $ _POST ['loop_file']; $ paged = $ _POST ['page_no']; $ posts_per_page = get_option ('posts_per_page'); # Ladda in posterna query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); utgång; 

Denna funktion kommer att användas för att ringa för vår pagination, i princip skickar vi två variabler till denna funktion via ajax, en är sidnumret och en annan är den filmall som vi ska använda för vår pagination. För att aktivera den här funktionen med WordPress ajax behöver vi följande kod.

add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // för inloggad användare add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // om användaren inte är inloggad

Standardåtgärden för WordPress ajax skulle vara wp_ajax_ (vårt åtgärdsnamn), Därför varför namnet infinite_scroll används i kodexemplet. Vi måste lägga till två åtgärder, en för inloggade användare och en annan är för användare som inte är inloggade.

Nästa måste vi bygga ajax-funktionen som skickar de två variablerna vi behöver för vår pagination. Du kan använda WordPress-krokar för att infoga denna jQuery-ajax-funktion eller omedelbart infoga den i ditt tema header.php

Detta blir det grundläggande ajax-samtalet som vi ska göra och vi använder "oändligt_scroll" som vårt actions namn. WordPress ringer automatiskt vår funktion wp_infinitepaginate (); eftersom vi definierar det i vårt tema functions.php tidigare.

Steg 3 Bestäm när användaren bläddrar till undersidan av sidan

För att aktivera oändlig rullpagination måste vi bestämma när användaren träffar längst ner på sidan. Detta kan uppnås enkelt via jQuery med hjälp av följande kod.

Nu kan vi veta när användaren träffar längst ner på sidan. Nästa måste vi ringa loadArticle funktionen i rullningsfunktionen. Jag lägger till en räknare som ska användas som sidnummer för vårt samtal.

Varje gång användaren rullar längst ner på sidan, kommer räknaren att öka och det gör det möjligt för oss att skicka sidnumret till vår wp_infinitepage () fungerar inom vårt tema functions.php. Med scroll- och loadArticle-funktionerna kan vi nu göra ajax-funktionsanropet inom vårt WordPress-tema, men resultatet kan inte visas om vi inte har definierat loopfilen i vår temakatalog.

Steg 4 Ställa in vår tema

Viktigast, vi måste konfigurera div som kommer att hålla det nya innehållet som begärts med vår ajax-funktion. I tjugo tio-temat finns det redan en div som vi kan använda, vilket är div med id = "content" så vi kommer att inkludera div-id i vår ajax-funktion. Om du använder andra teman som inte sätter in sin slinga i en div, kan du helt enkelt sätta upp slingfunktionen som exempelkoden nedan för att uppnå samma resultat.

 loop-innehåll 

Nästa behöver vi en loopfil för detta. Twenty Ten-temat har redan en loopfil med, det här är den främsta anledningen till att jag valde tjugo tio för det här exemplet, eftersom det är lättare för alla som vill referera till det här senare. Om du inte har något loop.php, Skapa helt enkelt en ny loopfil och kopiera loopfunktionen inom din index.php in i den nya filen och laddade den in i tematmappen. För alla som använder tjugo tio-temat vill du kommentera paginering som ingår i filen eftersom vi inte behöver det längre (vänligen hänvisa till handledningskällan om hur man gör det).

Steg 5 Lägga till Ajax Loader

Detta är valfritt, bara för att ge en fin touch till vår oändliga scrollpagination. Vi lägger till en ajax loader-bild som vi träffar längst ner på sidan. Du kan lägga till följande kod till din footer.php

Läser in… 

en # inifiniteLoader position: fixed; z-index: 2; botten: 15px; höger: 10px; display: none; 

om (! is_single () ||! is_page ()): // vår jQuery-funktion här endif;