Volgende / Vorige links berichten pagina links maken

Volgende en vorige links zijn dynamische links waarmee gebruikers het volgende of vorige bericht kunnen bekijken. In dit artikel laten we je zien hoe je eenvoudig volgende/vorige links kunt toevoegen in WordPress en hoe je er het meeste uit kunt halen.

Wat zijn Volgende/Vorige koppelingen in WordPress?

Volgende / Vorige koppelingen zijn dynamische koppelingen die worden toegevoegd door een WordPress thema waarmee gebruikers eenvoudig naar het volgende of vorige bericht kunnen navigeren. Dit kan helpen om het aantal pageviews te verhogen en je bouncepercentage te verlagen.

Standaard worden WordPress blogberichten in omgekeerd chronologische volgorde weergegeven. Nieuwere berichten staan bovenaan.

Dit betekent dat het volgende bericht het bericht is dat is gepubliceerd na het huidige bericht dat een gebruiker bekijkt en dat het vorige bericht het bericht is dat voor het huidige bericht is gepubliceerd.

Met de volgende/vorige links kunnen gebruikers eenvoudig navigeren door individuele artikelen en archiefpagina’s van blogs. Het helpt je ook om meer pageviews voor je blog te krijgen.

Volgende vorige koppelingen in WordPress thema

De meeste WordPress thema’s worden geleverd met ingebouwde volgende en vorige berichten links die automatisch worden weergegeven onderaan elk bericht.

Sommige thema’s tonen ze echter niet, of je kunt aanpassen waar en hoe ze op je WordPress website verschijnen. De onderstaande thema’s hebben allemaal deze functie:

Hoe kun je eenvoudig volgende en vorige links kunt toevoegen in WordPress?

Volgende / Vorige links maken met WordPress plugin

Deze methode is eenvoudig en beveel ik aan voor beginners die het niet gemakkelijk vinden om code toe te voegen aan hun websites. Eerst moet je de CBX Volgende Vorige Artikel plugin installeren en activeren.

Zie voor meer details onze stap-voor-stap handleiding voor het installeren van een WordPress plugin.

Na activering moet je naar de Instellingen ” CBX Volgende Vorige pagina. Vanaf hier kun je kiezen waar je de volgende en vorige links op je website wilt weergeven.

Volgende en vorige link plugin instellingen

Met de plugin kun je Volgende en Vorige link pijlen tonen op afzonderlijke berichten, pagina’s, archiefpagina’s en meer. Om je volgende en vorige links relevanter te maken, kun je er ook voor kiezen om de volgende en vorige berichten van dezelfde categorie of tag weer te geven.

Met de gratis versie van de plugin kun je alleen pijlen weergeven voor volgende en vorige artikelen. Je kunt upgraden naar de pro versie om andere weergaveopties te ontgrendelen, zoals een slide-in popup.

Als je ervoor kiest om volgende / vorige berichten van dezelfde taxonomie weer te geven, dan moet je overschakelen naar het tabblad Navigeren op Taxonomie.

Vanaf hier moet je kiezen welke taxonomie je wilt gebruiken om volgende en vorige links te selecteren. Je kunt nu je WordPress website bezoeken om de volgende/vorige links in actie te zien.

Volgende / Vorige links vormgeven in WordPress

Als je thema de Volgende / Vorige links heeft ingebouwd kun je de vormgeving aanpassen. Dit vereist wel wat kennis van CSS. Laten we eens kijken hoe we ze op de juiste manier kunnen stylen. Lees anders eerst hoe je CSS kan aanpassen met deze handleidingen:

Standaard voegt WordPress automatisch verschillende standaard CSS-klassen toe aan de postnavigatiekoppelingen. Je kunt deze CSS klassen gebruiken in je WordPress thema om deze links te stijlen. Let op: deze code verschilt per thema.

Hier is wat basis CSS dat je kunt toevoegen aan je thema:

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}
 
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}
 
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

Deze basis CSS geeft eenvoudigweg volgende en vorige links naast elkaar weer, maar aan de verschillende kanten van dezelfde regel.

Je kunt je navigatiekoppelingen ook laten opvallen door achtergrondkleur, hover-effect en meer toe te voegen.

Hier is wat voorbeeld CSS-code die je als uitgangspunt kunt gebruiken.

.post-navigation {
background-color:#f3f6ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:15px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover { /*rood*/
background-color:#dd0000;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}