Creare sottovoci in un menu Joomla!

Per poter raggiungere il nostro obbiettivo finale, faremo un esempio con due voci di menu principali alle quali associeremo altrettante sottovoci. Il numero di sottovoci, come si può capire, non ha limiti. Se ne possono aggiungere quante se ne desiderano.

Creare un articolo statico

Primo step: creare un articolo "statico" da associare alle voci di menu. Per vedere il menu con relative sottovoci in azione, non necessaita di tanti articoli quante sono le voci. Tale operazione la faremmo se fossimo in presenza di un sito di produzione. Per il nostro esempio collegheremo sempre lo stesso articolo.

Secondo step: creare un nuovo menu con relativo modulo. Per l'articolo in oggetto ho creato un menu che si occupa di animali domestici. Portarsi nell'area di amministrazione e nel menu alto orizzontale, scegliere: MenuGestione Menu e nella parte alta destra selezionare il pulsante Nuovo. Dopo aver compilato i quattro campi, avremo l'area amministrativa simile alla figura seguente:

Creazione nuovo menu
Creazione di un nuovo menu

Popolare il menu "Animali Domestici"

Il menu finale avrà una struttura uguale a quanto di seguito riportato:

Le due macroaree che andremo a realizzare saranno, leggendo quanto appena scritto più su:

Nel backend di Joomla! portarsi su MenuAnimali DomesticiNuovo. In Voce di Menu [ Nuovo ] espandere la voce ArticoliArticolo Aspetto Articolo

In questa schermata di amministrazione inseriremo il titolo da dare al link di menu, l'alias e nella parte destra Parametri Standard, premere il pulsante Seleziona per scegliere l'articolo da associare alla voce di menu. Salvare l'operazione appena fatta. L'immagine seguente mostra il passaggio appena descritto:

Tipo voce di menu
Tipo voce di menu

Ripetere gli stessi passaggi anche per la voce "Gatti". Create le due macroaree, passiamo adesso ad inserire le due sottovoci. I passaggi sono identici a quelli appena visti ma, cosa molto importante, si deve fare attenzione affinchè le sottovoci che andremo a creare non stiano tutte allo stesso livello delle precenti, bensì devono essere "figlie". Esempio: la sottovoce "Pastore Maremmano" sarà figlia della macroarea "Cani". Una volta riempiti i campi come nell'immagine su riportata (Tipo voce di menu), fare attenzione alla label della select Elemento: affinchè la voce nuova da creare appartenga al suo "genitore", basta selezionare la voce di quest'ultimo; nel nostro caso "Cani". Il resto (scelta articolo da associare) è identico ai passaggi precedenti. Altermine di queste fasi, nella Gestione di Menu [ animali-domestici ] avremo la stessa ed identica struttura come quella riportata di seguito:

Tipo voce di menu
Voci di menu

Come si può vedere, lindentazione delle voci inferiori sta ad indicare, appunto, l'appartenenza alla voce superiore.

Posizionamento e visualizzazione del Modulo di menu

Terminata la fase di creazione voci del menu, non resta che visualizzare quanto fatto. Si tratta di capire, in base alla disposizione del layout, dove posizionare il modulo e quale aspetto esso deve avere. In Joomla! un Modulo di Menu risponde a tre caratteristiche:

  1. come deve essere visualizzato il menu;
  2. in quale parte della pagina deve essere posizionato;
  3. in quali pagine lo di deve visualizzare.

Portarsi in EstensioniGestione Moduli ed individuare il modulo associato al menu precedentemente creato. Se è stato dato lo stesso nome del menu, allora troveremo "Animali Domestici" Entrare nella schermata del Modulo ed in Dettagli dobbiamo scegliere se mostrare il titolo, attivare il modulo, scegliere la posizione (in base al proprio template), quale ordinamento deve seguire (se nella stessa posizione ci sono più moduli). La zona dei Dettagli sarà simile alla seguente immagine:

Dettagli menu
Dettagli menu

Nella sezione Assegnazione menu dobbiamo scegliere in quali pagine far apparire il modulo. Si scelga, per esempio, di mostrare il menu nella Home Page del sito, selezionando la voce "Home" del "Mainmenu" e tutte le voci create del menu "Animali Domestici". Per poter fare più di una selezione, tenere premuto il tasto CTRL della tastiera e con il mouse selezionare le voci del menu. Avremo una schermata come l'immagine riportata di seguito:

Assegnazione menu
Assegnazione menu

L'ultima parte, Parametri → Parametri Modulo, gestisce la modalità di visualizzazione del menu. Accertarsi che il menu selezionato sia quello corretto, la label "Stile menu" dà la possibilità di scegliere lo stile, appunto. La scelta ricade su "Legacy - verticale". Ultimo settaggio è quello di abilitare la visualizzazione delle sottovoci, quindi spuntare "SI".

Parametri modulo
Parametri modulo

Salvare il tutto ed aggiornare la pagina nel frontend. Se tutto è stato fatto in maniera corretta, avremo - in Home Page - il titolo del modulo e le due voci principali:

Menu non espanso
Menu non espanso

Se volessimo vedere le sottovoci, cliccare sull'una o sull'altra categoria ed appariranno le sottocategorie come le abbiamo create:

Menu espanso
Menu espanso

Ed ecco il menu completo, in azione e formattato.

Abilitazione del SEF e breadcrumbs

Una nota importante da mettere in rilievo è la non corretta funzione del percorso nel breadcrumb se nel sito è presente qualche componente SEF (Search Engine Friendly), abilitato. Per esperienza diretta, avendo disabilitato il componente sh404SEF, il tutto ha funzionato regolarmente. Infatti, scegliendo la categoria "Cani" e da questa "Pastore Maremmano", abilitando il modulo "Pathway", il percorso viene visualizzato correttamente nella pagina:

Breadcrumb
Breadcrumb

Invece di avere le url poco comprensibili ai motori di ricerca, è sufficente abilitare il componente SEO di Joomla! e nessun'altra estensione di terze parti. Per il SEO di Joomla! è sufficente rinominare il file "htaccess.txt", nella root in cui è installato Joomla!, in ".htaccess".Portarsi in Configurazione sito e spuntare i tre radiobuttons su "SI".

configurazione seo
Configurazione SEO
Conclusioni

Con questa ennesima feature di Joomla! abbiamo la possibilità di creare siti anche molto complessi, suddividendoli come meglio si ritiene opportuno se si hanno da presentare molti contenuti. Cercare di sfruttare al meglio quanto messoci a disposizione, in maniera molto semplice, credo sia meglio che ricorrere ad estensioni di terze parti per ottenere un menu come quello dell'articolo.