Creare sottovoci di menu in Joomla!

Per poter raggiungere il nostro obbiettivo finale, faremo un esemopio con due voci di menu principali alle quali assoceremo 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: Menu → Gestione Menu e nella parte alta destra selezionare il pulsante Nuovo. Dopo aver compilato i quattro campi, avremo l'area amministrativa simile alla figura seguente:

Popolare il menu "Animali Domestici"

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

• Cani
  • Pastore Maremmano
  • Pastore Tedesco
• Gatti
  • Persiano
  • Tonkinese

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

• Cani
• Gatti

Nel backend di Joomla! portarsi su Menu → Animali Domestici → Nuovo. In Voce di Menu [ Nuovo ] espandere la voce  Articoli → Articolo → 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:

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:

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 Estensioni → Gestione 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:

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:

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".

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:

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

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:

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".

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. 

Alla prossima.