Når du designer WordPress-websteder til dine kunder, er brugervenlighed en vigtig faktor at overveje. Men nogle af de teknikker, der bruges til at forbedre brugeroplevelsen (UX) på et websted, er måske ikke de bedste metoder til et andet.

Infinite scrolling er en taktik, som udviklere og designere bruger til at holde webstedets besøgende engageret. Mens nogle hævder, at det faktisk kan skade brugervenligheden på websites, er der mange tilfælde, hvor det kan være gavnligt.

I dette indlæg forklarer vi, hvad infinite scrolling er, og hvilke typer websites der kan drage fordel af det. Derefter gennemgår vi tre metoder, som du kan bruge til at tilføje denne funktionalitet til dine kunders websteder. Lad os komme i gang!

En introduktion til Infinite Scrolling

Infinite Scrolling er en webdesignteknik, hvor nyt indhold automatisk indlæses, når en besøgende når bunden af siden. Resultatet er et stabilt, tilsyneladende uendeligt indholdsfeed.

Populære eksempler på websteder, der anvender infinite scrolling, er sociale netværk som Facebook, Twitter og Pinterest. Du kan også se det på blogging- og underholdningswebsteder som Mashable og Buzzfeed:

Der er mange fordele ved at indarbejde uendelig rulning på disse websteder. Det mest indlysende er, at det sparer tid og giver dine brugere mere indhold uden at skulle klikke på en Læs mere-knap eller pagineringslinks.

Med færre distraktioner kan den automatiske tilførsel af indhold også betyde, at brugerne bliver længere, hvilket kan resultere i højere engagement. Desuden er denne funktion mobilvenlig.

Det er dog ikke alle websteder, der egner sig til infinite scrolling. Hvis du f.eks. har et målrettet websted som en e-handelsbutik, kan det gøre det svært for brugerne at finde det, de leder efter. Det kan også påvirke webstedets ydeevne, hvis det ikke er optimeret korrekt.

Hvis du på den anden side har et websted med en lineær struktur, kan det være yderst fordelagtigt. Uendelig rulning kan især være nyttig til historiefortælling, hvad enten det er gennem blogindlæg i lang form eller visuelt indhold som f.eks. billeder.

Sådan tilføjer du uendelig rulning til klientwebsteder (3 metoder)

Hvis du opretter klientwebsteder, der er indholdsdrevne, kan du overveje at tilføje en funktion til uendelig rulning. Lad os se på tre metoder, du kan bruge til at gøre det.

Brug et plugin til uendelig rulning

En af de hurtigste og nemmeste metoder, du kan bruge til at tilføje uendelig rulning til dine kunders websteder, er at bruge et plugin. Nogle, såsom Jetpack, indeholder funktioner til implementering af dette designelement.

Der findes ikke ret mange selvstændige plugins til uendelig rulning. Et populært et, som vi anbefaler at bruge, er dog Ajax Load More:

Dette plugin er gratis og nemt at bruge, selv om det kræver en vis viden om programmering. Det giver dig mulighed for at tilføje uendelig rulning til doven indlæsning af indlæg, sider og kommentarer.

Når du har installeret og aktiveret plugin’et, kan du konfigurere de relevante WordPress-forespørgselsparametre baseret på forskellige indholdstyper. På siden Indstillinger kan du justere og tilpasse, hvordan Ajax Load More opfører sig på dine klientwebsteder. Du kan f.eks. tilføje din egen brugerdefinerede CSS:

Pluginet indeholder også en Shortcode Builder, som du kan bruge til hurtigt at ændre sider og indlæg fra din indholdseditor eller dine skabelonfiler. En anden funktion i plugin’et, der er værd at tjekke ud, er dets Repeater-skabeloner:

Du kan lave din egen repeater-skabelon og justere, hvordan HTML og PHP fungerer i shortkoden. Du kan også inkludere flere forekomster af Ajax Load More-plugin’et på et enkelt indlæg, en side eller en skabelon.

Mens det gratis plugin giver masser af funktioner til uendelig rulning, er der også en premium-version, der låser op for adgang til flere skabeloner. Hvis du vil vide mere, kan du tjekke Ajax Load More-dokumentationen og supportsiden.

Vælg temaer med indbygget uendelig rulning

Hvis du ikke ønsker at tilføje et andet plugin til dine klientwebsteder, skal du ikke bekymre dig. Du kan opnå den samme effekt ved at bruge et tema, der har infinite scroll indbygget.

Denne rute er naturligvis ikke den mest praktiske for eksisterende websteder. Ændring af et webstedstema kræver ofte omfattende rebranding. Det er ikke ligefrem besværet værd bare for at få adgang til en funktion til uendelig rulning – især når man tænker på, at du kan opnå det ved hjælp af andre metoder.

Der er et sundt antal WordPress-temaer, der indeholder denne funktionalitet. Du kan gennemse WordPress Theme Directory og søge efter funktionen uendelig rulning:

Selv om selve temaet måske er gratis, skal du huske på, at du måske skal opgradere til premium-versionen for at bruge uendelig rulning. Der er dog nogle, der tilbyder funktionaliteten gratis, såsom Minimal Dark.

Når du finder et tema, du kan lide, der indeholder funktionen, skal du downloade og installere det på samme måde, som du ville gøre med ethvert andet tema. De fleste vil inkludere funktionen i tematilpasseren.

For eksempel kan du med Minimal Dark finde indstillingen uendelig rulning ved at gå til Udseende > Tilpas > Temaindstillinger > Temaindstillinger > Pagineringsindstillinger:

Hvis du ønsker mere avancerede funktioner, kan du overveje et premiumtema. Theme Forest har et bredt udvalg, der omfatter uendelig rulning.

Vejledningen til at aktivere og bruge funktionen uendelig rulning afhænger af det tema, du bruger. Derfor er det bedst at tjekke udviklerens dokumentation for at få vejledning.

Manuelt tilføje kode til dit websted

En tredje metode til implementering af uendelig rulning – og en metode, der kan være at foretrække, hvis du er en erfaren udvikler – er at tilføje kode manuelt til dit websted. Denne mulighed giver dig mere kontrol og eliminerer behovet for at installere et ekstra plugin.

Dertil kommer, at du kan bruge denne kode på websteder med temaer, der ikke leveres med indbygget uendelig rulning. Det første skridt er at aktivere funktionen via dit temas functions.php-fil.

For at gøre dette skal du tilføje følgende kode til filen:

Når dette er færdigt, er det næste skridt at opsætte funktionen Render Parameter. Dette er den del af koden, der omhandler indlæsning af indlæggene til uendelig rulning i en sløjfe.

For at gøre det sådan, at indlæggene indlæses løbende, skal du tilføje mytheme_infite_scroll_init-funktionen til dit temas functions.php-fil på følgende måde:

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

Når du har tilføjet disse to uddrag, burde du være klar til at gå i gang. Men hvis det ikke virker, skal du muligvis stadig ændre webstedets tema. Ældre, forældede produkter understøtter måske slet ikke uendelig rulning.

Konklusion

Uendelig rulning er ikke for alle. Der er dog nogle websteder, såsom blogs og andre indholdstunge onlinepublikationer, hvor det kan give bedre UX og endda øge engagementet.

I denne artikel har vi diskuteret tre metoder, du kan bruge til at tilføje uendelig rulning til dine klienters websteder:

1. Brug et plugin til uendelig rulning.
2. Vælg temaer med uendelig rulning indbygget.
3. Føj manuelt kode til dit websted.