Cosa sono i template e l'importanza Uno dei punti forza dei CMS sta nella possibilità di personalizzare la grafica del proprio sito: un amministratore può impaginare i propri contenuti come preferisce. La grafica deve essere indipendente dai contenuti: possiamo avere gli stessi contenuti ma uno stile del sito diverso, basta infatti cambiare il tema del sito. Un template Joomla ha lo scopo di definire la grafica del sito, le impostazioni di stile del markup (per esempio le dimensioni e il font da usare nei titoli o nei paragrafi, le tabelle etc etc), ma anche il layout del sito con la suddivisione, per esempio, in due o in tre colonne, la posizione dei moduli, delle immagini e così via. Per creare un template è necessario avere delle buone conoscenze almeno di: HTML; CSS; PHP. La struttura di un sito Oltre al contenuto e alla presentazione, in un sito conta molto la struttura, che è inseparabile dal contenuto, ed è l'unico modo per consentirne la presentazione. Esistono diversi strutture (o layout) di template. Prima di tutto bisogna dire che possono essere create tramite il tag table dell'html oppure con il tag div. I template tableless (cioè quelli senza tabelle) sono quelli più frequenti e più adatti da utilizzare. Questo si capisce dalla definizione del div: è un generic block-level element. Un elemento block-elevel sta a indicare un oggetto che può contenere al suo interno qualsiasi altro elemento html. Per default è senza margini, padding o bordo e qui sta il vantaggio rispetto alle tabelle.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per esempio possiamo aggiungere un contenitore a destra che chiamiamo Right, come in figura Aggiungiamo un contenitore a destra Per fare questo basta aggiungere il tag div con il nome del nuovo elemento dentro all'html, nella parte che vogliamo, per esempio come in questo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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 template
È 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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Configurazione Metadata Poi dobbiamo inserire la parte di html riguardante il corpo del testo, come qui:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Header e Content A questo punto il file index.php diventa così:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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); Alcuni di questi campi sono obbligatori (come quello con l'elenco dei file), altri possono essere lasciati vuoti. Un esempio completo di questo file è il seguente:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
È necessario personalizzare il proprio template con un po' di stile e fantasia. Per farlo bisogna aggiungere questa riga di codice
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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.
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
params.ini 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.
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Alcuni strumenti molto utili durante lo sviluppo dei template sono quelli conosciuti con il nome di validatori del codice HTML. Essi controllano se nel sito c'è conformità con le raccomandazioni sul codice HTML del W3C. Per verificare la conformità basta andare sulla Perfavore,
Entra
oppure
Registrati
per vedere i Link!
del validatore W3C e inserire l'url del proprio sito. Un sito che è possibile visualizzare bene con ogni browser è un requisito fondamentale per il successo dello stesso.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Utilizzare un template diverso può essere fatto se viene passato, durante il caricamento della pagina (sia per richieste GET sia POST), il parametro template, infatti basta scrivere: &template=nome_template. Ma l'override in verità è qualcosa di più nascosto. Uno dei suoi vantaggi è dato dal fatto che se vengono effettuati degli aggiornamenti sul componente non è necessario andare a modificare e a ricordare quali file abbiamo modificato. Per creare l'override di un componente basta caricare il file che crea la personalizzazione dentro la cartella html del template, più precisamente in nometemplate/html/estensione/ Per esempio se vogliamo modificare l'aspetto di default degli articoli (lo troviamo nel file components/com_content/views/article/tmpl/default.php) basta caricare un nuovo file con lo stesso nome (default.php) in nometemplate/html/com_content/article/ e questo file deve contenere le modifiche che vogliamo inserire. Quando il sito caricherà le pagine con gli articoli, sovrascriverà il layout predefinito con quello creato da noi.
Se poi andiamo su "Gestione Template" e, dopo aver selezionato il nostro template, clicchiamo su modifica vediamo che tra i dettagli ci sono quelli inseriti nel file templateDetails.xml, come in figura Simple template Se abbiamo aggiunto dei parametri da assegnare questi li troviamo nella medesima pagina sulla destra Parametri template A questo punto la creazione è fatta e rimane soltanto da utilizzare la fantasia per altri template. Fonte = Html |