Nu we weten wat een breadcrumb is en waar ie voor dient gaan we over op de vraag: Hoe kun je breadcrumbs instellen in jouw WordPress website?

Er zijn verschillende manieren om een breadcrumb te installeren op jouw wordpress website. Je kunt hiervoor een plugin installeren zoals Breadcrumb NavXT of Breadcrumb.

In deze blog bespreken we hoe je dit doet met Rank Math. Rank Math is een all in one SEO plugin waar heel veel tools in ondergebracht zijn. Denk hierbij aan sitemaps, schema data, redirects, een 404 monitor en nog veel meer. Het voordeel van 1 plugin voor meerdere tools is dat dat een hoop plugins en geïnstalleerde code scheelt op het eind en daarmee de website een slok op een borrel sneller kan zijn.

U kunt deze optie inschakelen als u wilt dat uw startpagina wordt opgenomen in de broodkruimels. Wanneer u deze optie inschakelt, verschijnen er twee nieuwe opties, ‘Homepage Label’ en ‘Homepage Link’ op uw scherm.

Je kunt deze optie gebruiken om een ​​label in te stellen voor de homepage van de website. De label standaard is Home, die standaard kan naar wens aangepast worden naar iets wat relevanter is voor jouw website.

Je kunt deze optie gebruiken om te verwijzen naar de link van de startpagina. Deze optie is handig als jouw website meerdere secties heeft, zoals blog, winkel, enz., en je de link kunt invoeren waar jij jouw bezoeker naartoe wilt sturen.

U kunt een prefix aan jouw breadcrumb-pad toevoegen. Enkele populaire voorvoegsels:
“Je bent hier”, “Navigatie”, “Index”, enz

Met deze optie kun je een breadcrumb-indeling instellen voor de archiefpagina’s. %s vertegenwoordigt de taxonomie en we raden aan deze niet te verwijderen.

Met deze optie kun je een breadcrumb-indeling instellen voor pagina’s met zoekresultaten. %s vertegenwoordigt de zoekopdracht en we raden aan deze niet te verwijderen. Enkele van de populaire indelingen zijn: ‘Je hebt gezocht naar’, ‘Hier is wat ik heb gevonden’, enz.

Met deze optie kun je een breadcrumb-label instellen voor je 404-pagina’s.

Je kunt deze optie inschakelen als je niet wilt dat de titel van het huidige bericht in de broodkruimel wordt opgenomen. Meestal wordt de titel van de pagina als laatste element in de broodkruimel opgenomen. Als je deze optie inschakelt, bevat de breadcrumb de titel van het bericht niet.

Categorie(ën) tonen toont de categorieën van je bericht in de breadcrumb. We raden aan dit uitgeschakeld te laten, zodat de breadcrumb compact blijft.

Als je deze optie inschakelt, verwijdert Rank Math de taxonomienaam uit de breadcrumbs van archiefpagina‘s. De aanbevolen instelling is “Uit”.

Wanneer deze optie ingeschakeld is wordt naast de startpagina in de broodkruimel ook jouw blogpagina opgenomen.

Rank Math toont de blogpagina in de breadcrumbs alleen op uw berichten (posts) en niet op pagina’s of andere aangepaste berichttypen.

De makkelijkste manier van toevoegen is via een shortcode. Je kunt de breadcrumb overal toevoegen waar je wilt. Kopieer en plak deze shortcode gewoon in de teksteditor van een bericht/pagina, en dan zal Rank Math de broodkruimel voor dat specifieke bericht/pagina ophalen en op die plek laten zien.

Het toevoegen van de code aan een WordPress thema vergt meer kennis over php en de bestandsscructuur van WordPress. Om de code te kunnen toevoegen moet je eerst de juiste file in wordpress zoeken waar de code geïnstalleerd moet worden. Deze files vind je onder: Weergave > Thema bestand editor

De php code die geinstalleerd moetworden ziet er als volgt uit:

<!–?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?–>

Afhankelijk van het thema dat je gebruikt en afhankelijk van de plek waar je breadcrumb wilt laten zien zet je de code in de juiste file.

De files die het meest worden gebruikt voor het toevoegen van de breadcrumb zijn:

• Header.php
• Page.php
• Single.php

De code toevoegen aan de header voegt een breadcrumb aan elke pagina in de website toe.
De code op page.php voegt de breadcrumb alleen toe aan pagina’s.
De code toevoegen op single.php laat alleen een breadcrumb zien op de berichten (posts)

Let wel op waar je precies de code plakt in de file. Een verkeerde plek kan de weergave verstoren.

Het installeren van de breadcrumb in Divi kun je eenvoudig doen met de shortcode (zie afbeelding). In dit voorbeeld laten we zien hoe je het toevoegt aan de header in de Divi builder.

In de navigatiebalk links vind je onder de kop Divi de Divi Themabouwer.

Hier kun je algemene thema weergaven maken voor jouw webpagina.

Je kunt hier een algemene weergave maken voor de header, footer en de body van jouw website.

Als je al een wereldwijde koptekst hebt kun je deze aanpassen door op het potlood te klikken. Heb je deze niet klik dan op het lege veld en kies de optie “Bouw een wereldwijde koptekst”.

Als je al een header voorbereid had en deze opgeslagen hebt in de bibliotheek kun je de 2e optie toevoegen vanuit bibliotheek kiezen.

Met de nieuwe sectie kun je de breadcrumb in een smalle strook net onder de header plaatsen.

Je kunt uiteraard de styling naar wens aanpassen. We gaan er vanuit dat je enige kennis hebt van Divi om de styling zelf naar wens aan te kunnen passen.

De Rank Math breadcrumb shortcode is makkelijk in te voegen.

• Klik op het tandwiel van de tekst module

• Dan in het veld voor de tekst voer je de shortcode in.
• Klik op de groene knop met het vinkje om het op te slaan

De afstanden aanpassen.

Voor zowel de sectie (blauwe balk) als de rij (groen) hebben we de afstanden aangepast.

• Klik op het tandwiel in de blauwe balk
• Ga naar het 2e tabblad met ontwerp
• Klik op afstand
• Voer de gewenste afstanden in
• Klik op opslaan (groene knop met vinkje)

De afstanden aanpassen.

In de rij (groen) hebben we de afstanden als volgt aangepast.
De buffer aan de onderkant hebben we op 10px gezet om het wat beter uit te lijnen.
Uiteraard kun je dit naar wens aanpassen.

• Klik op het tandwiel in de blauwe balk
• Ga naar het 2e tabblad met ontwerp
• Klik op afstand
• Voer de gewenste afstanden in
• Klik op opslaan (groene knop met vinkje)

De achtergrondkleur aanpassen.

In de sectie(blauwe balk) hebben we de achtergrond met een andere kleur voorzien.
Naar wens kun je hier ook een verloop of afbeelding gebruiken.

• Klik op het tandwiel in de blauwe balk
• Klik op achtergrond
• selecteer vervolgens de gewenste tab (de eerste is een enkele kleur)
• Voer de gewenste kleur in
• Klik op opslaan (groene knop met vinkje)

Het tekstveld aanpassen.

Het tekstveld kun je naar wens aanpassen.

in dit voorbeeld hebben wij gekozen voor het standaard font met de standaard tekstgrootte van 14px

Wel hebben we de breadcrumb in hoofdletters gezet door de optie TT te activeren.

De kleur kun je naar wens aanpassen.

Als alle opties naar wens zijn gezet klik je op de groene knop met het vinkje om het op te slaan.

Als je terug bent in de themabouwer klik je als laatste op de groene knop: Alle wijzigingen opgeslagen