Supporto volontario e collaborativo per Joomla!® in italiano

I Template

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Questa pagina ospita il capitolo 19, I Template, del libro Joomla 3.3. Guida all’uso di Alessandra Salvaggio, che viene pubblicato per gentile concessione dell'editore LSWR.

Poiché si tratta di un permesso di ripubblicazione di un'opera coperta da diritto d'autore, si prega di NON MODIFICARE LA PAGINA per non violare il copyright.
Per maggiori informazioni sul libro visitare il sito: edizionilswr.it

I template controllano l’aspetto di un sito Joomla. È bene imparare a gestirli correttamente.

I template sono file PHP, (X)HTML e CSS che permettono di definire l’aspetto di un sito Joomla.
Quando installate Joomla, viene automaticamente utilizzato un template predefinito e ne vengono installati altri che potete eventualmente sostituire a quello predefinito.
Per vedere i template installati potete scegliere Estensioni > Gestione template. Sarete subito portati alla pagina Gestione template: Stili con l’elenco dei template installati.

Notate che i template sono divisi fra template lato amministrativo e template lato sito. Naturalmente sono questi ultimi quelli più interessanti. In fondo, l’aspetto “estetico” del Back-end non è poi così importante, mentre il template per il Front-end ha un deciso impatto sul sito, sulla sua fruibilità e sull’immagine che comunica.

Per impostazione predefinita viene usato il template protostar; per cambiare il template predefinito basta fare clic nel quadratino di selezione posto alla sinistra del suo nome e premere il pulsante Predefinito. La stellina che segnala il template predefinito si sposterà nella riga del template selezionato e il template verrà applicato a tutto il sito.

Applicare un template ad alcune pagine di un sito

Joomla permette, però, anche di applicare un template solo ad alcune parti di un sito, il che apre delle possibilità davvero interessanti. Un template rimane comunque predefinito e viene applicato alle pagine per cui non si è specificato diversamente.
Per applicare un template ad alcune parti del sito, potete procedere in due modi: dalla pagina di modifica del template oppure dalla pagina di creazione della pagina che deve usare il template.
Cominciamo da quest’ultima possibilità. Abbiamo detto varie volte che una pagina si crea generando la voce di menu che la richiama: il template andrà dunque applicato nella pagina di creazione della voce di menu, scegliendo il template che si desidera usare dall’elenco a discesa Stile template.



L’altra possibilità consiste nell’aprire la pagina relativa al template facendo clic sul nome del template nella pagina Gestione template: Stili.
Fra le opzioni di configurazione del template (che tratteremo in un apposito paragrafo più sotto), trovate la scheda Assegnazione menu: qui dovete selezionare le voci di menu che richiamano le pagine a cui volete applicare il template.


Nella pagina Gestione template: Stili, i template non predefiniti, che sono usati in qualche pagina del sito, sono contraddistinti da un segno di spunta bianco in campo verde nella colonna Assegnato.


Modificare un template con i parametri

Avrete già intuito che è possibile apportare alcune modifiche ai template attraverso la pagina di modifica di un template. Alcuni template, infatti, anche se non tutti, dispongono, infatti, di parametri che possono essere configurati in maniera interattiva, senza toccare il codice CSS o PHP che li genera.
Questo tipo di modifica, per esempio, è permesso dal template predefinito di Joomla 3.3.
Il tipo e il numero di parametri che si possono configurare varia a seconda di come è stato progettato il template, per cui occorrerà sempre fare un po’ di prove per studiare bene quali sono le possibilità offerte dal template.
Per portarvi alla pagina di modifica del template, fate clic sul suo nome e poi portatevi alla scheda Avanzate.


Nel caso del template protostar, i parametri disponibili sono il colore del template e dello sfondo. La possibilità di caricare un’immagine da usare come logo e di specificare un titolo e una descrizione per il sito. Si può scegliere se usare i Font Google per le intestazioni del sito e se adottare un layout fluido o statico.
Notate che l’aspetto complessivo del sito varia decisamente combinando in modo diverso le varie opzioni.

Modificare un template via codice

Chi conosce un po’ di PHP, (X)HTML e CSS può accedere a un tipo di modifica più “pesante” dei template, cioè alla modifica diretta del codice dei template. Il codice che costituisce un template è sempre piuttosto corposo, ma, lavorandoci un po’, si possono ottenere risultati interessanti.
Ci sono due modalità per approcciare questo tipo di modifica: modificare i file del template in locale e poi caricarli nel sito via rete o via FTP (ricordate che tutti i file che costituiscono un template sono salvati in una cartella con il nome del template nella cartella templates all’interno della cartella root del sito), oppure lavorare direttamente all’interno del Back-end.
Il template, comunque esso sia costruito, dispone sempre di un file index.php con la struttura base della pagina, diversi file .CSS (di solito salvati in una sottocartella che si chiama CSS) e diversi altri file accessori come i file delle immagini ed eventuali file JavaScript. Alcuni template dispongono anche di altri due file PHP: error.php e component.php, che gestiscono, rispettivamente, la pagina di errore del template e la pagina di stampa del template (ossia la struttura generale del template in stampa; per lo stile di stampa di solito esiste un apposito file .CSS).
In questo momento dobbiamo concentrarci sul file PHP e sui file CSS.
Per accedere a questi file dal Back-end, scegliete Estensioni > Gestione template, quindi, nella pagina Gestione template: Stili, portatevi alla scheda Template, la stessa che abbiamo utilizzato per vedere le diverse posizioni disponibili nel template in uso. Qui vedete elencati tutti i template disponibili. Fate clic sulla voce Dettagli e file accanto al template che volete modificare.


Sarete portati alla pagina Gestione template: Personalizza template


Nella parte sinistra della finestra sono elencati i file che costituiscono il template.
Potete fare clic su ciascuno di questi file per modificarlo.
Prima di riuscire a modificare il template occorre analizzarlo un po’ per trovare i punti da modificare. Potreste usare gli strumenti di analisi dei siti Internet messi a disposizione dai browser.
Quando selezionate un elemento sulla pagina, potete vedere in quale file di stile si trova la definizione per lo stile di quell’elemento.
Google Chrome dispone di uno strumento di analisi integrato. Potete attivarlo scegliendo Strumenti > Strumenti per gli sviluppatori dal menu di Chrome. Nella parte bassa del browser si apre una finestra che permette l’analisi del codice sorgente dell’elemento selezionato: a destra vedete il codice HTML, mentre a sinistra ci sono gli stili applicati all’elemento selezionato, con l’indicazione del nome del file di stile da cui sono tratti.
Esiste uno strumento simile anche per Firefox, ma va installato come componente aggiuntivo: si tratta di Firebug (http://getfirebug.com).





Il limite di tutte queste soluzioni (modifica con i parametri o via codice) è dato dal fatto che le modifiche vengono apportate al template in uso per tutte le pagine e non è possibile modificare il template solo per alcune pagine (creando quindi delle varianti del template leggermente diverse, per diverse aree del sito). L’unica possibilità è quella di creare una copia del template, modificarne il nome e poi caricarla come un nuovo template.

Scaricare e installare nuovi template

Finora abbiamo lavorato con i template predefiniti, ma, naturalmente, potete cambiarli. Potete creare voi stessi i template o scaricare template già pronti, badando a individuare quelli per Joomla 3.3: i template sviluppati per le precedenti versioni del CMS non sono utilizzabili.
Tenete presente, inoltre, che Joomla 3.3 integra il framework bootstrap e i suoi template che ne fanno uso permettono di creare siti con layout adattivo e dimensionabile. Naturalmente, la maggior parte dei template sviluppati per Joomla 3 sfruttano questa tecnologia, ma è bene accertarsi che sia effettivamente così prima di scegliere di usare un template.
Per trovare i template potete fare una ricerca su Internet: ne esistono di gratuiti e di commerciali. Certamente, un buon punto di partenza per la ricerca di template “affidabili” è il sito italiano di Joomla, che elenca diversi template alla pagina http://www.joomla.it/template.html.
Per visualizzare una anteprima del template fate clic su sulla sua miniatura, mentre per scaricare effettivamente il template dovrete fare clic sul collegamento download. Anche il file del template sarà un file compresso (.zip).
Una volta scaricato (o creato) il vostro template, dovete aggiungerlo come estensione. Portatevi nel pannello di amministrazione del sito e scegliete Estensioni > Gestione estensioni. Sarete portati alla pagina Gestione estensioni – Installa. Qui premete il pulsante Sfoglia e individuate nel vostro computer il file .zip di installazione appena scaricato. Quando il nome del file compare nella casella accanto al pulsante, premete il pulsante Carica & installa per avviare effettivamente l’installazione.
Una volta caricato il file, dovrete applicarlo a tutte le pagine del sito o solo ad alcune, come abbiamo spiegato sopra. Dovete, però, tener presente che l’applicazione di un nuovo template non è sempre del tutto “indolore”, nel senso che il nuovo template potrebbe avere posizioni diverse da quelle del vecchio e, dunque, di primo acchito, alcuni moduli potrebbero scomparire.
Occorre, quindi, ridefinire le posizioni dei moduli. Ricordiamo che, per vedere le posizioni disponibili in un template, dovete fare clic sul collegamento Anteprima posto accanto al template che vi interessa, nella pagina Gestione template: Stili, alla scheda Template. Ricordiamo anche che, perché il collegamento Anteprima sia disponibile, occorre premere il pulsante Opzioni e nella nuova finestra scegliere la voce Abilitato per l’opzione Anteprima posizioni modulo. Se, alla chiusura della finestra, Anteprima non è ancora disponibile, ricaricate la pagina (basta premere F5 sulla tastiera).



Ultima versione di Joomla!®

downloadVer. 3.7.5 Stabile Italiana
Data di rilascio: 17 Agosto 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: