Creare breadcrumb per WordPress

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.

Condividi

Condividi su facebook
Condividi su twitter
Condividi su linkedin