Utilizzare i breadcrumbs in WordPress

Scopri come e perché utilizzare i breadcrumbs sul tuo sito in WordPress, per migliorare la UserExperience degli utenti e la tua strategia SEO.

Cosa sono i breadrumbs?

I breadcrumbs, letteralmente, sono le briciole di pane che ipoteticamente “pollicino” lascia sul suo cammino.

Ogni utente che naviga sul vostro sito web, clicca e si addentra nelle gerarchie dei vostri contenuti e molte volte si trova a dover navigare a ritroso per cercare altri contenuti che gli interessano, come post, prodotti e contenuti creati ad hoc.

A cosa servono i breadcrumbs?

I breadcrumbs come appena accennato, servono per una navigazione più precisa e gerarchica dei vostri contenuti.

Pensate al vostro blog… la gerarchia iniziale sarà Home / Blog

Però il vostro blog, probabilmente, avrà anche delle categorie, che vengono trattate con post personalizzati. Prendete l’esempio di un blog che parla di sport; una categoria sarà “calcio” e magari come sotto categoria sarà “serie A” e, perché no, come ultima sotto categoria sarà una squadra di calcio della serie A come ad esempio “A.S. Roma”.

Bene, i breadcrumbs, non fanno altro che mostrarvi il percorso che avete appena fatto:

Home / Calcio / Serie A / A.S. Roma

In questo modo, l’utente potrà tornare indietro di 1 posizione o più, secondo il percorso che ha fatto.

Tecnicamente l’utilizzo della freccia “dietro” del browser porta comunque indietro di una posizione, ma non ti permette di tornare velocemente alla sezione “Serie A” o “Calcio” o perché no anche alla selezione dello sport, che potrà essere magari “scherma”.

Come vengono visualizzati i breadcrumbs?

I breadcrumbs, visivamente si presentano così:

Il percorso dell’utente è preso visualizzato e soprattutto cliccabile dall’utente.

Perché i breadcrumbs sono importanti per la SEO?

Un utente che già ha a che fare con la SEO lo può intuire molto facilmente il perché, ma eccovi la spiegazione un po’ più approfondita.

I motori di ricerca, come Google e Bing, hanno un modo di ricercare e scansionare tutta la struttura del sito web con semplici passaggi:

• tramite la sitemap.xml
• tramite il menù di navigazione
• tramite i breadcrumbs

La sitemap

Fornisce ad un motore di ricerca la struttura completa e tecnica dell’intero sito web.

Il menù di navigazione

Fornisce una diversa struttura del sito web, imposta dal webmaster e/o seo specialist che può differire dalla struttura del sito web.

I breadcrumbs

Sono un rafforzativo sulla pagina, della struttura del sito web e un modo di passare “juice” a pagine strutturalmente superiori, così da migliorare la link net interna.

Come inserire i breadcrumbs all’interno di WordPress, in modo dinamico e automatico

Ovviamente, se seguite il mo blog, ci sono sempre 2 vie, una tramite plugin e una, che preferisco sempre, tramite l’inserimento di codice.

Inserire i breadcrumbs in WordPress plugin

Yoast SEO – Premium

Il “migliore” o forse semplicemente quello che gli utenti sono più portati ad utilizzare è sicuramente Yoast SEO – Premium.

Incoraggiati dall’utilizzo da molti anni della versione Free, molti utenti preferiscono utilizzare questo plugin che a fronte di qualche decina di euro, possono sbloccare molte features che aiutano la SEO, tra cui i breadcrumbs.

Non vi dice niente il fatto che un plugin che tratta l’ottimizzazione SEO, vi permetta di incorporare i breadcrumbs?? 😉

Breadcrumb NavXT

É un buon plugin, funzionale ma un po’ ostico da personalizzare se non si è proprio pratici…

A differenza di altri plugin, permette di personalizzare le voci dei crumbs, e relativi link ma, nonostante sia abbastanza spartana come visualizzazione, può risultare ostico settare il tutto (il plugin appena installato ha dei valori di default, consiglio di lasciare quelli)

Altri plugin, ma non più aggiornati da alcuni anni ma che dovrebbero funzionare

Come da titolo, ecco un elenco di plugin che permettono l’inserimento dei breadcrumbs in wordpress ma che non sono più aggiornati da alcuni anni, ma che comunque dovrebbero funzionare.

• RDFa Breadcrumb
• Breadcrumb Trail

Inserire i breadcrumbs in WordPress con Codice

Adesso veniamo al mio metodo preferito.

Copiate il codice sottostante e inseritelo all’interno del function.php del vostro tema.

/* @@@@@@@@@@@@ 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>'; } } 

Adesso, andate nel page.php o single.php o dovunque volete inserire i crumbs e incollate nel punto che vi interessa, questo codice:

<?php custom_breadcrumbs(); ?> 

Se utilizzate Bootstrap, potere contenere il tutto all’interno di un container in questo modo:

 <div class="container-fluid" style=";text-align:left;"> <div class="container"> <?php custom_breadcrumbs(); ?> </div> </div> 

Et Voilà… Breadcrumbs inseriti e funzionanti.

Come inserire i breadcrumbs in WordPress in modo manuale e statico

Differentemente a quanto appena mostrato, c’è un modo semplice di inserirli manualmente pagina per pagina e per fare ciò ci viene in aiuto Bootstrap.

Con un piccolo snippet, possiamo andare ad inserire la struttura che vogliamo mostrare.

Per fare questo però serve bootstrap, nel caso voi non l’abbiate già..

Come inserire Bootstrap 4 velocemente

Per chi è già pratico, sa già come fare, per chi non dovesse conoscere la procedura, per velocizzare le cose, andate ad inserire il codice seguente all’interno del tag <head> del vostro header.php ( Ci sono molti plugin che permette di inserire codici in head e footer )

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 

e questi prima della chiusura del tag </body>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Esempio di codice per breadcrumbs

Il codice da inserire nella pagina, tramite il blocco HTML di Gutenberg, il classic editor o direttamente da codice nella pagina.php, è il seguente:

 <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav>

Conclusioni

Come potete vedere, questa guida, è molto esplicativa e adatta sia a chi da poco si approccia con WordPress, a chi invece ha iniziato una vera e propria carriera, andando a modificare il codice del tema, che ricordo vi consiglio di farlo tramite un tema figlio: se non sapete come si fa, vi viene in aiuto la mia guida Creare un Child Theme in WordPress.

Se avete dei dubbi o delle perplessità, parlatene pure nei commenti in fondo all’articolo.