När du utformar WordPress-webbplatser för dina kunder är användbarhet en viktig faktor att ta hänsyn till. Vissa av de tekniker som används för att förbättra användarupplevelsen (UX) på en webbplats kanske inte är de bästa metoderna för en annan.

Infinite scrolling är en taktik som utvecklare och designers använder för att hålla webbplatsens besökare engagerade. Medan vissa hävdar att det faktiskt kan skada användbarheten på webbplatser finns det många fall där det kan vara fördelaktigt.

I det här inlägget förklarar vi vad infinite scrolling är och vilka typer av webbplatser som kan dra nytta av det. Sedan går vi igenom tre metoder som du kan använda för att lägga till denna funktionalitet på dina kunders webbplatser. Nu sätter vi igång!

En introduktion till oändlig rullning

Oändlig rullning är en webbdesignteknik där nytt innehåll laddas automatiskt när en besökare når botten av sidan. Resultatet är en jämn, till synes oändlig mängd innehåll.

Populära exempel på webbplatser som använder oändlig rullning är sociala nätverk som Facebook, Twitter och Pinterest. Du kan också se det på blogg- och underhållningssajter som Mashable och Buzzfeed:

Det finns många fördelar med att införliva oändlig rullning på dessa webbplatser. Det mest uppenbara är att det sparar tid och ger dina användare mer innehåll utan att behöva klicka på en Läs mer-knapp eller pagineringslänkar.

Med färre distraktioner kan den automatiska matningen av innehåll också innebära att användarna stannar kvar längre, vilket kan leda till högre engagemang. Dessutom är den här funktionen mobilvänlig.

Det är dock inte alla webbplatser som lämpar sig för oändlig rullning. Om du till exempel har en målinriktad webbplats som en e-handelsbutik kan det göra det svårt för användarna att hitta det de letar efter. Det kan också påverka webbplatsens prestanda om den inte optimeras korrekt.

Om du däremot har en webbplats med en linjär struktur kan det vara mycket fördelaktigt. Infinite Scrolling kan vara särskilt användbart för att berätta historier, oavsett om det sker genom långa blogginlägg eller visuellt innehåll som t.ex. bilder.

Hur man lägger till Infinite Scrolling på klientwebbplatser (3 metoder)

Om du skapar klientwebbplatser som är innehållsdrivna, kan du överväga att lägga till en funktion för infinite scrolling. Låt oss ta en titt på tre metoder som du kan använda för att göra det.

Använd ett plugin för oändlig rullning

En av de snabbaste och enklaste metoderna du kan använda för att lägga till oändlig rullning på dina kunders webbplatser är att använda ett plugin. Vissa, till exempel Jetpack, innehåller funktioner för att implementera detta designelement.

Det finns inte alltför många fristående plugins för oändlig rullning. En populär sådan som vi rekommenderar att använda är dock Ajax Load More:

Denna insticksmodul är gratis och lätt att använda, även om det kräver vissa programmeringskunskaper. Det låter dig lägga till oändlig rullning för lata inlägg, sidor och kommentarer.

När du har installerat och aktiverat insticksprogrammet kan du konfigurera de relevanta WordPress-frågeparametrarna baserat på olika innehållstyper. På sidan Inställningar kan du justera och anpassa hur Ajax Load More beter sig på dina kundwebbplatser. Du kan till exempel lägga till din egen anpassade CSS:

Pluginet innehåller också en Shortcode Builder som du kan använda för att snabbt ändra sidor och inlägg från din innehållsredigerare eller dina mallfiler. En annan funktion i insticksprogrammet som är värd att kolla in är dess repeatermallar:

Du kan göra din egen repeatermall och justera hur HTML och PHP fungerar inom kortkoden. Du kan också inkludera flera instanser av insticksprogrammet Ajax Load More på ett enda inlägg, en sida eller en mall.

Men även om det kostnadsfria insticksprogrammet ger många funktioner för oändlig rullning finns det också en premiumversion som låser upp tillgången till fler mallar. Om du vill veta mer kan du kolla in Ajax Load More-dokumentationen och supportsidan.

Välj teman med oändlig rullning inbyggd

Om du inte vill lägga till ytterligare ett insticksprogram på dina kundwebbplatser behöver du inte oroa dig. Du kan uppnå samma effekt genom att använda ett tema som har oändlig rullning inbyggd.

Den här vägen är förstås inte den mest praktiska för befintliga webbplatser. Att ändra en webbplats tema kräver ofta en omfattande omprofilering. Detta är inte precis värt besväret bara för att få tillgång till en funktion för oändlig rullning – särskilt med tanke på att du kan uppnå det med andra metoder.

Det finns ett stort antal WordPress-teman som innehåller den här funktionen. Du kan bläddra i WordPress Theme Directory och söka efter funktionen oändlig rullning:

Men även om själva temat kan vara gratis, tänk på att du kanske måste uppgradera till premiumversionen för att kunna använda oändlig rullning. Det finns dock några som erbjuder funktionaliteten utan kostnad, till exempel Minimal Dark.

När du hittar ett tema som du gillar och som innehåller funktionen, laddar du ner och installerar det på samma sätt som du skulle göra med vilket annat tema som helst. De flesta kommer att inkludera funktionen i temaanpassaren.

Med Minimal Dark kan du till exempel hitta alternativet oändlig rullning genom att gå till Utseende > Anpassa > Temaalternativ > Pagineringsalternativ:

Om du vill ha mer avancerade funktioner kan du överväga ett premiumtema. Theme Forest har ett brett urval som inkluderar oändlig rullning.

Anvisningarna för att aktivera och använda funktionen oändlig rullning beror på vilket tema du använder. Därför är det bäst att kontrollera i utvecklarens dokumentation för vägledning.

Manuellt lägga till kod på din webbplats

En tredje metod för att implementera oändlig rullning – och som kan vara att föredra om du är en erfaren utvecklare – är att manuellt lägga till kod på din webbplats. Det här alternativet ger dig mer kontroll och eliminerar behovet av att installera ett extra plugin.

På webbplatser med teman som inte har oändlig rullning inbyggd kan du dessutom använda den här koden. Det första steget är att aktivera funktionen via temats functions.php-fil.

För att göra detta lägger du till följande kod i filen:

När detta är klart är nästa steg att ställa in funktionen Render Parameter. Detta är den del av koden som handlar om att ladda inläggen för oändlig rullning i en slinga.

För att göra det så att inläggen laddas kontinuerligt lägger du till mytheme_infite_scroll_init-funktionen till temats functions.php-fil så här:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

När du har lagt till dessa två stycken bör du vara redo att köra. Men om det inte fungerar kan du fortfarande behöva ändra webbplatsens tema. Äldre, föråldrade produkter har kanske inte stöd för oändlig rullning alls.

Slutsats

Oändlig rullning är inte för alla. Det finns dock vissa webbplatser, till exempel bloggar och andra innehållstunga onlinepublikationer, där det kan ge bättre UX och till och med öka engagemanget.

I den här artikeln diskuterade vi tre metoder som du kan använda för att lägga till oändlig rullning på dina kundwebbplatser:

1. Använda ett plugin för oändlig rullning.
2. Välja teman med oändlig rullning inbyggd.
3. Hanterligt lägga till kod på din webbplats.