Breadcrumbs (kruimelpad) op je WordPress-website

Een kruimelpad (breadcrumbs) laat mensen op je pagina zien waar ze zich op jouw website bevinden, en biedt een makkelijke manier om terug naar de bovenliggende pagina te gaan. Ook Google houdt ervan als je breadcrumbs gebruikt.

Breadcrumbs toevoegen met de WordPress SEO-plugin

Als je de plugin WordPress SEO van Yoast gebruikt, is het heel eenvoudig om breadcrumbs aan je WordPress-website toe te voegen. We raden je ook zeker aan om de plugin van Yoast hiervoor te gebruiken, want Yoast zorgter niet alleen voor dat je breadcrumbs getoond worden op je website, maar voegt ook een mooie snippet toe waardoor Google je zoekresultaten voorziet van een kruimelpad. Dat ziet er als volgt uit:

Om de breadcrumbs toe te voegen, ga je in de Yoast-plugin naar het tabje Interne links; hier kun je het kruimelpad activeren. Vervolgens moet je het volgende stukje code in je thema plakken, op de plek waar je de breadcrumbs wilt laten verschijnen:

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

De ideale plek hiervoor is in het header.php-bestand. Zo zorg je ervoor dat het kruimelpad automatisch op iedere pagina terug komt.

Instellingen voor het kruimelpad

Je kunt zelf bepalen hoe je kruimelpad (breadcrumbs) eruit komen te zien. In de onderstaande afbeelding zie je welke instellingen er allemaal zijn.

Zoals je ziet, kun je instellen welk scheidingsteken er wordt gebruikt, en welke tekst er gebruikt moet worden voor de Home-pagina. Verder kun je een tekst instellen voor archief-pagina’s, zoekresultaten en 404-pagina’s.

Een andere handige instelling is de taxonomie die je wilt laten zien bij berichten. Wij hebben gekozen voor “Categorie”. Dit zorgt ervoor dat de categorie waarin je bericht is geplaatst ook getoond wordt in het kruimelpad. Dit is ook te zien bovenaan deze pagina. Dit artikel bevindt zich in de categorie “WordPress Tutorials“.

Je kruimelpad opmaken

Je kunt je kruimelpad ook een andere kleur geven, of de lettergrootte aanpassen. Dit doe je met behulp van CSS. De standaard “id” van de breadcrumbs is “breadcrumbs“. Om hier in de CSS-code van je thema een bepaalde opmaak aan te geven, voeg je het volgende stuk code toe aan het CSS-bestand:

#breadcrumbs {
	font-size: 12px;
	color: #000000;
}

Je kunt op deze manier bijvoorbeeld de lettergrootte aanpassen (in het voorbeeld hierboven is dat 12px) of de kleur aanpassen (in het voorbeeld hierboven is dat #000000, zwart). Om een andere kleur te vinden, heb je de kleurcode nodig (zes cijfers). Deze achterhaal je bijvoorbeeld op de website ColorPicker.com.

Beoordeel dit artikel