BreadCrumbs

Je wilt breadcrumbs op je website zonder plugins? Dat kan met onderstaande code te plaatsen in de daarbij horende WordPress (child) thema templates. We beginnen met onderstaande PHP code te plaatsen in je functions.php (child thema). Wat zijn breadcrumbs? Ze helpen je bij de navigatie op de website; statische pagina’s maar ook gecategoriseerde blogberichten. Zie afbeelding. breadcrumbs

 

 

 

 

/*——— Breadcrumbs ———-*/
// 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>’;

}

}

Dan voegen we toe in een template, met name de header.php uit het thema doet het erg goed hiervoor.

<?php custom_breadcrumbs(); ?>

Tot slot de CSS voor een knappe opmaak.

/******** BreadCrumbs ********/
#breadcrumbs{
list-style:none;
margin:55px 0;
overflow:hidden;
background-color: rgba(0,0,0,.25);
border-radius: 8px;
max-width: 500px;
margin-left:10px;
}

#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-right:15px;
}

#breadcrumbs .separator{
font-size:18px;
font-weight:100;
color:#ccc;
}

Ik ben GDPR/AVG compliant!

We hebben het voor elkaar; https, een groen slotje, cookie notice en een privacy verklaring zodat de website voldoet aan de GDPR/AVG wet! Als je zelf een website/blog runt dan zul je deze stappen ook moeten nemen, eigenlijk moest dat al voor 25-mei 2018, maar men voert een mild beleid. Echter zal er een dag komen dat je beboet kunt worden als je website niet aan deze regels voldoet. Het gaat om:

  • SSL certificaat (https met groen slotje)
  • Cookie notice (melding dat je cookies gebruikt, bijna alle websites doen dat)
  • Privacyverklaring waarin je inzichtelijk maakt hoe je omgaat met gebruikers gegevens

Zorg dat dit in orde is!  

Templates aanpassen en gebruiken als sjabloon

Je kunt in WordPress relatief eenvoudig pagina’s iets unieks meegeven, b.v.: je wilt op de homepage geen sidebars en een full width voor de content. Als je thema’s inkoopt zijn die sjablonen vaak al bij het thema geleverd, maar als dat niet zo is of als je zelf thema’s bouwt zul je het zelf moeten doen.

  • Maak een kopie van page.php en hernoem deze naar: front-page.php
  • open ‘front-page.php’ en plaats het volgende bovenin bij de comments:

<?php
/**
* Template Name: front-page
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site may use a
* different template.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package TCZ
*/

Het relevante gedeelte is * Template Name: front-page 

  • Zoek in front-page.php naar het stukje waar de sidebar wordt aangeroepen en verwijder deze
  • Geef je content div de huidige class/id maar voeg bv -fp er achter. Dan zou de selector bv content-fp gaan worden dus.
  • Geef in je stylesheet ‘content-fp’ een width:100% 
  • Ga in het WordPress admin paneel naar ‘Pagina’s’
  • Edit de ‘home’ pagina en kijk rechts: onder ‘Pagina attributen’ kun je een template instellen
  • Zoek daar naar ‘front-page’ en klik op Bijwerken

Je home pagina zou nu geen sidebars meer moeten hebben en een content area met full width.

 

Succes!