WordPress breadcrumbs

Come noto i breadcrumbs sono quello strumento di navigazione che di solito si pone nella parte alta di un post sopra il titolo. Questo tipo di navigazione è già pronta di default in WP per i posts: all’interno del vostro blog, sopra il titolo del post, vedrete i link che vi consentono di scorrere i post in avanti e indietro con l’indicazione del loto titolo.
Come ottenere lo stesso strumento anche per le pagine? Anche in questo campo esistono numerosi plugin che risolvono in maniera più o meno complicata la questione ma se decidete di fare da soli in questo articolo darò qualche spunto frutto delle mie fatiche in qualità di “scarso-programmatore PHP-scarso conoscitore di WP”..

Il tipo di navigazione che si può ottenere con i breadcrumbs, cioè quali sono i link che si vogliono offrire per la navigazione, può essere di vario tipo: quello a disposizione per i post ad esempio consente di navigare da un post all’altro (di solito ordinati cronologicamente); un altro tipo, più comune nel caso delle pagine di un sito, potrebbe essere quello che utilizziamo solitamente nel desktop del pc ovvero vedere i link che mi consentano di attraversare tutto “l’albero” che parte dalla pagina Home fino alla pagina che sto guardando in quel momento, in modo da poter risalire di uno o più livelli con un semplice clic sul link relativo (naturalmente presuppongo che le pagine siano “annidate” in una struttura del tipo Home-pagina-sottopagina).

Ho affrontato entrambi i tipi di navigazione per le pagine: nel primo caso la navigazione scorre avanti-indietro le varie pagine come esse si trovano nel menu, una dopo l’altra (ripeto, forse non molto utile nel caso delle pagine di un sito); nel secondo caso posso navigare “l’albero” dei link all’indietro per risalirne uno o più livelli.

Per entrambi i casi, il codice va inserito, attraverso l’editor integrato in WordPress, nella pagina template Page.php che è appunto il prototipo di quello che vedete in ogni pagina del sito.

Primo caso: navigazione avanti indietro tra le pagine del menu

Ho trovato un esempio di codice nel sito WP Codex che ho appena leggermente adattato per ottenere nei breadcrumbs non dei semplice link Avanti e Indietro, ma i veri titoli delle pagine che si trovano “a valle” o “a monte” di quella attuale.

<!-- di solito andrà inserito prima del div Content o simili>
<?php
//leggo tutte le pagine ordinate come appaiono nel menu in ordine ascendente
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
//creo array dove inserisco tutti gli ID delle pagine
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}
//leggo l'ID della pagina corrente
$current = array_search($post->ID, $pages);
//leggo ID della pagina precedente
$prevID = $pages[$current-1];
//leggo ID della pagina successiva
$nextID = $pages[$current+1];
?>
//questo div dovrebbe già esserci nella vostra template page.php
<div class="navigation">
//se esiste pagina precedente
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
//creo un link, allineato a sinistra, che usa l'url della pagina e come testo il titolo della pagina
<a href="<?php echo get_permalink($prevID); ?>"
  title="<?php echo get_the_title($prevID); ?>">&laquo; <?php echo get_the_title($prevID); ?></a>
</div>
<?php }
//lo stesso per la pagina successiva che verrà posizionata a destra
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
 title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?> &raquo;</a>
</div>
<?php } ?>
</div><!-- .navigation -->
<!-- fine  -->

Dovreste ottenere qualcosa di simile alla figura:

dove a sinistra vedete il link per la pagina precedente (nell’ordine di menu), che nel mio caso si chiama “About” e a destra il link per la pagina successiva (“Products Page”).

Secondo caso: navigazione indietro tra le pagine dell’albero

In questo caso il codice è appena un po’ più elaborato perchè è necessario trovare i “parenti” della pagina corrente, ovvero il padre ed il padre del padre. Ho supposto che le mie pagine potessero presentare al massimo “profondità” tre, cioè del tipo: Home-sottopagina-sottopagina-sottopagina, ma è chiara la possibilità di gestire alberi più profondi.

<!-- sempre in page.php nella posizione opportuna -->
<?php
//come in precedenza
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}
$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
//ID della pagina corrente
$postid = get_the_ID();
//titolo della pagina corrente
$mypost_title=get_the_title($postid);
//titolo fisso per la Home
$home_title='Home'.' >>';
//url fisso per la Home
$home_url='http://www.test.com';
//imposto la pagina padre nulla
$parent_title='';
$parent_url= '#';
//se sto guardando una pagina e se essa ha padre
if ( is_page() && $post->post_parent ) {      
//ID del padre
$parentID = $post->post_parent;  
//titolo del padre                                        
$parent_title = get_the_title($parentID);
$parent_title=$parent_title.' >>';
//url del padre
$parent_url= get_permalink($parentID);
//imposto titolo e url nulli per la pagina nonno
$parent_parent_title='';
$parent_parent_url='#';    
//prendo l'oggetto pagina padre della pagina corrente
$mypost_parent= get_post($parentID);
//se la pagina padre ha padre
if ($mypost_parent->post_parent) {      
//leggo ID, titolo e url della pagina nonno
$parent_parentID = $mypost_parent->post_parent;                                          
$parent_parent_title = get_the_title($parent_parentID);
$parent_parent_title=$parent_parent_title.' >>';
$parent_parent_url= get_permalink($parent_parentID);  
} else {
//altrimenti metto titolo e url del nonno nulli
$parent_parent_title='';
$parent_parent_url='#';
};
}
?>
//costruisco i breadcrumbs
<div class="navigation">
<div class="alignleft">
//3 link in successione: Home, nonno, padre e poi pagina corrente (questa senza link)
<a href="<?php echo $home_url; ?>"><?php echo $home_title; ?></a>
<a href="<?php echo $parent_parent_url; ?>"><?php echo $parent_parent_title; ?></a>
<a href="<?php echo $parent_url; ?>"><?php echo $parent_title; ?></a><strong><?php echo $mypost_title; ?></strong>
</div>
</div><!-- .navigation -->
<!-- fine  -->

Otterrete qualcosa del tipo di figura:

Qualcuno noterà che in realtà About non è figlia di Home, ma ho preferito far sempre comparire nei breadcrumbs un riferimento alla pagina Home per ovvi motivi.

Sicuramente è possibile scrivere codice molto migliore (ad esempio sarebbe meglio chiamare una function all’interno di page.php), quindi prendeteli solo come esempietti da migliorare ed estendere per le vostre esigenze specifiche.

About the Author

Carlo Bazzo
Carlo Bazzo è fondatore di Epysoft, una start up tecnologica con sede a Treviso e CTO di Hdemo Network Business Solutions. Puoi contattare Carlo Bazzo su Linkedin.