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:

<?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>';
    }
?>

[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:

.breadcrumbs li {
    list-style-type: none;

    float: left;
    margin: 0 0.5em 0 0;
}

[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”.

.breadcrumbs li:before {
    content: " ";
}

Applichiamo anche qualche modifica di stile al separatore che si trova all’inizio della lista:

.breadcrumbs .front_page:before {
    content: none;
}

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.