Wouter PostmaEen 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.
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.
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:
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »
Lees meer over Divi.
|
1 2 3 |
<?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:
|
1 2 3 4 |
#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
(Nog geen ratings)
Jelle van der Schoot
Ik heb nog een vraag. Ik gebruik de SEO-plugin van Yoast en heb bij interne links de kruimelpad instellingen gedaan. Desondanks zie ik mijn kruimelpad als volgt: Home – subpagina i.p.v. Home – pagina – subpagina.
Wat doe ik verkeerd? Waar kan ik instellen dat ik deze laatste weergave van het kruimelpad wil zien?
Hoi Carla,
Wil je mij de URL sturen van die pagina? Dat kan via info@wplounge.nl.
Groeten,
Wouter
Ik heb eigenlijk precies dezelfde vraag als Carla.
Hij laat alleen de home en de subpagina zien maar niet de pagina zelf.
Dus ik zou ook graag weten waar ik deze instellingen moet veranderen
Met vriendelijke groet,
Paul