Het is dan ook eigenlijk raar dat een van de meest effectieve hulpmiddelen voor het verbeteren van de gebruikerservaring en de Search Engine Optimization (SEO) van je website naar dit sprookje is vernoemd. Broodkruimels, oftewel breadcrumbs, kunnen essentieel onderdeel zijn van je site en kan je eenvoudig inschakelen via een plugin of stukje code.
In dit artikel leggen we uit wat WordPress Breadcrumbs zijn en hoe ze werken. Daarna laten we zien hoe je ze kunt toevoegen aan je site, stijlen, en eventueel weer verwijderen. Een hoop interessante info, dus laten we snel beginnen!
Wat zijn WordPress Breadcrumbs?
Breadcrumbs, in de context van WordPress (of websites in het algemeen), zijn links voor het navigeren, die bovenaan een artikel of pagina verschijnen. Ze laten bezoekers de bovenliggende categorie zien waardoor ze bij de huidige content kwamen, waardoor ze makkelijk terug kunnen komen naar de vorige pagina’s.
Bekijk ter illustratie dit voorbeeld:
Links, net onder de header, zie je de woorden Home> Resource Center > Kinsta Blog. Elk woord is een aparte link die naar die specifieke pagina leidt. Dit zorgt ervoor dat lezers op ons blog met een enkele klik naar een bepaald onderwerp toe kunnen gaan, in plaats van dat ze de Terug-knop, het menu of de zoekfunctie hoeven te gebruiken.
Je hebt nu vast al wel door waarom breadcrumbs (broodkruimels) zo heten: ze laten een spoor achter waarmee gebruikers weer (op de) ’thuis'(pagina) komen. Ze zijn vooral erg handig op blogs en webshops, waar bezoekers makkelijk willen kunnen schakelen tussen individuele artikelen, productpagina’s, en categorieën waar ze soortgelijke content kunnen vinden.
Hoe werken WordPress Breadcrumbs?
Er zijn drie verschillende soort Breadcrumbs in WordPress. Het zijn allemaal links die helpen bij het navigeren, maar werken allemaal net wat anders:
- Op basis van hiërarchie: Deze breadcrumbs laten gebruikers zien waar ze zich bevinden binnen de structuur van je website, zoals in het voorbeeld hierboven.
- Op basis van kenmerken: Deze breadcrumbs laten de kenmerken zien waar gebruikers op gezocht hebben, en waardoor ze bij de huidige content uitkwamen. Deze worden vooral gebruikt op e-commerce websites.
- Op basis van geschiedenis: Terwijl gebruikers doorklikken van de ene pagina naar de andere binnen je website, helpen deze breadcrumbs ze om de vorige pagina’s terug te vinden.
Elk type breadcrumb is weer op een andere manier in te zetten. Maar ze verbeteren allemaal de navigatie binnen je site en daarmee dus ook de gebruikerservaring.
Ze zijn ook goed vanuit SEO-oogpunt. Breadcrumbs laten namelijk duidelijk de relaties tussen de verschillende stukjes content op je website zien. Op die manier helpen ze bots of zoekmachines de structuur van je website te begrijpen.
Hierdoor kunnen deze programma’s de pagina’s van je website beter indexeren. Zoekmachines kunnen ook je breadcrumbs weergeven op resultaatpagina’s, zodat gebruikers nog meer gerelateerde content van je website zien tijdens het zoeken.
Zo voeg je WordPress Breadcrumbs toe aan je website (4 manieren)
Of je nu een volleerd programmeur bent of een beginner met WordPress, het toevoegen van breadcrumbs aan je website is zo gepiept. We beschrijven hier vier verschillende methoden om dit varkentje te wassen.
1. Inschakelen van Breadcrumbs vanuit Yoast SEO
Yoast SEO is een populaire plugin die je helpt bij het ranken binnen zoekmachines en je helpt om je content te optimaliseren. Het bevat ook enkele andere features om de zichtbaarheid van je website te verbeteren, zoals breadcrumbs.
Als je dit nog niet gedaan hebt, installeer en activeer de plugin dan binnen je WordPress-dashboard:
Daarna moet je dit stukje code toevoegen aan je thema:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Waar je dit stukje code precies invoegt kun je grotendeels zelf bepalen. Als je breadcrumbs in je blogartikelen wilt gebruiken, kun je het toevoegen aan je single.php sjabloonbestand.
In plaats daarvan kun je de code ook plakken aan het einde van je header.php bestand zodat de breadcrumbs aan je volledige website toegevoegd worden:
Onthoud dat toekomstige updates van je thema deze code zullen overschrijven. Je kunt contact opnemen met de ontwikkelaar van je thema om te vragen hoe je dit kunt oplossen, of simpelweg een child-thema gebruiken. Als je het stukje code ergens neergezet hebt, navigeer je naar SEO > Search Appearance > Breadcrumbs binnen je dashboard:
Zet de schakelaar bij de Breadcrumbs settings naar enabled. Daarna kun je je website previewen:
Je zou nu de breadcrumbs moeten zien op je website, afhankelijk van waar je ze precies hebt toegevoegd.
2. Activeren van Breadcrumbs door een WordPress Breadcrumbs-plugin
Het activeren van breadcrumbs via de Yoast plugin is vooral handig als je die plugin reeds gebruikt voor je SEO. Maar als je al een andere plugin gebruikt voor het optimaliseren van je content is die aanpak minder handig. Gelukkig zijn er ook andere plugins beschikbaar die zich specifiek richten op het toevoegen van breadcrumbs aan je WordPress-website.
Breadcrumb NavXT
De populairste plugin hiervoor, naast Yoast, is Breadcrumb NavXT:
Deze plugin biedt een breadcrumbs-widget die je toe kunt voegen aan alle widgetplekken die je thema aanbiedt, zoals de zijbalk of de footer. Je kunt alles precies naar jouw smaak instellen, zodat je precies kunt kiezen welke pagina’s en categorieën er in de links te zien zijn. Beadcrumb NavXT biedt ook schema markup voor het verbeteren van je SEO.
Om breadcrumbs toe te voegen via deze plugin, ga je naar Weergave > Widgets. Hier zie je een nieuwe Breadcrumb NavXT widget, die je kunt slepen naar een plek op je website waar je de breadcrumbs wilt hebben:
Klik op de drop-down om de instellingen voor de widget te openen en vul alle noodzakelijke velden in:
Zorg dat je juiste vinkjes zet zodat de goede links binnen de breadcrumbs verschijnen, bepaal de volgorde, kies of je ze op de startpagina wilt tonen, en of je caching wilt inschakelen. Als je klaar bent klik je op Save en check je je website:
Je zou de breadcrumbs nu moeten zien op de plek van je keuze.
Flexy Breadcrumb
Een alternatief is Flexy Breadcrumb, wat mogelijk de best gewaardeerde plugin is voor het toevoegen van breadcrumbs aan WordPress:
Zodra je deze plugin hebt geïnstalleerd en geactiveerd, kun je breadcrumbs toevoegen aan je website door middel van de [flexy_breadcrumb] shortcode. Dit geeft je nog meer flexibiliteit qua plaatsing. Je hebt ook meer controle over de styling van de breadcrumbs, zoals de grootte en kleur van het lettertype, en icoontjes.
Nadat je de Flexy Breadcrumbs plugin hebt geïnstalleerd zul je een nieuw item zien binnen de zijbalk van je dashboard:
Daarna moet je nog wat zaken instellen. In het General tabblad kun je de tekst en het icoontje voor je startpagina veranderen, de limiet voor het aantal tekens instellen en de hiërarchie bepalen:
In het Typography tabblad kun je de kleur en grootte van het lettertype van je breadcrumbs instellen:
Nadat je dit hebt ingesteld, kun je de [flexy_breadcrumb] shortcode invoegen waar je de breadcrumbs wilt weergeven. Alhoewel je dit in elk individueel artikel kunt doen dat je gaat publiceren of hebt gepubliceerd, is het efficiënter om de shortcode toe te voegen aan een WordPress widget:
Als je je website bekijkt, moet je de breadcrumbs kunnen zien waar je ze toegevoegd hebt.
WooCommerce Breadcrumb
Voor online verkopers is WooCommerce Breadcrumbs een makkelijke manier om links toe te voegen aan je productpagina’s:
Als je een webshop hebt op basis van de populaire WooCommerce-plugin, is dit waarschijnlijk de beste optie. Het geeft je de mogelijkheid om breadcrumbs in te schakelen voor je productpagina’s zodat je bezoekers makkelijker binnen je website kunnen navigeren.
Na het installeren en activeren ga je naar Instellingen > WC Breadcrumbs om het breadcrumb-spoor in te stellen:
De belangrijkste instelling is het aanvinken van het hokje voor Breadcrumbs inschakelen. Als je dit niet aanvinkt werken de breadcrumbs niet. Kijk vervolgens op één van je productpagina’s:
Je breadcrumbs moeten bovenaan de pagina te zien zijn.
Breadcrumb
Als laatste plugin is Breadcrumb een lichtgewicht plugin waarmee je overal op je site breadcrumbs kunt toevoegen door middel van de shortcodes:
Deze plugin heeft de meest uitgebreide instellingen van alle plugins die we hier genoemd hebben. Je vindt de instellingen onder Breadcrumb in de zijbalk van je WordPress-dashboard:
Het eerste tabblad heet Options en bevat enkele algemene instellingen zoals een specifieke tekst, scheidingstekens en karakterlimiet:
Er is ook een speciaal tabblad alleen voor stylingmogelijkheden. Er zijn verschillende pijlen waar je uit kunt kiezen, naast kleuren en groottes voor het lettertype:
Als je kunt programmeren en meer controle wilt over je styling, kun je ook het Custom CSS tabblad gebruiken:
Als laatste is het belangrijk om het tabblad Shortcode te bekijken om je breadcrumbs daadwerkelijk toe te voegen aan je website:
Je kunt de shortcode overal op je website gebruiken, net als bij de vorige plugins. Maar Breadcrumb biedt ook een stukje code dat je toe kunt voegen aan je sjabloonbestanden om een breadcrumb-spoor toe te voegen aan je header, footer of ergens anders.
3. Gebruik van een Thema dat al Breadcrumbs bevat
Alhoewel thema’s meestal worden gezien als iets om de vormgeving van je website te bepalen, kunnen WordPress-thema’s ook belangrijk zijn voor de functionaliteit. Zo kunnen ze bijvoorbeeld breadcrumbs toevoegen aan je pagina’s.
Het nadeel van het gebruiken van een WordPress-thema om de breadcrumbs te activeren voor een bestaande WordPress-website, is dat de vormgeving ook zal veranderen. Als je merk en website al herkenbaar zijn, is dit dus geen praktische oplossing, en kun je beter een plugin gebruiken.
Maar als je een nieuwe WordPress-website wilt starten of een website opnieuw aan het ontwerpen bent, kan het een eenvoudige oplossing zijn om een thema te kiezen dat al breadcrumbs bevat. Er zijn verschillende gratis mogelijkheden binnen de WordPress thema-bibliotheek.
OceanWP
OceanWP is één van de meest populaire WordPress-thema’s die je voor verschillende doelen kunt gebruiken:
Het bevat ook een shortcode waarmee je makkelijk breadcrumbs kunt toevoegen aan je pagina’s. Er zijn ook diverse demo’s beschikbaar die breadcrumbs ondersteunen. Om de shortcode te gebruiken voeg je simpelweg [oceanwp_breadcrumb] toe aan een artikel, pagina of widget.
Je kunt de breadcrumbs aanpassen met de volgende instellingen:
- Class: Gebruik een specifieke CSS-class.
- Color: Kleur van de tekst instellen.
- Hover color: Verandert de kleur van de tekst wanneer gebruikers hun muis boven je breadcrumbs laten zweven.
Voeg naar smaak deze instellingen toe binnen de shortcode-hooks:
Je zult de breadcrumbs nu zien op de manier zoals je deze hebt ingesteld.
Astra
Op dezelfde manier maakt ook Astra het makkelijk om breadcrumbs toe te voegen aan je website:
De makkelijkste manier om breadcrumbs te activeren bij Asta is via de Customizer. Als je het thema hebt geïnstalleerd en geactiveerd ga je naar Weergave > Customizer:
Daar selecteer je het Breadcrumb tabblad:
Hier zie je een drop-downmenu waar je in kunt kiezen waar je je breadcrumbs wilt tonen:
Nadat je een keuze hebt gemaakt zul je ook enkele stylingmogelijkheden zien:
Let op dat je daadwerkelijk op de Publiceren knop klikt binnen de Customizer op je wijzigingen op te slaan.
4. Handmatig Breadcrumbs Toevoegen
Plugins en thema’s maken WordPress gebruiksvriendelijk en toegankelijk. Maar voor de meer geavanceerde gebruikers en ontwikkelaars kan een plugin of thema te beperkt zijn. Code kan een erg creatief medium zijn, en het kan je aantrekkelijk lijken om je eigen breadcrumbs te schrijven.
Om breadcrumbs handmatig te activeren zul je twee dingen moeten doen. Allereerst zul je een functie toe moeten voegen aan je functions.php bestand. Hier is een voorbeeld van de code die je daarvoor zou kunnen gebruiken:
function get_breadcrumb() {
echo ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</a>’;
if (is_category() || is_single()){
echo “ » ”;
the_category (‘ • ‘);
if (is_single()) {
echo “ » ”;
the_title();
}
} elseif (is_page()) {
echo “ » ”;
echo the_title();
} elseif (is_search()) {
echo “ » ”;Search Results for…
echo ‘“<em>’;
echo the_search_query();
echo ‘</em>”’;
}
}
Als je deze functie hebt toegevoegd, zul je er nog een verzoek aan moeten doen vanuit het sjabloonbestand zodat je breadcrumbs daadwerkelijk te zien zijn. Door de functie aan te roepen vanuit single.php zullen de breadcrumbs binnen je artikelen verschijnen, als je het doet vanuit header.php zullen ze altijd in je header te zien.
Die code zou er zo ongeveer uit kunnen zien:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Het aanpassen van deze bestanden zal ervoor zorgen dat je breadcrumbs op je website te zien zijn, maar geeft je nog niet de mogelijkheid het uiterlijk zo aan te passen dat het bij je ontwerp past. Om dat goed te doen, zul je je CSS in moeten duiken.
Het Stylen van je WordPress Breadcrumbs
Het stylen van je breadcrumbs is nodig als je ze zelf codeert. Maar het kan ook handig zijn als je een plugin of thema gebruikt om ze te implementeren. De standaard stylingtools van zo’n plugin passen misschien niet goed bij je website. In dat geval wil je de styling nog verder aanpassen zodat je website een consistent geheel blijft.
Je kunt je eigen CSS toevoegen in het stylesheet van je thema (style.css) of in het Additional CSS-veld bij de Customizer.
Er zijn een hoop manieren om je breadcrumbs bij je website te laten passen, zoals het veranderen van de grootte, lettertype en kleur. Je wilt wellicht ook de marges, randen en icoontjes aanpassen.
Hier is een voorbeeld dat je zou kunnen gebruiken om je breadcrumbs te stylen:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Zoals bekend zijn er ontzettend veel mogelijkheden wanneer je CSS gebruikt. Je moet dus wellicht een beetje experimenteren tot je breadcrumbs er perfect uitzien.
Het Verwijderen van je WordPress Breadcrumbs
Alhoewel er vooral heel veel voordelen aan breadcrumbs zijn, vindt niet iedereen ze handig. Sommige mensen vinden ze verwarrend of vinden dat de pagina’s met breadcrumbs er rommeliger uitzien.
Als je breadcrumbs wilt verwijderen, kun je dat doen op een manier die past bij hoe je ze hebt toegevoegd. Als je bijvoorbeeld zelf de code voor je breadcrumbs hebt toegevoegd, kun je die code simpelweg verwijderen uit je bestanden.
Het uitschakelen van breadcrumbs die je via een plugin hebt toegevoegd doe je meestal door de plugin uit te schakelen. In het geval van Yoast SEO, ga je naar het Breadcrumbs tabblad binnen de Search Appearance instellingen en zet je de respectievelijke schakelaar om naar Disable.
Dezelfde manier kun je gebruiken voor breadcrumbs die je hebt geactiveerd via WordPress shortcodes of een instelling. Maar er zijn ook thema’s die standaard breadcrumbs inschakelen. In dat geval kan het iets lastiger zijn om ze te verwijderen, zeker als je niet heel veel ervaring met code hebt.
Je zult dan namelijk naar het header.php bestand van je website moeten gaan. Daar zoek je op “breadcrumb”. Hierdoor zou de code die de functie die breadcrumbs aan je website toevoegt gemarkeerd moeten worden:
Verwijder deze regel code om breadcrumbs uit te schakelen. Als je de juiste code niet gevonden hebt, kun je hetzelfde proberen binnen de single.php en page.php bestanden, om te zien of de breadcrumbs-functie vanaf daar aangeroepen wordt.
Als dat allemaal nog steeds niet werkt kun je altijd contact opnemen met de ontwikkelaar van je thema. Let op dat het updaten van je WordPress-thema eventuele veranderingen aan de bestanden zal overschrijven. Daarom kun je het beste altijd een child-thema aanmaken zodat je aanpassingen bewaard blijven.
Samenvatting
Een prettige gebruikerservaring en sterke SEO zijn beiden van vitaal belang voor een succesvolle website. Het inschakelen van WordPress breadcrumbs kan het voor je bezoekers makkelijker om hun weg te vinden binnen je website. Tegelijkertijd helpt het zoekmachines om de structuur van je website te begrijpen, wat het indexeren verbetert.
In dit artikel hebben we vier methoden genoemd voor het toevoegen van breadcrumbs aan je WordPress-website:
- Aanzetten van breadcrumbs in Yoast SEO.
- Installeren en configureren van een WordPress breadcrumbs plugin.
- Het gebruiken van een thema dat al breadcrumbs bevat.
- Breadcrumbs handmatig toevoegen via je eigen code.
Nog vragen over WordPress breadcrumbs of hoe je ze kunt gebruiken? Laat het ons weten in de reacties hieronder!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter