{"id":4281,"date":"2021-12-13T10:00:37","date_gmt":"2021-12-13T09:00:37","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=4281"},"modified":"2024-10-01T13:58:27","modified_gmt":"2024-10-01T11:58:27","slug":"paragrafo27","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo27\/","title":{"rendered":"\u00a7\u00a027. Breadcrumbs: lo\u00a0script universale in\u00a0PHP"},"content":{"rendered":"

Sono sicuro che i lettori del presente paragrafo sanno già che cosa sia e quanto sia utile il menu breadcrumbs: ne avevo scritto pure io<\/a>. Quindi ora vedo di proporre una prima soluzione, un primo consiglio pratico sul come creare un menu breadcrumbs con uno script in PHP. Per questa volta si tratta di una soluzione universale – generica – adatta per dei progetti di piccole dimensioni e con una struttura non particolarmente complessa, compresi gli eventuali siti costruiti senza un CMS e\/o, addirittura, senza un database.
\nLe persone più pigre possono andare direttamente al codice finale completo<\/a>, mentre io inizierei dalla spiegazione di alcuni dettagli: la comprensione di questi vi aiuterà a ottimizzare il risultato finale per le vostre esigenze concrete.
\n<\/a>1. Elaboriamo l’algoritmo<\/b>
\nI siti web moderni progettati in un modo intelligente hanno gli URL strutturati sulla base della gerarchia delle pagine: l’indirizzo di ogni singola pagina concreta contiene i riferimenti a ognuna delle pagine di rango superiore (le quali svolgono spesso la funzione delle categorie); ogni singolo riferimento è separato dagli slash («\/») dal resto dell’indirizzo. In qualità di un semplice esempio possiamo vedere l’URL del presente paragrafo: https:\/\/eugigufo.net\/it\/inerario\/paragrafo27.
\nQuesto indirizzo, infatti, è fatto dalle seguenti componenti:
\n1. La pagina iniziale (eugigufo.net, la root),
\n2. La pagina iniziale della versione italiana del sito (it),
\n3. L’indice dell’Inerario (inerario),
\n4. L’oggetto della categoria, in questo specifico caso il paragrafo 27 (paragrafo27).
\nIn sostanza, durante la navigazione del visitatore dalla pagina iniziale verso questo paragrafo, l’URL a egli visibile si arricchisce di nuovi elementi: quelli che indicano i livelli gerarchici precedenti e quello della pagina corrente. Di conseguenza, possiamo facilmente immaginare l’algoritmo della costruzione del menu breadcrumbs da tradurre in codice:
\n1. Ottenere l’URL della pagina corrente,
\n2. Analizzare l’URL ottenuto, scomponendolo in elementi separati dai slash,
\n3. Per ogni elemento identificato assegnare un nome (che verrà linkato e visualizzato nel menu) e costruire il suo indirizzo,
\n4. Trasmettere i nomi e gli indirizzi in un array che poi verrà utilizzato nel template del menu breadcrumbs,
\n5. Organizzare la visualizzazione del template del menu breadcrumbs sulle pagine del sito.
\nTale algoritmo non dipende dal modo in cui è stato realizzato il sito (e quindi non dipende dal tipo e dal solo fatto di esistenza di un CMS) in quanto per funzionare ha bisogno solo dell’URL della pagina corrente. Non è nemmeno necessario interrogare un eventuale database per ottenere i nomi delle pagine superiori.
\n<\/a>2. Ipotizziamo un caso realistico<\/b>
\nSupponiamo di voler aggiungere il menu breadcrumbs a un piccolo sito aziendale che si trova all’indirizzo codicephp.it.
\nSupponiamo anche che quel sito abbia la seguente struttura:<\/p>\n\n\n\n\n\n\n\n\n\n\n
Il nome della pagina<\/i><\/td>\n  <\/td>\nL’indirizzo della pagina<\/i><\/td>\n<\/tr>\n
Home<\/td>\n  <\/td>\ncodicephp.it\/<\/td>\n<\/tr>\n
Chi siamo<\/td>\n  <\/td>\ncodicephp.it\/aboutus<\/td>\n<\/tr>\n
Servizi<\/td>\n  <\/td>\ncodicephp.it\/services<\/td>\n<\/tr>\n
   Portfolio<\/td>\n  <\/td>\ncodicephp.it\/services\/portfolio<\/td>\n<\/tr>\n
   Prezzi<\/td>\n  <\/td>\ncodicephp.it\/services\/prices<\/td>\n<\/tr>\n
Blog<\/td>\n  <\/td>\ncodicephp.it\/services\/blog<\/td>\n<\/tr>\n
Contatti<\/td>\n  <\/td>\ncodicephp.it\/contacts<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\nIn particolare, le pagine Portfolio e Prezzi ci servono per verificare il funzionamento del nostro menu breadcrumbs con più di una voce (quindi con qualcosa oltre il link alla Home). Il nostro obbiettivo è quello di far comparire il menu breadcrumbs in questo header:
\n
\nOra, finalmente, possiamo dedicarci al codice. Esso sarà composto da due parti: una parte responsabile della formazione dell’array contenente i nomi assegnati agli elementi dell’URL e i rispettivi indirizzi (quindi i nomi e gli URL delle pagine di rango superiore a quella corrente) e l’altra parte responsabile della visualizzazione del menu breadcrumbs.
\nOvviamente, anche la prima parte del codice deve in qualche modo essere presente su tutte le pagine del sito perché dobbiamo analizzare l’URL corrente ogni volta che visualizziamo il menu breadcrumbs: per esempio, potete inserirla\/includerla nel header.
\n<\/a>3. La formazione dell’array dei breadcrumbs<\/b>
\nPrima di tutto, seguendo il nostro algoritmo, dobbiamo determinare l’URL della pagina corrente. A tale scopo ci è molto utile la variabile superglobale $_SERVER offertaci dal PHP: in essa sono contenute le varie informazioni sullo script eseguito sul lato server. L’URL corrente è raggiungibile grazie al REQUEST_URI:<\/p>\n

\n$cur_url = $_SERVER['REQUEST_URI'];\n<\/pre>\n
\nUna volta recuperato l’URL, dobbiamo scomporlo in elementi. Non è difficile, dato che tutti i suoi elementi sono separati dai slash, quindi analizziamo l’URL corrente:<\/p>\n
\n$urls = explode('\/', $cur_url);\n<\/pre>\n
\nProcediamo a creare un array vuoto per metterci dentro le informazioni sui nomi degli elementi dei breadcrumbs e dei loro indirizzi:<\/p>\n
\n$crumbs = array();\n<\/pre>\n
\nIl prossimo passaggio dell’algoritmo è la formazione dei link e dei nomi degli elementi del menu. A tale scopo analizziamo le parti dell’URL corrente all’interno di un ciclo, creando anche un array per gli indirizzi degli elementi dei breadcrumbs che rappresentano le pagine precedenti.
\nTrovo logico creare il menu breadcrumbs per tutte le pagine del sito a eccezione della prima (la home o la principale: dipende come preferite chiamarla). Infatti, non avrebbe senso generare un menu con un solo link che per di più ci porterebbe alla medesima pagina corrente.
\nQuindi ci viene un codice di questo tipo:<\/p>\n
\nif (!empty($urls) && $cur_url != '\/') {\n   foreach ($urls as $key => $value) {\n      $prev_urls = array();\n   }\n}\n<\/pre>\n
\nOra dobbiamo riempire l’array degli indirizzi dei singoli elementi del futuro menu breadcrumbs. A tale scopo aggiungiamo al nostro ciclo un altro ciclo, il quale verrà eseguito per ogni elemento dell’URL della pagina corrente:<\/p>\n
\nfor ($i = 0; $i <= $key; $i++) {\n    $prev_urls[] = $urls[$i];\n}\n<\/pre>\n
\nCome si vede dal codice, per l’elemento corrente con la chiave $key verranno registrati all’array $prev_urls gli indirizzi di tutte le parti precedenti contenute nell’URL della pagina corrente.
\nIn questa fase gli indirizzi degli oggetti (pagine) precedenti costituiscono gli elementi dell’array $prev_urls. Per assemblare un URL completo della pagina precedente bisogna unire con gli slash gli elementi dell’array.
\nEvitiamo di creare un URL per l’elemento dell’array che corrisponde all’identificatore della pagina corrente. Quindi aggiungiamo al ciclo interno il seguente codice:<\/p>\n
\nif ($key == count($urls) - 1)\n{\n    $crumbs[$key]['url'] = '';\n}\nelseif (!empty($prev_urls))\n{\n    $crumbs[$key]['url'] = count($prev_urls) > 1 ? implode('\/', $prev_urls) : '\/';\n}\n<\/pre>\n
\nIn questa fase il nostro array finale $crumbs contiene gli indirizzi degli elementi superiori – dal punto di vista gerarchico – rispetto alla pagina corrente. Per esempio, per la pagina «Portfolio» del nostro sito immaginario l’array $crumbs avrà il seguente aspetto:<\/p>\n
\nArray (\n \n    [0] => Array (\n        [url] => \/\n    )\n \n    [1] => Array (\n        [url] => \/services\n    )\n \n    [2] => Array (\n        [url] =>\n    )\n \n)\n<\/pre>\n
\nA questo punto, l’unica cosa che ci manca sono i nomi delle voci del menu breadcrumbs. Per crearli, aggiungiamo al ciclo interno (dopo la formazione degli indirizzi degli elementi) il riempimento dell’array $prev_urls con i nomi:<\/p>\n
\nswitch ($value) {\n    case 'about' : $crumbs[$key]['text'] = 'Chi siamo';\n        break;\n \n    case 'services' : $crumbs[$key]['text'] = 'Servizi';\n        break;\n \n    case 'blog' : $crumbs[$key]['text'] = 'Blog';\n        break;\n \n    case 'contacts' : $crumbs[$key]['text'] = 'Contatti';\n        break;\n \n    case 'portfolio' : $crumbs[$key]['text'] = 'Portfolio';\n        break;\n \n    case 'prices' : $crumbs[$key]['text'] = 'Prezzi';\n        break;\n \n    default : $crumbs[$key]['text'] = 'Home';\n        break;\n}\n<\/pre>\n
\nCome potete vedere da questo ultimo codice, a ogni elemento dei breadcrumbs il nome viene assegnato in base all’URL della rispettiva pagina. Certamente, l’assegnazione manuale dei nomi non è la soluzione migliore. Tale soluzione potrebbe essere accettabile solo per dei piccoli siti con poche pagine o quando non c’è proprio la possibilità di sfruttare un database e\/o il CMS del sito per la creazione automatica degli elementi del menu breadcrumbs.
\nPer il nostro metodo attualmente studiato siamo riusciti, comunque, a ottenere un array con i dati necessari. Per la pagina «Portfolio», per esempio, l’array avrà il seguente aspetto:<\/p>\n
\nArray(\n \n    [0] => Array (\n        [url] => \/\n         => Home\n    )\n \n    [1] => Array (\n        [url] => \/services\n         => Servizi\n    )\n \n    [2] => Array (\n        [url] =>\n         => Portfolio\n    )\n \n)\n<\/pre>\n
\nCi rimane solo far visualizzare il nostro menu breadcrumbs sulle pagine del sito.
\n<\/a>4. Visualizzare il menu breadcrumbs sulle pagine del sito<\/b>
\nIl nostro obiettivo iniziale dichiarato è stato quello di proporre una soluzione universale. Di conseguenza, anche la visualizzazione del menu breadcrumbs appena descritto deve funzionare su qualsiasi sito. La facciamo con un altro script in PHP che poi dovrà essere inserito nel codice delle pagine del sito.
\nPrima di tutto vi ricordo di creare un DIV, all’interno del quale mettere il codice PHP che stiamo per scrivere. L’aspetto estetico del menu potrà essere impostato con il vostro file di stili CSS.<\/p>\n
\n<div class="menubreadcrumbs">\n    <!--Al posto di questo commento va messo il codice PHP della visualizzazione del menu breadcrumbs-->\n<\/div>\n<\/pre>\n
\nIl menu stesso può essere creato, per esempio, sotto forma di un elenco contenuto tra i tag <ul>. I dati saranno estratti dall’array all’interno di un ciclo, quindi nel DIV del menu scriviamo:<\/p>\n
\n<?php if (!empty($crumbs)) { ?>\n    <ul class="breadcrumb">\n        <?php foreach ($crumbs as $item) { ?>\n            <?php if (isset($item)) { ?>\n                <li>\n                    <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?><\/a>\n                <\/li>\n            <?php } ?>\n        <?php } ?>\n    <\/ul>\n<?php } ?>\n<\/pre>\n
\nCome potete vedere dal codice, ogni elemento dell’array con i breadcrumbs viene visualizzato come un link, dove il relativo URL proviene dall’elemento con l’indice «url», mentre il nome della voce relativa proviene dall’elemento con l’indice «text». Il risultato è questo:
\n
\nÈ quasi quello che ci aspettavamo. «Quasi» perché l’ultima voce del menu è il link «vuoto» (privo di un URL) alla pagina corrente. Una cosa del genere non ha molto senso, quindi proviamo a trasformare l’elemento senza un URL (non ce l’ha perché siamo stati noi a decidere così) in un semplice testo. Quindi inseriamo nel nostro ciclo di visualizzazione la seguente verifica:<\/p>\n
\n<?php if (!empty($item['url'])) { ?>\n    <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?><\/a>\n<?php } else { ?>\n    <?php echo $item['text'] ?>\n<?php } ?>\n<\/pre>\n
\nOra il nostro menu breadcrumbs ha un aspetto molto più bello e logico:
\n
\nQuindi possiamo considerare concluso il lavoro.
\n<\/a>5. Il codice completo dello script<\/b>
\nIl codice PHP che crea l’array con gli elementi del menu breadcrumbs è dunque il seguente:<\/p>\n
\n$cur_url = $_SERVER['REQUEST_URI'];\n$urls = explode('\/', $cur_url);\n \n$crumbs = array();\n \nif (!empty($urls) && $cur_url != '\/') {\n    foreach ($urls as $key => $value) {\n        $prev_urls = array();\n        for ($i = 0; $i <= $key; $i++) {\n            $prev_urls[] = $urls[$i];\n        }\n        if ($key == count($urls) - 1)\n            $crumbs[$key]['url'] = '';\n        elseif (!empty($prev_urls))\n            $crumbs[$key]['url'] = count($prev_urls) > 1 ? implode('\/', $prev_urls) : '\/';\n \n        switch ($value) {\n            case 'about' : $crumbs[$key]['text'] = 'Chi siamo';\n                break;\n            case 'services' : $crumbs[$key]['text'] = 'Servizi';\n                break;\n            case 'blog' : $crumbs[$key]['text'] = 'Blog';\n                break;\n            case 'contacts' : $crumbs[$key]['text'] = 'Contatti';\n                break;\n            case 'portfolio' : $crumbs[$key]['text'] = 'Portfolio';\n                break;\n            case 'prices' : $crumbs[$key]['text'] = 'Prezzi';\n                break;\n            default : $crumbs[$key]['text'] = 'Home';\n                break;\n        }\n    }\n}\n<\/pre>\n
\nIl codice PHP che visualizza il menu breadcrumbs è invece il seguente:<\/p>\n
\n<?php if (!empty($crumbs)) { ?>\n    <ul class="breadcrumb">\n        <?php foreach ($crumbs as $item) { ?>\n            <?php if (isset($item)) { ?>\n                <li>\n                    <?php if (!empty($item['url'])) { ?>\n                        <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?><\/a>\n                    <?php } else { ?>\n                        <?php echo $item['text'] ?>\n                    <?php } ?>\n                <\/li>\n            <?php } ?>\n        <?php } ?>\n    <\/ul>\n<?php } ?>\n<\/pre>\n
\nMentre il codice CSS deve essere scritto da voi in base all’aspetto grafico del vostro sito.
\nOltre al CSS, l’unica cosa che vi resta da fare è sostituire gli identificatori degli indirizzi e dei relativi nomi con quelli del sito sul quale intendete utilizzare lo script.
\n<\/a>6. Le osservazioni finali<\/b>
\nCome potete facilmente notare, lo script del menu breadcrumbs descritto in questo paragrafo è estremamente primitivo. Lo è, prima di tutto, a causa del suo carattere universale: perseguendo l’obbiettivo di farlo funzionare con qualsiasi tipo di progetto, l’ho reso indipendente da tutte le possibili particolarità dei numerosi CMS esistenti e ho fatto in modo che funzioni anche sui siti costruiti senza un CMS. È proprio per questo che il menu non viene generato in un modo del tutto automatico. Allo stesso tempo, lo script permette allo sviluppatore di un sito di non inserire manualmente tanti link uguali (modificandoli ogni qualvolta una pagina cambi la propria posizione nella gerarchia del sito), ma scrivere i loro dati una sola volta: nello script, appunto.
\nNel prossimo paragrafo scriverò di un caso molto più complesso e interessante: la creazione del menu breadcrumbs per un sito sviluppato con il WordPress. Sfruttando il database di un sito del genere sarà possibile creare uno script completamente autonomo in tutti i suoi aspetti. Una volta caricato sul sito, non dovrà più essere toccato, nemmeno dopo l’aggiunta delle nuove pagine al sito stesso.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il paragrafo dell\u2019\u201cInerario\u201d dedicato allo sviluppo di uno script universale \u2013 in PHP \u2013 del menu breadcrumbs. Lo script descritto pu\u00f2 essere utilizzato su qualsiasi tipo di sito web, anche qualora non fosse stato realizzato con un CMS, ma \u00e8 pi\u00f9 adatto ai progetti con una quantit\u00e0 limitata di pagine.
\nQuesto paragrafo \u00e8 destinato agli sviluppatori frontend e ai designer UX\/UI, ma anche a quei proprietari o amministratori dei siti che preferiscono fare tutto con le proprie mani.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":27,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-4281","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/4281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=4281"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/4281\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=4281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}