Come realizzare un semplice breadcrumb PHP

Oggi vediamo come creare un semplice breadcrumb PHP utile per aumentare il seo della vostra pagina e rendere più consultabile il vostro sito internet.

[button link=”http://www.targetweb.it/tutorial/2013/simple-breadcrumb/index.php” color=”blue” target=”blank” size=”large”]Demo[/button]

Come avrete visto dalla demo esplicativa, il breadcrumb è utilizzato solitamente per organizzare le sezioni del sito e renderle raggiungibili ai vostri visitatori con un solo click. Di fatto questo elemento è il risultato dell’indirizzo (url) digitato per raggiungere la pagina. Possiamo facilmente recuperare i dati dell’url usando la funzione php $_SERVER[“REQUEST_URI”] e filtrare poi opportunamente l’output. Di seguito troverete due soluzioni utili per gestire ed elaborare l’output.

Oltre a una maggiore User Experience per i vostri visitatori il breadcrumb è ben visto anche dal punto di vista SEO, quindi vi consiglio di usarlo.

Soluzione 1: Breadcrumb  con stile custom

In questa prima soluzione faremo tutto “a mano”. Per prima cosa predisponiamo la struttura html in questo modo:

<div class="breadcrumb">
 <?php
 $crumbs = explode("/",$_SERVER["REQUEST_URI"]);
   foreach($crumbs as $crumb){

     echo "<span><a href='#".$crumb."'>".ucfirst(trim(str_replace(array(".php","_"),array("",""),$crumb).''))."</a></span>";

  }//foreach
 ?>
</div>

Come potete notare ho usato la funzione explode di php per creare un array contenente i “pezzi” dell’url da visualizzare. Dopodichè tramite il ciclo foreach  analizzo l’array appena creato,  e per ciascuna sezione dell’url stampo a schermo uno span contenente l’elemento.

All’interno di echo ho filtrato eventiali spazi (trim) e rimosso le sezioni dell’url che non ci servono (ad esempio l’estensione) usando la funzione str_replace di php.

A questo punto aggiungiamo un po’ di stile al tutto:

  .breadcrumb{ background: #f7f7f7; border:1px solid #ececec; padding:10px 5px; }
  .breadcrumb span{ padding:5px 2px; }
  .breadcrumb span:after{ content: " /"; }
  .breadcrumb span a{ color: inherit; }
  .breadcrumb span a:hover{ font-weight: bold; }

La regola css più interessante è sicuramente span:after:

 .breadcrumb span:after{ content: " /"; }

Di fatto vi permette di aggiungere via css una sbarra (o un altro simbolo a piacere) automaticamente dopo ogni elemento span del nostro breadcrumb.

Soluzione 2: Stile usando Bootstrap

Se utilizzate Boostrap avete già a disposizione tutto lo stile necessario per il vostro breadcrumb. Di fatto vi basterà modificare l’html come segue:

<ol class="breadcrumb">
 <?php
  $crumbs = explode("/",$_SERVER["REQUEST_URI"]);
   foreach($crumbs as $crumb){

    echo "<li><a href='#".$crumb."'>".ucfirst(trim(str_replace(array(".php","_"),array("",""),$crumb).''))."</a></li>";

   }
  ?>
</ol>

Conclusioni

[button link=”http://www.targetweb.it/tutorial/2013/simple-breadcrumb/index.php” color=”blue” target=”blank” size=”large”]Demo stile custom[/button] [button link=”http://www.targetweb.it/tutorial/2013/simple-breadcrumb/index-bootstrap.php” color=”blue” target=”blank” size=”large”]Demo stile Boostrap[/button]

[viral-download file1=”http://www.targetweb.it/download/2013/semplice-breadcrumb-php.zip” name1=”Download!” url=”http://www.targetweb.it/come-realizzare-un-semplice-breadcrumb-php/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#PHP- Come realizzare un semplice breadcrumb PHP” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Tu usi altre soluzioni per i tuoi breadcrumbs? Condividili con noi nei commenti!

  1. Grazie mille por il tutorial! Sto utilizzando Jquery, sono ai primi passi. Il website che stro facendo é composto da diversi ulizzando css box. Ad ogni cambio di pagina, utlizzo $(‘#nomeDiv’).load(‘nomeDiPagina’) nel mio file .js cosí carico ogni file php solamente nel frame centrale del sito.
    Per utilizzare il tuo tutorial, come posso identificare ogni pagina con un proprio nome invece del nome del file? esempio: Categoria -> Supporto -> Hard disk -> esterni -> usb
    Grazie mille in anticipo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

music-player-in-formato-psd
Up Next:

Music player in formato PSD

Music player in formato PSD