I breadcrumbs (trad. briciole di pane) sono quei link, posizionati solitamente nella parte superiore della pagina web, che descrivono il percorso di un contenuto, mostrandolo secondo una gerarchia.
Esiste un intero Team all’interno di Google che concentra la propria attività sui breadcrumbs, che assumo un’importanza sempre maggiore, poichè aiutano utenti e motori di ricerca a comprendere la struttura di un sito.
Non è un caso che Google abbia recentemente sostituito le URL nelle pagine con i risultati di ricerca (SERP) proprio con le briciole di pane.
Nell’immagine sottostante i breadcrumbs di una pagina di questo sito, così come potete vederli sopra il titolo:
Il risultato prodotto sarà :
Inserire i Breadcrumbs su WordPress con un plugin
Come per quasi tutto, anche per inserire i breadcrumbs esistono svariati plugin, ne prenderemo in esame due:
- WordPress SEO by Yoast: è il primo che viene citato per la sua enorme diffusione. Questo plugin è sviluppato per gestire tutta la parte riguardante la SEO on-site. Se hai già questo plugin installato non devi aggiungerne di nuovi: basta recarsi dal menu del pannello di amministrazione sotto la voce SEO e successivamente Avanzato: il primo tab a disposizione permette di configurare i breadcrumbs secondo e esigenze. Una volta completata la configurazione bisognerà copiare ed incollare all’interno del tema una riga di codice disponibile nella stessa pagina. L’inserimento è semplice ed in caso di necessità è disponibile un link con la documentazione.
- Breadcrumb NavXT: questo plugin nasce con il solo scopo di aggiungere i breadcrumbs. Una volta installato e configurato anche questo plugin richiede l’inserimento all’interno del tema di un codice. Il plugin è disponibile nel repository ufficiale: Breadcrumb NavXT.
Esiste anche un modo per inserire le briciole di pane senza dover fare ricorso a plugin appositi. Per farlo basta inserire un codice nel file functions.php del template in uso (meglio nel tema child) o nel plugin personalizzato per inserire funzioni che abbiamo imparato a creare in passato.
Il codice da inserire è:
<?php function the_breadcrumb () {
// Settings $separator = ‘>’; $id = ‘breadcrumbs’; $class = ‘breadcrumbs’; $home_title = ‘Homepage’;
// Get the query & post information global $post,$wp_query; $category = get_the_category();
// Build the breadcrums echo ‘<ul id=”‘ . $id . ‘” class=”‘ . $class . ‘”>’;
// Do not display on the homepage if ( !is_front_page() ) {
// 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_single() ) {
// Single post (Only display the first category) echo ‘<li class=”item-cat item-cat-‘ . $category[0]->term_id . ‘ item-cat-‘ . $category[0]->category_nicename . ‘”><a class=”bread-cat bread-cat-‘ . $category[0]->term_id . ‘ bread-cat-‘ . $category[0]->category_nicename . ‘” href=”‘ . get_category_link($category[0]->term_id ) . ‘” title=”‘ . $category[0]->cat_name . ‘”>’ . $category[0]->cat_name . ‘</a></li>’; echo ‘<li class=”separator separator-‘ . $category[0]->term_id . ‘”> ‘ . $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 if ( is_category() ) {
// Category page echo ‘<li class=”item-current item-cat-‘ . $category[0]->term_id . ‘ item-cat-‘ . $category[0]->category_nicename . ‘”><strong class=”bread-current bread-cat-‘ . $category[0]->term_id . ‘ bread-cat-‘ . $category[0]->category_nicename . ‘”>’ . $category[0]->cat_name . ‘</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 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 );
// Display the tag name echo ‘<li class=”item-current item-tag-‘ . $terms[0]->term_id . ‘ item-tag-‘ . $terms[0]->slug . ‘”><strong class=”bread-current bread-tag-‘ . $terms[0]->term_id . ‘ bread-tag-‘ . $terms[0]->slug . ‘”>’ . $terms[0]->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>’;
}
?>
Una volta salvato bisognerà inserire un’altro codice nel template, nella posizione nella quale vogliamo che i breadcrumbs siano mostrati:
<?php the_breadcrumb(); ?>Per migliorare l’integrazione con la grafica è possibile poi agire via CSS, personalizzando il seguente codice ed aggiungendolo al foglio di stile:
#breadcrumbs{ list-style:none; margin:10px 0; overflow:hidden; } #breadcrumbs li{ display:inline-block; vertical-align:middle; margin-right:15px; }
#breadcrumbs .separator{ font-size:18px; font-weight:100; color:#ccc; }
In questo modo potrai inserire le briciole di pane sul tuo sito o blog! Se hai domande o considerazioni non esitare a lasciare un commento!