Wat zijn WordPress breadcrumbs?

Breadcrumbs of broodkruimelpad in het Nederlands is een soort mini navigatie op je pagina. Met breadcrumbs kunnen bezoekers op je website zien waar zij op je website zijn en kunnen spiders van zoekmachines de structuur van je website doorgronden. Het is vooral handig bij dieperliggende pagina’s op je website omdat bezoekers dan makkelijk naar een andere pagina kunnen navigeren.

Waarom breadcrumbs op je website gebruiken?

De belangrijkste reden om breadcrumbs op je website te gebruiken is om je bezoekers een betere website ervaring te geven. Bezoekers zien in één oogopslag waar zij zich op de website bevinden en kunnen met één klik naar een bovenliggende pagina navigeren. Denk bijvoorbeeld aan een webshop. Je bekijkt een bepaald type schoen en door de breadcrumbs navigeer je eenvoudig naar de categorie waar deze schoen in valt.

Naast dat breadcrumbs goed voor je bezoekers zijn, is het ook goed om deze voor zoekmachines te plaatsen. Het helpt zoekmachines namelijk om de structuur van je website te begrijpen. Het helpt een klein beetje voor de vindbaarheid omdat er interne links aangemaakt worden. Bovendien worden breadcrumbs in de zoekresultaten getoond waardoor gebruikers van de zoekmachine ook naar andere pagina’s kunnen klikken.

Hoe voeg je breadcrumbs aan je WordPress website toe?

Breadcrumbs aan je WordPress website toevoegen kan op verschillende manieren. Het is o.a. afhankelijk van het gebruikte WordPress theme welke je kan gebruiken.

Breadcrumbs activeren via je WordPress theme
Breadcrumbs toevoegen via een plugin
Breadcrumbs toevoegen aan de broncode

Breadcrumbs activeren via je WordPress theme

De makkelijkste manier om breadcrumbs te activeren is om dit via je WordPress theme te doen. Maar dan moet je theme het wel ondersteunen! Niet elke theme heeft deze optie. Als je gebruik maakt van het Genesis framework is het activeren van de breadcrumbs een standaard optie die je activeert door deze aan te klikken.

Breadcrumbs toevoegen via een plugin

Mocht je de optie om de breadcrumbs via je theme te activeren niet hebben, dan is het ook zeer eenvoudig om dit te regelen met de Yoast SEO plugin. Onder de optie: SEO > Search Appearances > Kruimelpad kun je het kruimelpad activeren.

Vervolgens moet je nog een stukje PHP code aan je website toevoegen. Afhankelijk van waar je de breadcrumbs wil tonen, gebruik je een ander bestand. De PHP code plaats je in je één van onderstaande bestanden:

single.php – breadcrumbs worden op artikelen (posts) getoond
page.php – breadcrumbs worden op pagina’s (pages) getoond
header.php – breadcrumbs worden overal getoond

Dit is de code die je moet plaatsen:

Je kunt de look and feel van je breadcumbs eventueel nog aanpassen door CSS te gebruiken.

Breadcrumbs toevoegen aan de broncode

Mochten bovenstaande opties niet werken of wil je het liever via de broncode toevoegen, dan kan dat ook. Hiervoor moet je een eigen PHP functie aan je WordPress theme toevoegen. Breadcrumbs op deze manier toevoegen is wel een stukje lastiger, de eerste 2 optie genieten de voorkeur voor als je niet zo technisch bent.

Onderstaande vind je de code voor de breadcrumbs functie. Kopieer de code en voeg deze toe aan het bestand functions.php van je theme:

	// Breadcrumbs
	function custom_breadcrumbs() {

	// Settings
	$separator = '>';
	$breadcrums_id = 'breadcrumbs';
	$breadcrums_class = 'breadcrumbs';
	$home_title = 'Homepage';

	// If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
	$custom_taxonomy = 'product_cat';

	// Get the query & post information
	global $post,$wp_query;

	// Do not display on the homepage
	if ( !is_front_page() ) {

	// Build the breadcrums
	echo '<ul id="' . $breadcrums_id . '" class="' . $breadcrums_class . '">';

	// Home page
	echo '<li class="item-home"><a class="bread-link bread-home" href="' . get_home_url() . '" title="' . $home_title . '">' . $home_title . '</a></li>';
	echo '<li class="separator separator-home"> ' . $separator . ' </li>';

	if ( is_archive() && !is_tax() && !is_category() && !is_tag() ) {

	echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">' . post_type_archive_title($prefix, false) . '</strong></li>';

	} else if ( is_archive() && is_tax() && !is_category() && !is_tag() ) {

	// If post is a custom post type
	$post_type = get_post_type();

	// If it is a custom post type display name and link
	if($post_type != 'post') {

	$post_type_object = get_post_type_object($post_type);
	$post_type_archive = get_post_type_archive_link($post_type);

	echo '<li class="item-cat item-custom-post-type-' . $post_type . '"><a class="bread-cat bread-custom-post-type-' . $post_type . '" href="' . $post_type_archive . '" title="' . $post_type_object->labels->name . '">' . $post_type_object->labels->name . '</a></li>';
	echo '<li class="separator"> ' . $separator . ' </li>';

	}

	$custom_tax_name = get_queried_object()->name;
	echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">' . $custom_tax_name . '</strong></li>';

	} else if ( is_single() ) {

	// If post is a custom post type
	$post_type = get_post_type();

	// If it is a custom post type display name and link
	if($post_type != 'post') {

	$post_type_object = get_post_type_object($post_type);
	$post_type_archive = get_post_type_archive_link($post_type);

	echo '<li class="item-cat item-custom-post-type-' . $post_type . '"><a class="bread-cat bread-custom-post-type-' . $post_type . '" href="' . $post_type_archive . '" title="' . $post_type_object->labels->name . '">' . $post_type_object->labels->name . '</a></li>';
	echo '<li class="separator"> ' . $separator . ' </li>';

	}

	// Get post category info
	$category = get_the_category();

	if(!empty($category)) {

	// Get last category post is in
	$last_category = end(array_values($category));

	// Get parent any categories and create array
	$get_cat_parents = rtrim(get_category_parents($last_category->term_id, true, ','),',');
	$cat_parents = explode(',',$get_cat_parents);

	// Loop through parent categories and store in variable $cat_display
	$cat_display = '';
	foreach($cat_parents as $parents) {
	$cat_display .= '<li class="item-cat">'.$parents.'</li>';
	$cat_display .= '<li class="separator"> ' . $separator . ' </li>';
	}

	}

	// If it's a custom post type within a custom taxonomy
	$taxonomy_exists = taxonomy_exists($custom_taxonomy);
	if(empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {

	$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
	$cat_id = $taxonomy_terms[0]->term_id;
	$cat_nicename = $taxonomy_terms[0]->slug;
	$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
	$cat_name = $taxonomy_terms[0]->name;

	}

	// Check if the post is in a category
	if(!empty($last_category)) {
	echo $cat_display;
	echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';

	// Else if post is in a custom taxonomy
	} else if(!empty($cat_id)) {

	echo '<li class="item-cat item-cat-' . $cat_id . ' item-cat-' . $cat_nicename . '"><a class="bread-cat bread-cat-' . $cat_id . ' bread-cat-' . $cat_nicename . '" href="' . $cat_link . '" title="' . $cat_name . '">' . $cat_name . '</a></li>';
	echo '<li class="separator"> ' . $separator . ' </li>';
	echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';

	} else {

	echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';

	}

	} else if ( is_category() ) {

	// Category page
	echo '<li class="item-current item-cat"><strong class="bread-current bread-cat">' . single_cat_title('', false) . '</strong></li>';

	} else if ( is_page() ) {

	// Standard page
	if( $post->post_parent ){

	// If child page, get parents
	$anc = get_post_ancestors( $post->ID );

	// Get parents in the right order
	$anc = array_reverse($anc);

	// Parent page loop
	if ( !isset( $parents ) ) $parents = null;
	foreach ( $anc as $ancestor ) {
	$parents .= '<li class="item-parent item-parent-' . $ancestor . '"><a class="bread-parent bread-parent-' . $ancestor . '" href="' . get_permalink($ancestor) . '" title="' . get_the_title($ancestor) . '">' . get_the_title($ancestor) . '</a></li>';
	$parents .= '<li class="separator separator-' . $ancestor . '"> ' . $separator . ' </li>';
	}

	// Display parent pages
	echo $parents;

	// Current page
	echo '<li class="item-current item-' . $post->ID . '"><strong title="' . get_the_title() . '"> ' . get_the_title() . '</strong></li>';

	} else {

	// Just display current page if not parents
	echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '"> ' . get_the_title() . '</strong></li>';

	}

	} else if ( is_tag() ) {

	// Tag page

	// Get tag information
	$term_id = get_query_var('tag_id');
	$taxonomy = 'post_tag';
	$args = 'include=' . $term_id;
	$terms = get_terms( $taxonomy, $args );
	$get_term_id = $terms[0]->term_id;
	$get_term_slug = $terms[0]->slug;
	$get_term_name = $terms[0]->name;

	// Display the tag name
	echo '<li class="item-current item-tag-' . $get_term_id . ' item-tag-' . $get_term_slug . '"><strong class="bread-current bread-tag-' . $get_term_id . ' bread-tag-' . $get_term_slug . '">' . $get_term_name . '</strong></li>';

	} elseif ( is_day() ) {

	// Day archive

	// Year link
	echo '<li class="item-year item-year-' . get_the_time('Y') . '"><a class="bread-year bread-year-' . get_the_time('Y') . '" href="' . get_year_link( get_the_time('Y') ) . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</a></li>';
	echo '<li class="separator separator-' . get_the_time('Y') . '"> ' . $separator . ' </li>';

	// Month link
	echo '<li class="item-month item-month-' . get_the_time('m') . '"><a class="bread-month bread-month-' . get_the_time('m') . '" href="' . get_month_link( get_the_time('Y'), get_the_time('m') ) . '" title="' . get_the_time('M') . '">' . get_the_time('M') . ' Archives</a></li>';
	echo '<li class="separator separator-' . get_the_time('m') . '"> ' . $separator . ' </li>';

	// Day display
	echo '<li class="item-current item-' . get_the_time('j') . '"><strong class="bread-current bread-' . get_the_time('j') . '"> ' . get_the_time('jS') . ' ' . get_the_time('M') . ' Archives</strong></li>';

	} else if ( is_month() ) {

	// Month Archive

	// Year link
	echo '<li class="item-year item-year-' . get_the_time('Y') . '"><a class="bread-year bread-year-' . get_the_time('Y') . '" href="' . get_year_link( get_the_time('Y') ) . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</a></li>';
	echo '<li class="separator separator-' . get_the_time('Y') . '"> ' . $separator . ' </li>';

	// Month display
	echo '<li class="item-month item-month-' . get_the_time('m') . '"><strong class="bread-month bread-month-' . get_the_time('m') . '" title="' . get_the_time('M') . '">' . get_the_time('M') . ' Archives</strong></li>';

	} else if ( is_year() ) {

	// Display year archive
	echo '<li class="item-current item-current-' . get_the_time('Y') . '"><strong class="bread-current bread-current-' . get_the_time('Y') . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</strong></li>';

	} else if ( is_author() ) {

	// Auhor archive

	// Get the author information
	global $author;
	$userdata = get_userdata( $author );

	// Display author name
	echo '<li class="item-current item-current-' . $userdata->user_nicename . '"><strong class="bread-current bread-current-' . $userdata->user_nicename . '" title="' . $userdata->display_name . '">' . 'Author: ' . $userdata->display_name . '</strong></li>';

	} else if ( get_query_var('paged') ) {

	// Paginated archives
	echo '<li class="item-current item-current-' . get_query_var('paged') . '"><strong class="bread-current bread-current-' . get_query_var('paged') . '" title="Page ' . get_query_var('paged') . '">'.__('Page') . ' ' . get_query_var('paged') . '</strong></li>';

	} else if ( is_search() ) {

	// Search results page
	echo '<li class="item-current item-current-' . get_search_query() . '"><strong class="bread-current bread-current-' . get_search_query() . '" title="Search results for: ' . get_search_query() . '">Search results for: ' . get_search_query() . '</strong></li>';

	} elseif ( is_404() ) {

	// 404 page
	echo '<li>' . 'Error 404' . '</li>';
	}

	echo '</ul>';

	}

	}

view raw breadcrumbs.php hosted with ❤ by GitHub

Om de breadcrumbs te activeren, plaats je onderstaande code in je header.php bestand.

<?php custom_breadcrumbs(); ?>

view raw header.php hosted with ❤ by GitHub

Eventueel kun je ook hier de look and feel met CSS aanpassen.