How (And Why) to Add Infinite Scrolling to Client Websites
Wanneer u WordPress sites voor uw klanten ontwerpt, is gebruiksvriendelijkheid een belangrijke factor om rekening mee te houden. Echter, sommige van de technieken die worden gebruikt om de User Experience (UX) op een site te verbeteren, zijn misschien niet de beste methoden voor een andere.
Infinite scrolling is een tactiek die ontwikkelaars en ontwerpers gebruiken om sitebezoekers betrokken te houden. Hoewel sommige stellen dat het kan eigenlijk schadelijk zijn voor de bruikbaarheid van websites, zijn er veel gevallen waarin het kan gunstig zijn.
In deze post, zullen we uitleggen wat oneindig scrollen is en welke soorten sites kunnen profiteren van het. Dan zullen we lopen je door drie methoden die u kunt gebruiken om deze functionaliteit toe te voegen aan de websites van uw klanten. Laten we beginnen!
Een inleiding tot oneindig scrollen
Oneindig scrollen is een webdesigntechniek waarbij nieuwe inhoud automatisch wordt geladen wanneer een bezoeker de onderkant van de pagina bereikt. Het resultaat is een gestage, schijnbaar eindeloze toevoer van inhoud.
Populaire voorbeelden van sites die oneindig scrollen gebruiken, zijn sociale netwerken zoals Facebook, Twitter en Pinterest. U kunt het ook zien op blog- en entertainmentsites zoals Mashable en Buzzfeed:
Er zijn veel voordelen verbonden aan het gebruik van oneindig scrollen op deze websites. Het meest voor de hand liggende is dat het tijd bespaart en uw gebruikers meer inhoud biedt zonder dat ze op een Lees meer-knop of pagineringlinks hoeven te klikken.
Met minder afleidingen kan de automatische toevoer van inhoud ook betekenen dat gebruikers langer blijven hangen, wat zich kan vertalen in een hogere betrokkenheid. Plus, deze functie is mobiel-vriendelijk.
Hoewel, niet elke website is geschikt voor oneindig scrollen. Bijvoorbeeld, als u een doelgerichte website, zoals een e-commerce winkel, kan het moeilijk maken voor gebruikers om te vinden wat ze zoeken. Het kan ook van invloed zijn op de prestaties van de site als deze niet goed is geoptimaliseerd.
Aan de andere kant, als u een site met een lineaire structuur hebt, kan het zeer gunstig zijn. Oneindig scrollen kan vooral nuttig zijn voor storytelling-doeleinden, hetzij door middel van long-form blogberichten of visuele inhoud zoals afbeeldingen.
Hoe oneindig scrollen toe te voegen aan websites van klanten (3 methoden)
Als u websites van klanten maakt die inhoudgedreven zijn, kunt u overwegen een oneindige scrollfunctie toe te voegen. Laten we eens kijken naar drie methoden die u kunt gebruiken om dat te doen.
Gebruik een oneindige scrollen plugin
Een van de snelste en gemakkelijkste methoden die u kunt gebruiken om oneindig scrollen toe te voegen aan de websites van uw klanten is het gebruik van een plugin. Sommige, zoals Jetpack, bevat functies voor de uitvoering van dit ontwerp element.
Er zijn niet al te veel standalone oneindige scroll plugins. Een populaire plugin die we aanraden is Ajax Load More:
Deze plugin is gratis en eenvoudig te gebruiken, hoewel er wel enige programmeerkennis voor nodig is. Met deze plugin kunt u oneindig scrollen toevoegen voor lazy loading posts, pagina’s en comments.
Nadat u de plugin hebt geïnstalleerd en geactiveerd, kunt u de relevante WordPress queryparameters configureren op basis van verschillende contenttypen. Op de Instellingen pagina, kunt u aanpassen en aanpassen hoe Ajax Load More zich gedraagt op uw klant websites. U kunt bijvoorbeeld uw eigen aangepaste CSS toevoegen:
De plugin bevat ook een Shortcode Builder die u kunt gebruiken om snel pagina’s en posts aan te passen vanuit uw content editor of uw template bestanden. Een andere functie van de plugin die de moeite waard is om te bekijken zijn de Repeater Templates:
U kunt uw eigen repeater template maken en aanpassen hoe de HTML en PHP functioneren binnen de shortcode. U kunt ook meerdere instanties van de Ajax Load More plugin op een enkele post, pagina, of sjabloon.
De gratis plugin biedt veel mogelijkheden voor oneindig scrollen, maar er is ook een premium versie die toegang biedt tot meer sjablonen. Voor meer informatie, kunt u kijken op de Ajax Load More documentatie en ondersteuning pagina.
Kies thema’s waarin oneindig scrollen is ingebouwd
Als u geen andere plugin wilt toevoegen aan de sites van uw klanten, hoeft u zich geen zorgen te maken. U kunt hetzelfde effect bereiken door een thema te gebruiken dat oneindig scrollen heeft ingebouwd.
Natuurlijk is deze route niet de meest praktische voor bestaande sites. Het veranderen van het thema van een site vereist vaak een uitgebreide rebranding. Dit is niet echt de moeite waard alleen maar om toegang te krijgen tot een oneindig scrollen functie – vooral als je bedenkt dat je het kunt bereiken met behulp van andere methoden.
Er is een gezond aantal WordPress thema’s die deze functionaliteit bevatten. U kunt in de WordPress Theme Directory zoeken op de functie oneindig scrollen:
Hoewel het thema zelf gratis is, moet u er rekening mee houden dat u wellicht moet upgraden naar een premiumversie om oneindig scrollen te kunnen gebruiken. Er zijn echter ook thema’s die de functie gratis aanbieden, zoals Minimal Dark.
Als u eenmaal een thema hebt gevonden dat de functie bevat, downloadt en installeert u het zoals u elk ander thema zou installeren. De meeste thema’s bevatten de functie in de Thema-aanpasser.
Bij Minimal Dark bijvoorbeeld, kunt u de oneindige scroll-optie vinden door naar Uiterlijk > Aanpassen > Thema-opties > Pagineeropties te gaan:
Als u meer geavanceerde functies wilt, kunt u een premium thema overwegen. Theme Forest heeft een ruime keuze aan thema’s met oneindig scrollen.
De instructies voor het activeren en gebruiken van de oneindige scrollfunctie zijn afhankelijk van het thema dat u gebruikt. Daarom kunt u het beste de documentatie van de ontwikkelaar raadplegen.
Handmatig code toevoegen aan uw site
Een derde methode voor het implementeren van oneindig scrollen – en een die de voorkeur kan hebben als u een ervaren ontwikkelaar bent – is het handmatig toevoegen van code aan uw site. Deze optie geeft u meer controle en elimineert de noodzaak om een extra plugin te installeren.
Plus, kunt u deze code gebruiken op sites met thema’s die niet worden geleverd met oneindig scrollen ingebouwd. De eerste stap is het activeren van de functie via het bestand functions.php van uw thema.
Om dit te doen, voegt u de volgende code toe aan het bestand:
Als dit eenmaal is voltooid, is de volgende stap het instellen van de functie Render Parameter. Dit is het deel van de code dat gaat over het laden van de berichten voor oneindig scrollen in een lus.
Om ervoor te zorgen dat de berichten continu worden geladen, voegt u de functie mytheme_infite_scroll_init
toe aan het bestand functions.php van uw thema, en wel als volgt:
function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}
Als u deze twee fragmenten toevoegt, zou u klaar moeten zijn om te gaan. Echter, als het niet werkt, kan het zijn dat u nog steeds het thema van uw site moet veranderen. Oudere, verouderde producten ondersteunen misschien helemaal geen oneindig scrollen.
Conclusie
Het oneindig scrollen is niet voor iedereen weggelegd. Er zijn echter sommige websites, zoals blogs en andere online publicaties met veel inhoud, waar het een betere UX kan bieden en zelfs de betrokkenheid kan verhogen.
In dit artikel hebben we drie methoden besproken die u kunt gebruiken om oneindig scrollen toe te voegen aan de websites van uw klanten:
- Gebruik een oneindig scrollen plugin.
- Kies thema’s met oneindig scrollen ingebouwd.
- Voeg handmatig code toe aan uw site.