Le briciole di pane (Breadcrumbs) sono collegamenti molto importanti che hanno la funzione di:
- Indicare all’utente dove si trova all’interno di un sito. Se pensiamo a un ecommerce, dove di frequente le schede dei prodotti si trovano a un livello di profondità alto, è fondamentale dare modo all’utente di capire in che area del sito si trova, specie se raggiunge la pagina dal Search e non navigando il sito.
- Dare indicazioni al motore di ricerca circa la posizione della pagina nell’archiettura informativa, oltre ad arricchire il linking interno e a dare modo di inserire parole chiave contestualizzate (se l’architettura è stata realizzata con criterio).
La maggior parte dei template WordPress hanno la possibilità di attivare le breadcrumbs, se così non fosse per inserirle senza utilizzare un plugin occorre modificare alcuni file.
Il primo è il file function.php
Attenzione! Modificare erroneamente questo file può compromettere l’intero sito. Prima di qualsiasi modifica effettuare un backup.
/**
* Add breadcrumbs
*/
function create_breadcrumbs() {
$delimiter = '/';
$home = 'Home';
$before = '<span class="current">';
$after = '</span>';
if ( !is_home() && !is_front_page() || is_paged() ) {
echo '<div id="breadcrumbs">';
global $post;
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $before . single_cat_title('', false) . $after;
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('d') . $after;
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('F') . $after;
} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $before . get_the_title() . $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} elseif ( is_page() && !$post->post_parent ) {
echo $before . get_the_title() . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} elseif ( is_search() ) {
echo $before . get_search_query() . $after;
} elseif ( is_tag() ) {
echo $before . single_tag_title('', false) . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . $userdata->display_name . $after;
} elseif ( is_404() ) {
echo $before . 'Error 404' . $after;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
echo '</div>';
}
}
Poi bisogna aggiungere il seguente codice nell’area dove si vogliono far apparire le breadcrumbs
<div class="breadcrumbs"><?php create_breadcrumbs(); ?></div>
Infine si può personalizzare l’aspetto estetico con i css. Non modificare il nome delle classi, che vengono richiamate nel codice inserito negli altri file.
.breadcrumbs{
color: #000;
padding-bottom: 15px;
text-align: center;
}
.breadcrumbs a{
color: #cc0000;
padding-bottom: 15px;
text-align: center;
text-decoration: none;
font-weight: bold;
}