Il tutorial per WordPress di oggi è incentrato sulla creazione di breadcrumb. Le breadcrumb sono le famose “briciole di pane”, elementi molto importanti per la navigazione di siti o blog.
Le breadcrumb per WordPress si possono creare anche tramite appositi plugin, ma l’implementazione diretta nel codice permette un controllo maggiore (ed una migliore personalizzazione).
[PASSO 1] – Dobbiamo aprire e modificare il file dove vogliamo appaia la “briciola”. Il file preferito per operazioni simili è header.php, l’elemento che identifica la testata. La scelta ricade sulla parte “header” perché è in questa posizione che di solito la breadcrumb viene posizionata in posizione orizzontale.
NB: la briciola di pane può essere impostata a seconda delle proprie preferenze o esigenze: può essere quindi verticale, estensibile o di altro modo.
[PASSO 2] – Aprire il file header.php ed incollare il seguente codice:
[html]<?php // Navigazione tramite "briciola di pane"
if (is_page() && !is_front_page() || is_single() || is_category()) {
echo ‘<ul class="breadcrumbs">’;
echo ‘<li class="front_page"><a href="’.get_bloginfo(‘url’).’">’.get_bloginfo(‘name’).'</a></li>’;
if (is_page()) {
$ancestors = get_post_ancestors($post);
if ($ancestors) {
$ancestors = array_reverse($ancestors);
foreach ($ancestors as $crumb) {
echo ‘<li><a href="’.get_permalink($crumb).’">’.get_the_title($crumb).'</a></li>’;
}
}
}
if (is_single()) {
$category = get_the_category();
echo ‘<li><a href="’.get_category_link($category[0]->cat_ID).’">’.$category[0]->cat_name.'</a></li>’;
}
if (is_category()) {
$category = get_the_category();
echo ‘<li>’.$category[0]->cat_name.'</li>’;
}
// pagina o post specifico
if (is_page() || is_single()) {
echo ‘<li class="current">’.get_the_title().'</li>’;
}
echo ‘</ul>’;
} elseif (is_front_page()) {
// Home page
echo ‘<ul class="breadcrumbs">’;
echo ‘<li class="front_page"><a href="’.get_bloginfo(‘url’).’">’.get_bloginfo(‘name’).'</a></li>’;
echo ‘<li class="current">Home Page</li>’;
echo ‘</ul>’;
}
?>[/html]
[PASSO 3] – Ora dobbiamo modellare lo stile della briciola: apriamo il foglio di stile CSS e creiamo una classe che ci permetta di posizionare in orizzontale, e a sinistra, la briciola. Alla classe assoceremo anche una spaziatura. Esempio:
[html].breadcrumbs li {
list-style-type: none;
float: left;
margin: 0 0.5em 0 0;
}[/html]
[PASSO 4] – Continuiamo con la stilizzazione grafica ed aggiungiamo il segno tipografico che ci farà da separatore. In questo caso le virgolette conosciute come “caporali”.
[html].breadcrumbs li:before {
content: "» ";
}[/html]
Applichiamo anche qualche modifica di stile al separatore che si trova all’inizio della lista:
[html].breadcrumbs .front_page:before {
content: none;
}[/html]
Nell’esempio, il codice implementato permette di mostrare solo la prima categoria di nidificazione: questo perché nelle liste orizzontali si potrebbero creare dei problemi di visualizzazione (e di usabilità) in presenza di un elenco molto lungo o profondo.
