Uno degli argomenti più trattati sul forum e per il quale potremmo spendere fiumi di parole è la modifica dei template per i siti web sviluppati in Joomla. Il template è il cuore di un sito Joomla. Esso è lo scheletro sul quale si formano tutte le pagine del nostro sito. La dinamicità di Joomla sta proprio in questo: comporre nuove pagine in base alla richiesta del navigatore, recuperando le informazioni da un database e utilizzando un'unica struttura portante: il template appunto.

Cosa devo conoscere per poter modificare un template per Joomla?

Anzitutto servono conoscenze di:

• html
• css (fogli di stile)
• php (conoscenze di base)

La conoscenza dei tag html e della composizione di pagine html è fondamentale. In realtà un template per Joomla ha la sua ossatura nell'html quindi la conoscenza del linguaggio php si limita alla sintassi di base, a meno di non voler realizzare template di particolare complessità. Per il resto basta imparare quanto già il team di sviluppo ha progettato ed applicarlo nella realizzazione della pagina. In realtà non parleremo del linguaggio php perchè faremo riferimento unicamente alle funzioni del core di Joomla.
I fogli di stile sono un argomento più complesso di quello che si pensi. Le guide che si trovano in rete sono più che sufficienti a darci una buona preparazione, i problemi arrivano quando ci accorgiamo che quanto abbiamo realizzato funziona con un browser e non con un altro (quale sarà?).

I fogli di stile consentono di raccogliere e riutilizzare le caratteristiche grafiche (dette classi) da applicare ai tag html. Per i template di Joomla la cosa va molto oltre: esistono un insieme di queste classi specifiche per i template e che consentono di formattare graficamente tutte le componenti di una pagina, dal titolo di un articolo, al colore del testo, all'aspetto dei menù.

Creiamo un semplice template

La struttura di base, dicevamo, è in html e viene realizzata partendo da un disegno grafico come quello che segue:

In questo schema notate che la pagina viene divisa in aree:

• header (intestazione)
• left (sinistra)
• main content (contenuti principali)
• right (destra)
• footer (piè di pagina)

Tutte queste aree sono racchiuse all'interno di un unico contenitore (di colore verde nell'immagine)

Questo è uno schema a tre colonne più una intestazione e un piè di pagina. Non affronteremo in questo articolo la differenziazione tra schemi fissi e liquidi (flessibili). Per ovvi motivi non ho inserito nessun elemento grafico. Però sappiate che questo è il punto di partenza da quale iniziare lo sviluppo vero e proprio del template. Il passo successivo sarà quello di disegnare la grafica della pagina mantenendo quello schema come riferimento.

Usando l'html creiamo questa semplice struttura e per farlo utilizzeremo solo il tag

 

I tag sono dei contenitori (container div) e possono contenere altre strutture html (altri tag) e in questo caso contengono solo del testo (tanto per distinguere un contenitore dall'altro) ma hanno una caratteristica particolare: vengono visualizzati sempre uno sotto l'altro. Se utilizzassimo un editor WYSIWYG (editor visuali) il codice che abbiamo appena scritto lo vedremmo così:

 

Come facciamo allora a cambiare la disposizione dei contenitori posizionandoli come nello schema? Per farlo dobbiamo necessariamente utilizzare i fogli di stile (css) creando delle classi di formattazione grafica. I nomi delle classi sono già stati inseriti nel codice html e richiamano il nome delle aree.

La classe container darà forma al contenitore principale, la classe header darà forma e disposizione al primo contenitore, la classe left darà forma e disposizione al secondo contenitore, ecc. ecc.

 

Questo è il foglio di stile da applicare al codice html sopra riportato:

 

Inserendo in una pagina html il codice del foglio di stile e quello html ora descritti otterremo il seguente risultato:

Analizziamo i singoli attributi di ogni classe:

text-align: center - serve solo per centrare il testo all'interno del contenitore

background-color - definisce il colore di sfondo del contenitore (lo usiamo in questo caso per differenziare le aree della pagina)
border - aggiunge un bordo colorato al contenitore
height - definisce l'altezza del contenitore. E' necessario definirla altrimenti il contenitore non si vedrà
width - definisce la larghezza del contenitore.

 

float - questo attributo modifica l'ordine con cui un contenitore viene posizionato rispetto al precedente. Ricordiamoci che tutti i contenitori

vengono posizionati per default uno sotto l'altro. Con la proprietà left del parametro float spostiamo un oggetto a sinistra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla destra.

Esempio:

Otteniamo questo risultato

Contenuto del box con la proprietà float:left;

Restante testo contenuto nel box principale

Con il parametro right dell'attributo float spostiamo un oggetto a destra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla sinistra.

Esempio

Otteniamo questo risultato

Contenuto del box con la proprietà float:right;

Restante testo contenuto nel box principale

Nel nostro questo caso il contenitore main-content verrebbe posizionato sotto il suo precedente (left) ma assegnando l'attributo float: left; al contenitore left si indica al browser che il contenitore successivo (main-content) deve essere posizionato a destra del contenitore left.

clear - l'attributo clear gestisce lo spazio attorno ad un oggetto, impedendo che altri oggetti mossi dalla proprità float vi si posizionino. Viene applicato, nel nostro caso, all'area footer tramite la classe footer per posizionarla sotto l'area right e quindi sotto tutte le aree (left, main-content e right). La proprietà left dell'attributo clear impedisce che alla sinistra dell'oggetto che contiene claer si posizioni un oggetto con la proprietà float.

Nella classe .container viene dichiarato l'attributo margin con valore 0 (zero) e auto. Questo è un piccolo trucco per posizionare al centro di una pagina un tag

 

Nel nostro esempio se non usassimo l'attributo float vedermmo questo:

applicando l'attributo float ai tag

otteniamo questo:

 

Piccola nota sui fogli di stile.

Se non usassimo i fogli di stile saremmo costretti a scrivere:

invece di definire la classe .left in un foglio di stile assegnandola poi al tag come abbiamo visto in precedenza.

 

Trasformare la pagina html in un template

Bene. Adesso dovremmo avere un pò più chiaro come posizionare delle aree contenitore in una pagina html. Come facciamo adesso a trasformarle in contenitori per moduli e contenuti di Joomla?
Non è un caso se questi semplici contenitori li ho chiamati con dei nomi che già conosciamo. Usando Joomla abbiamo già visto che esistono le cosiddette "zone modulo" nelle quali è possibile posizionare appunto i moduli.
Nel core di Joomla sono state costruite delle funzioni particolari che permettono di inserire in un contenitore html i moduli installati nel sito.
Ecco come si presenta il codice html scritto in precedenza trasformato per essere usato come template di Joomla.

Quando il template viene richiamato per essere riempito con i contenuti dinamici prelevati dal database Joomla si aspetta di trovare la funzione

per poter posizionare gli oggetti (moduli e contenuti) all'interno della pagina. Con il parametro type diciamo a Joomla che tipo di oggetto deve inserire in quella posizione mentre con il parametro name diciamo a Joomla come si chiama quella posizione. Questa funzione crea una zona modulo.

Ad esempio, se nel nostro sito abbiamo dichiarato nel frontend, dalla gestione moduli, che i moduli mod_mainmenu e mod_login sono posizionati nella zona moduli left Joomla cercherà nel template la funzione e la sostituirà con il codice html corrispondente ai due moduli.

E così la funzione verrà sostituita dai contenuti (gli articoli) prelevati dal database.

E' chiaro che il template che abbiamo scritto è solo a titolo esemplificativo. Ma se lo confrontate con un qualsiasi template vedrete che, in fin dei conti, le cose non sono molto diverse. Le zone modulo vengono realizzate aggiungendo ad una pagina html, opportunamente costruita, le funzioni del core di Joomla realizzate per essere poi sostituite dai contenuti/moduli/componenti installati nel sito.
Ogni zona ha un nome che serve da riferimento quando, nel backend di Joomla, dichiariamo la disposizione dei moduli.

I nomi delle zone modulo sono elencati nel file templateDetails.xml. Nel nostro caso questo file si presenterà così:

Aggiungiamo una nuova zona modulo al template

Se volessimo aggiungere una nuova zona moduli nel nostro template di esempio (per esempio la zona debug) dovremmo operare come segue:

1) scrivere il codice html che crei un nuovo contenitore nella struttura della pagina e inserirvi all'interno la funzione jdoc assegnando al parametro name il nume della nuova zona modulo

 

2) modificare il foglio di stile creando una classe per formattare graficamente il nuovo contenitore e per posizionarlo adeguatamente rispetto agli altri contenitori adiacenti

3) aprire il file templateDetails.xml ed aggiungere la nuova zona moduli

Sul nome da assegnare ad una nuova posizione moduli consiglio di utilizzare i nomi comunemente usati nei template per Joomla. Denominare una posizione moduli con nomi di fantasia (pippo, pluto, paparino) non rende il template utilizzabile da nessuno se non da noi.

 

Scritto da Cosimo Baviera (aka BigHam)

 

Commenta questo articolo sul forum