Inserire una sidebar in un template personalizzato per Joomla! 4

Scopri come inserire una sidebar (barra laterale) in un template per Joomla! 4, sesto articolo della serie decicata alla realizzazione di template personalizzati per Joomla!

Se hai seguito la serie di articoli decicata ai template per Joomla! 4, sarai riuscito ad impostare un template molto basico, dove visualizzerai i contenuti principali, avrai un logo e un menù di navigazione, oltre ad un paio di posizioni modulo, se ancora non li hai letti puoi cominciare da: Creare un template per Joomla! 4 prima parte: i file di base.

Oggi ti mostrerò come inserire una sidebar, una barra laterale (per la versione desktop del sito) dove potrai inserire altri moduli che potranno arricchire il tuo sito.

Essenzialmente la struttutura del template che andremo a realizzare è la seguente:

Come vedi dalla figura, le aree saranno ben definite e separate, vediamo subito come farlo.

1) Suddividi le aree principali

Precedentemente avevi inserito il breadcrumb, i contenuti principali ed il footer, in un unico contenitore (container), ora dovrai separarli inserendoli ognuno in una "riga".

Aprendo l'index.php del tuo template, individua <div class="container">, subito dopo troverai il codice per visualizzare il modulo breadcrumb

<jdoc:include type="modules" name="breadcrumb" style="none" />

Dovrai inserirlo all'interno di una delle "righe" utilizzate da Bootstrap utilizzando questo codice:

<div class="row percorso">
<jdoc:include type="modules" name="breadcrumb" style="none" />
</div>

Puoi notare facilmente che non hai fatto altro che racchiudere la "chiamata" per la posizione modulo, all'interno di una classe "row" a cui io aggiunto un'ulteriore classe "percorso" che servirà per le personalizzazioni.

La stessa operazione va ripetuta per i contenuti principali:

<div class="row contenuti">
<jdoc:include type="component" />
</div>

e per il footer:

<div class="row">
<jdoc:include type="modules" name="footer" style="none" />
</div>

Salva per terminare e visualizzare il frontend del tuo sito, comincerai a notare dei cambiamenti sulla disposizione degli elementi.

2) Dividi la parte dei centrale su 2 colonne

Dovrai lavorare sulla "riga" dei contenuti (row contenuti) aggiungendo 2 colonne, per farlo basta appoggiarsi a Bootstrap e il codice della parte centrale del sito diverrà:

<div class="row contenuti">
<div class="col-lg-9 col-md-8 col-sm-8">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<jdoc:include type="modules" name="right" style="none" />
</div>
</div>

Cosa hai fatto nello specifico:

1) Hai aggiunto 2 colonne indicando una classe(col-lg) valida per gli schermi di grandi dimensioni, come computer laptop o desktop, una classe per schermi più piccoli (col-md) per i tablet e smartphone (col-sm).

col-lg-9 si applica agli schermi con risoluzioni maggiori di 992 pixel ed ha una larghezza pari a circa il 75% della riga, su schermi con risoluzione inferiore ai 992 pixel si attiva la classe col-md-8, su schermi dei tablet (in modalità potrait) la colonna avrà una larghezza di circa il 66%.

Con risoluzioni schermo al di sotto dei 768 pixel attiveranno la classe col-sm-8 pixel che avrà una larghezza pari a circa il 66%, che diventerà del 100% al di sotto dei 576 pixel di risoluzione,

Discorso analogo per la colonna destra e la sua classe col-lg-3

2) hai aggiunto una posizione modulo all'interno della colonna destra <jdoc:include type="modules" name="right" style="none" />, dovrai aggiornare il file templateDetails.xml per attivarla, per cui aprilo e aggingi questa riga nella sezione delle posizioni:

<position>right</position>

Salva per terminare.

Per provare il funzionamento pubblica un modulo in posizione right dal backend del tuo sito, ricordandoti di farlo visualizzare su tutte le pagine, io ho utilizzato il modulo relativo agli ultimi post pubblicati.

3) Hai aggiunto <jdoc:include type="message" /> che serve per visualizzare messaggi di sistema, ad esempio  con una categoria senza articoli apparirà un messaggio simile a: Non ci sono articoli pubblicati in questa categoria:

A questo punto il tuo template avrà una sidebar funzionante e dovresti trovarti in una situazione simile a questa:

Il lavoro è quasi finito, bisogna effettuare un ultimo passaggio.

3) Imposta una sidebar dinamica

Non è detto che tutte le pagine abbiano bisogno di una sidebar, per cui bisogna usare un'accorgimento per comunicare a Joomla! che nelle pagine dove saranno pubblicati moduli nella sidebar, verranno utilizzate 2 colonne, mentre in quelle dove non saranno pubblicati ne verrà utilizzata solo una.

Puoi farlo utilizzando questo codice nel tuo index.php:

<?php if($this->countModules('right')) : ?>
<div class="col-lg-9 col-md-8 col-sm-8">
<?php else: ?>            
<div class="col-12">
<?php endif; ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

Salva per terminare e prova a disattivare i moduli che hai inserito nella posizione right, il front end del tuo sito visualizzerà una sola colonna col-12 con larghezza pari al 100%.

Hai appena inserito una sidebar nel tuo template personalizzato per Joomla! 4 .

Se hai domande scrivile nei commenti.