WordPress, creare un menù breadcrumb

Breadcrumb

Letteralmente breadcrumbs vuol dire “bricciole di pane” e sta ad indicare un tipo di menù presente sui siti con una struttura a categorie, in cui viene visualizzato con dei link ipertestuali il percorso gerarchico per giungere ad una data pagina.
Se ad esempio abbiamo un sito di musica e di dover scrivere una biografia di Vasco Rossi un tipo menù Braeacrumb è posti generalemten in alto, al di sopra del titolo dell’articolo, con una serie di link che indicano il percorso dalla home-page del sito fino alla pagina corrente :

Home > Musica > Rock > Artisti > Vasco Rossi


Dove ogni parola è, ovviamente, un link.

Questi menù, in genere visualizzati con caratteri di dimensione più piccola, servono per facilitare la navigazione degli utenti ed il lavoro degli spider dei motori di ricerca quindi l’utilizzo dei menu breadcrumbs è consigliatissimo.

In molti temi wordpress i menu breadcrumb sono previsti e visualizzati mentre in altri no, soprattutto nei siti in cui vi è un solo livello di categorie.
Ci sono diversi plugin wordpress per creare le breadcrumb senza mettere le mani al codice ma l’implementazione diretta nel codice permette sicuramente un controllo maggiore e una migliore personalizzazione.

Innanzitutto decidiamo dove inserire la breadcrumb.
Essendo la parte alta dal pos la sezione più indicata andremo ad inseire la nostra porzione di codice nel file header.php (Testata nelle versioni italiane).
In realtà per avere un codice pulito creiamo una funzione che crea la Breadcrumb nel file function.php e poi la richiamaiamo del file header.php
/p>

function mdf_breadcrumbs() {
 // Visualizza un menù breadcrumb
 // Data Creazione 25/12/2010
 // Autore : Modifycando.com (info@modifycando.com)
 
  $delimitatore = '»'; // Delimitatore tra i link
  $testoHome = 'Home Page'; //Testo da visualizzare per il link homePage
  
  // Tag che racchiudono i link, utili per definire uno stile per la visualizzazione
  $tagPreLink = '
  • '; $tagPostLink = '
  • '; if ( !is_home() && !is_front_page() || is_paged() ) { echo ''; } }

    Prossimo step, definire uno stile per la visualizzazione del nostro nuovo menù.
    Questa porzione di codice puà essere inserita nel file style.css

    
    .breadcrumbs li {
        list-style-type: none;
        float: left;
        margin: 0 0.5em 0 0;
    }
    
    .breadcrumbs li:before {
        content: "» ";
    }
    
    .breadcrumbs .front_page:before {
        content: none;
    }
    .breadcrumbs .front_page:before {
        content: none;
    }
    

    E per finire richiamiamo la nsotra funzione

    < ?php if (function_exists('mdf_breadcrumbs')) mdf_breadcrumbs(); ?>
    

    Il risultato doverbbe essere quello che vedete in alto nell’articolo.



    About Mauro De Filippis 16996 Articles
    Laureato in Ingegneria Informatica nel 2008 presso l'Università degli Studi di Lecce con una tesi in Processi di Produzione Robotizzati dal titolo "Integrazione delle tecniche di progettazione del ciclo di lavorazione con programmazione della produzione”. Le mie attività principali sono : sviluppo di applicativi ANSI C per terminali POS basati su processori ARM Risc 32Bit con 2-4 MB di Ram (progettazione, sviluppo e test delle applicazioni ) sviluppo in ambiente .NET sviluppo Web in ambiente PHP, ASP Installazione, progettazione, utilizzo di Db MS SQL Server, Mysql, Acces , Oracle Da anni mi occupo di CMS Open Source, in particolare di Joomla e Wordpress. Mia è la Guida Wordpress 3.5, la Guida Joomla 2.5 , il Corso online Joomla! 2.5 ed il Corso online Wordpress Mi occupo anche di LMS in particolare di Moodle e Docebo. Google+ by Mauro De Filippis

    Be the first to comment

    Leave a Reply

    L'indirizzo email non sarà pubblicato.


    *