Vediamo adesso come possiamo costruire il nostro template Joomla. Creiamo una cartella con il nome del nostro template. Supponiamo che si chiami "SimpleTemplate".
Dentro di essa salviamo questi file (dopo li guarderemo in modo più approfondito):
Sarà poi necessario metterci anche altri file, per esempio le immagini da inserire nella grafica. La cartella del template potrà poi contenere delle sottocartelle chiamate per esempio images (per le immagini) e html (per l'override, che vedremo qualche paragrafo più avanti).
Il file index.php
È il file più importante, indica la posizione dei vari moduli e la locazione del foglio di stile. Proprio per la sua importanza, è definito come lo scheletro del sito. Deve iniziare con questo codice:
Queste righe servono per impostare il linguaggio e per inserire nell'header le informazioni sul sito (come il titolo, la descrizione, i meta tag etc etc) che sono state inserite nel backend, più precisamente in Configurazione globale-->Sito-->Configurazione sito e Configurazione Metadata, come possiamo vedere dalla figura.
Poi dobbiamo inserire la parte di html riguardante il corpo del testo, come qui:
Questa riga di codice serve per inserire il contenuto principale nella pagina, per esempio gli articoli o una galleria di foto.
Il codice sopra descritto però non contiene tutte le posizioni per i diversi moduli, vediamo allora come fare. In generale basta inserire nel tag div che vogliamo la riga di codice per l'inserimento di tutti i moduli che vanno pubblicati nella stessa posizione, per esempio:
significa che in quel punto della pagina sono pubblicati tutti i moduli a cui è stata assegnata la posizione top nella gestione dei moduli. In tal caso potremo avere uno schema di questo genere
A questo punto il file index.php diventa così:
Osservazione: consiglio di inserire nel file index.php prima della riga
anche la riga di codice:
per la sicurezza del sito.
Il file templateDetails.xml
Questo file è altrettanto importante perché restituisce le informazioni sul template, sull'autore e sui file che servono a far funzionare il template, per esempio i file php e le immagini da inserire. Le prime righe del file sono le seguenti:
In seguito è composto da voci diverse:
Anche se il tag del file xml si chiama position, esso indica l'elenco dei blocchi ma non la loro posizione. La posizione dei diversi contenitori è infatti definita nel file css. I blocchi di solito hanno dei nomi standard, che possono rappresentare una posizione (che, ripeto, è da definire nell'altro file) e possono essere:
Nomi di questo genere aiutano nel creare e poi, successivamente, modificare il template e ad assegnare le posizioni ai moduli. Per esempio in left o in right possiamo metterci i menù, nel top il modulo per la ricerca e così via. Nulla ci vieta di inventarne degli altri nè il loro numero, anche se è consigliato usare poche posizioni per non complicare troppo il template e la sua interpretazione da parte dei browser.
Osservazione: a volte i template possono contenere i file di lingua, nel caso sia necessario abilitare la traduzione dei testi statici del modello. In tal caso dobbiamo inserire anche delle righe di codice come le seguenti:
Il Template CSS
Template.css è il foglio di stile vero e proprio. I fogli di stile, meglio conosciuti come CSS (acronimo di Cascading Style Sheets) sono una raccolta di regole (rules) che definiscono gli attributi di formattazione (colore, font, bordi etc etc) applicabili a un tag html.
È necessario personalizzare il proprio template con un po' di stile e fantasia. Per farlo bisogna aggiungere questa riga di codice
nel file index.php, proprio prima della chiusura del tag head (</head>). È in questo file che potete sfruttare tutta la vostra fantasia. A titolo di esempio possiamo vedere questo foglio di stile:
In questo esempio non sono definiti molti stili, per esempio non è descritto come devono comparire i menù (cioè tutto quello che contiene i tag ul e ol), ma come base di partenza può essere buona.
Il file template_thumbnail.png
Questo file non è obbligatorio ma è utile perché mostra, in "Gestione Template" del pannello di amministrazione, un'anteprima del template, come possiamo vedere in figura.
Ovviamente questa immagine di anteprima è da creare: per farlo basta caricare il template sul sito e salvare la vista tramite i programmi del proprio computer oppure con dei servizi presenti sul web. Infatti su Internet ci sono numerosi siti che creano un'immagine di anteprima di un sito fornendo una URL. Le dimensioni dovrebbero essere circa 225 pixel di larghezza per 150 pixel di altezza.
I parametri del Template
Alcuni template possono avere dei parametri che vanno impostati, come per esempio i colori dello sfondo. Un altro esempio è dato dal template rhuk_milkyway (è uno dei temi già presenti nel pacchetto di Joomla) che consente, dal pannello di amministrazione (nella sezione Gestione Template), di cambiare i colori dei bordi, il colore dello sfondo e la larghezza della visualizzazione. La possibilità di avere dei template con dei parametri da impostare è nata, a partire da Joomla 1.5, dall'esigenza di creare template flessibili. Se vogliamo aggiungere dei nuovi parametri è necessario modificare il file templateDetails.xml, aggiungere una riga di codice al file params.ini che conterrà il valore corrente del parametro e del codice al file php del template per il recupero e la modifica del valore del parametro.
Supponiamo di voler modificare il colore dello sfondo del nostro template. In questo caso, bisogna aggiungere al file templateDetails.xml delle righe di codice come queste:
In questo modo dal pannello di modifica del template nel back end del sito potremo impostare il valore del parametro che vogliamo, come possiamo vedere in figura
In Joomla sono supportati 20 tipi diversi di parametri. Qui sotto è presente un piccolo elenco di essi, in ordine alfabetico:
Di tutti questi parametri (che si possono utilizzare sia nello sviluppo di template sia di estensioni) saranno pochi quelli effettivamente usati, per esempio i pulsanti radio oppure il listato di valori.
Il File Params.isi
I valori correnti dei parametri del template sono memorizzati nel file params.ini. Esso sta dentro la cartella principale del template (nel nostro caso dentro la cartella SimpleTemplate). Questo vuol dire che se si vuole utilizzare si deve aggiungere questo file anche dentro il tag <files> di templateDetails.xml.
Osservazione: il file params.ini può essere vuoto e i valori di default dei parametri possono essere impostati dentro <pre> <param></pre> del file templateDetails.xml (nel codice sopra abbiamo scritto default="blue" e questo vuol dire che lo sfondo sarà, per default, di colore blu). La presenza del file vuoto durante l'installazione del template garantisce che è scrivibile. Se invece vogliamo impostare i valori tramite il file params.ini bisogna inserire un parametro per riga. Il nome del parametro e il suo valore sono separati da un segno di uguale, come in questo esempio:
Per recuperare i valori dei parametri affinché vengano utilizzati in ogni pagina del template basta inserire nel file l'istruzione:
Nel nostro esempio possiamo creare tanti file .css con le diverse combinazioni di colori per lo sfondo. Per esempio per lo sfondo rosso creiamo un file che chiamiamo red_background.css e dentro scriviamo:
Per lo sfondo verde creiamo il file green_background.css e scriviamo al suo interno:
Dopo aver scritto i file css dobbiamo modificare il file index.php aggiungendo un link ai file css creati, in questo modo:
e modifichiamo la riga del body:
In questo modo ogni volta che da Gestione Template cambiamo il parametro verrà cambiato lo sfondo anche nel sito.
Fonte: CMS.HTML.IT
Formattazione testo: Mia
Dentro di essa salviamo questi file (dopo li guarderemo in modo più approfondito):
- index.php;
- templateDetails.xml;
- template.css: questo è inserito dentro una cartella che dovremo creare e chiamare css;
- template_thumbnail.png;
- params.ini.
Sarà poi necessario metterci anche altri file, per esempio le immagini da inserire nella grafica. La cartella del template potrà poi contenere delle sottocartelle chiamate per esempio images (per le immagini) e html (per l'override, che vedremo qualche paragrafo più avanti).
Struttura cartelle per il Template
Il file index.php
È il file più importante, indica la posizione dei vari moduli e la locazione del foglio di stile. Proprio per la sua importanza, è definito come lo scheletro del sito. Deve iniziare con questo codice:
Queste righe servono per impostare il linguaggio e per inserire nell'header le informazioni sul sito (come il titolo, la descrizione, i meta tag etc etc) che sono state inserite nel backend, più precisamente in Configurazione globale-->Sito-->Configurazione sito e Configurazione Metadata, come possiamo vedere dalla figura.
Configurazione Metadata
Poi dobbiamo inserire la parte di html riguardante il corpo del testo, come qui:
Questa riga di codice serve per inserire il contenuto principale nella pagina, per esempio gli articoli o una galleria di foto.
Il codice sopra descritto però non contiene tutte le posizioni per i diversi moduli, vediamo allora come fare. In generale basta inserire nel tag div che vogliamo la riga di codice per l'inserimento di tutti i moduli che vanno pubblicati nella stessa posizione, per esempio:
significa che in quel punto della pagina sono pubblicati tutti i moduli a cui è stata assegnata la posizione top nella gestione dei moduli. In tal caso potremo avere uno schema di questo genere
Header e Content
A questo punto il file index.php diventa così:
Osservazione: consiglio di inserire nel file index.php prima della riga
anche la riga di codice:
per la sicurezza del sito.
Il file templateDetails.xml
Questo file è altrettanto importante perché restituisce le informazioni sul template, sull'autore e sui file che servono a far funzionare il template, per esempio i file php e le immagini da inserire. Le prime righe del file sono le seguenti:
In seguito è composto da voci diverse:
- version: per indicare la versione di Joomla utilizzata;
- name: nome del template che vogliamo creare;
- creationDate: data di creazione del template;
- author: il nostro nome, o più in generale il nome dell'autore;
- authorEmail: eventuale indirizzo e-mail dell'autore del template;
- authorUrl: eventuale indirizzo del sito web dell'autore del template;
- copyright;
- license: tipo di licenza per il template;
- version: versione del template(per esempio 1.0.0);
- description: una (breve) descrizione del template;
- files: qui abbiamo l'elenco di tutti i file necessari per il template. Ogni voce dei file contiene il percorso completo a partire dalla directory del template. Quando si va ad installare il template il codice di installazione utilizza le informazioni qui presenti per la memorizzazione dei file durante la fase di installazione. Saranno compresi, ovviamente, index.php, templateDetails.xml e template.css;
- positions: indica le posizioni definite nel template (se si guarda il codice del file index.php sono per esempio left, right, top e footer);
Anche se il tag del file xml si chiama position, esso indica l'elenco dei blocchi ma non la loro posizione. La posizione dei diversi contenitori è infatti definita nel file css. I blocchi di solito hanno dei nomi standard, che possono rappresentare una posizione (che, ripeto, è da definire nell'altro file) e possono essere:
- banner;
- left;
- right;
- top;
- breadcrumb;
- user1;
- user2;
- user3;
- user4;
- footer;
- syndicate;
Nomi di questo genere aiutano nel creare e poi, successivamente, modificare il template e ad assegnare le posizioni ai moduli. Per esempio in left o in right possiamo metterci i menù, nel top il modulo per la ricerca e così via. Nulla ci vieta di inventarne degli altri nè il loro numero, anche se è consigliato usare poche posizioni per non complicare troppo il template e la sua interpretazione da parte dei browser.
Osservazione: a volte i template possono contenere i file di lingua, nel caso sia necessario abilitare la traduzione dei testi statici del modello. In tal caso dobbiamo inserire anche delle righe di codice come le seguenti:
Il Template CSS
Template.css è il foglio di stile vero e proprio. I fogli di stile, meglio conosciuti come CSS (acronimo di Cascading Style Sheets) sono una raccolta di regole (rules) che definiscono gli attributi di formattazione (colore, font, bordi etc etc) applicabili a un tag html.
È necessario personalizzare il proprio template con un po' di stile e fantasia. Per farlo bisogna aggiungere questa riga di codice
nel file index.php, proprio prima della chiusura del tag head (</head>). È in questo file che potete sfruttare tutta la vostra fantasia. A titolo di esempio possiamo vedere questo foglio di stile:
In questo esempio non sono definiti molti stili, per esempio non è descritto come devono comparire i menù (cioè tutto quello che contiene i tag ul e ol), ma come base di partenza può essere buona.
Il file template_thumbnail.png
Questo file non è obbligatorio ma è utile perché mostra, in "Gestione Template" del pannello di amministrazione, un'anteprima del template, come possiamo vedere in figura.
Anteprima template
Ovviamente questa immagine di anteprima è da creare: per farlo basta caricare il template sul sito e salvare la vista tramite i programmi del proprio computer oppure con dei servizi presenti sul web. Infatti su Internet ci sono numerosi siti che creano un'immagine di anteprima di un sito fornendo una URL. Le dimensioni dovrebbero essere circa 225 pixel di larghezza per 150 pixel di altezza.
I parametri del Template
Alcuni template possono avere dei parametri che vanno impostati, come per esempio i colori dello sfondo. Un altro esempio è dato dal template rhuk_milkyway (è uno dei temi già presenti nel pacchetto di Joomla) che consente, dal pannello di amministrazione (nella sezione Gestione Template), di cambiare i colori dei bordi, il colore dello sfondo e la larghezza della visualizzazione. La possibilità di avere dei template con dei parametri da impostare è nata, a partire da Joomla 1.5, dall'esigenza di creare template flessibili. Se vogliamo aggiungere dei nuovi parametri è necessario modificare il file templateDetails.xml, aggiungere una riga di codice al file params.ini che conterrà il valore corrente del parametro e del codice al file php del template per il recupero e la modifica del valore del parametro.
Supponiamo di voler modificare il colore dello sfondo del nostro template. In questo caso, bisogna aggiungere al file templateDetails.xml delle righe di codice come queste:
In questo modo dal pannello di modifica del template nel back end del sito potremo impostare il valore del parametro che vogliamo, come possiamo vedere in figura
Params.isi
In Joomla sono supportati 20 tipi diversi di parametri. Qui sotto è presente un piccolo elenco di essi, in ordine alfabetico:
- calendar: per fornire un link ad un pop-up di calendario;
- category: per fornire un elenco a discesa delle categorie di una sezione;
- editor: per fornire un elenco a discesa delle proprietà dell'editor WYSIWYG;
- filelist: per fornire un elenco a discesa dei file di una directory specificata;
- folderlist: per fornire un elenco a discesa delle cartelle di una directory specificata;
- helpsites: per fornire un elenco a discesa di siti per l'aiuto per l'installazione di Joomla;
- hidden: per fornire un campo nascosto per il salvataggio di un parametro il cui valore non può essere modificato direttamente da un amministratore, ma solo nel codice o nel file params.ini;
- imagelist: per fornire un elenco a discesa dei file immagine in una directory specificata;
- language: per fornire un elenco a discesa di tutte le lingue installate sia per il front-end e back-end del sito;
- list: per fornire un elenco a discesa di voci personalizzate;
- menu: per fornire un elenco a discesa di un menu;
- menuitem: per fornire un elenco a discesa di voci di menu;
- password: per fornire una casella di testo per una password;
- radio: per fornire i pulsanti per la selezione di opzioni diverse;
- section: per fornire un elenco a discesa delle sezioni;
- SQL: per fornire un elenco a discesa di voci ottenuti eseguendo una query sul database utilizzato dal sito in Joomla;
- text: per fornire una casella di testo per l'immissione di dati;
- textare: per fornire un'area di testo per l'ingresso di testo;
- timezones: per fornire un elenco a discesa del fuso orario;
- usergroup: per fornire un elenco a discesa di gruppi di utenti.
Di tutti questi parametri (che si possono utilizzare sia nello sviluppo di template sia di estensioni) saranno pochi quelli effettivamente usati, per esempio i pulsanti radio oppure il listato di valori.
Il File Params.isi
I valori correnti dei parametri del template sono memorizzati nel file params.ini. Esso sta dentro la cartella principale del template (nel nostro caso dentro la cartella SimpleTemplate). Questo vuol dire che se si vuole utilizzare si deve aggiungere questo file anche dentro il tag <files> di templateDetails.xml.
Osservazione: il file params.ini può essere vuoto e i valori di default dei parametri possono essere impostati dentro <pre> <param></pre> del file templateDetails.xml (nel codice sopra abbiamo scritto default="blue" e questo vuol dire che lo sfondo sarà, per default, di colore blu). La presenza del file vuoto durante l'installazione del template garantisce che è scrivibile. Se invece vogliamo impostare i valori tramite il file params.ini bisogna inserire un parametro per riga. Il nome del parametro e il suo valore sono separati da un segno di uguale, come in questo esempio:
Per recuperare i valori dei parametri affinché vengano utilizzati in ogni pagina del template basta inserire nel file l'istruzione:
Nel nostro esempio possiamo creare tanti file .css con le diverse combinazioni di colori per lo sfondo. Per esempio per lo sfondo rosso creiamo un file che chiamiamo red_background.css e dentro scriviamo:
Per lo sfondo verde creiamo il file green_background.css e scriviamo al suo interno:
Dopo aver scritto i file css dobbiamo modificare il file index.php aggiungendo un link ai file css creati, in questo modo:
e modifichiamo la riga del body:
In questo modo ogni volta che da Gestione Template cambiamo il parametro verrà cambiato lo sfondo anche nel sito.
Fonte: CMS.HTML.IT
Formattazione testo: Mia
