La Guida Definitiva per Creare un Template Joomladi

Federico Capoano

L'obiettivo di questa guida quello di fornire una panoramica completa sul funzionamento dei template di Joomla 1.5: dalla struttura xhtml + CSS, passando per il file XML fino ad arrivare ai vari tipi di personalizzazioni e tecniche possibili. Svilupperemo inoltre un template che chiameremo "MioTemplate". Ovviamente "MioTemplate" un nome di esempio e potete scegliere qualsiasi nome preferite. Prerequisiti Per comprendere questa guida al 100% necessario essere in possesso di alcune conoscenze (anche basiche) prerequisite, che sono: html/xhtml css php

Se non conoscete neanche uno di questi linguaggi vi consiglio vivamente di studiare le basi di almeno due di essi. Se invece conoscete gi almeno due dei linguaggi precedentemente elencati, potete provare a leggere questa guida ugualmente.

Sviluppare il template La conversione grafica da PNG/PSD (Adobe Fireworks o Adobe Photoshop) ad HTML/XHTML e CSS fuori dall'obiettivo di questa guida, dato che sarebbe necessaria un'intera guida a parte per spiegarne il processo. Per questo il template che svilupperemo avr un aspetto molto semplice, sar poi vostro compito mettere in pratica le tecniche per realizzare template pi accattivanti integrando immagini di sfondo, tipografia e colori sgargianti. Un consiglio per chi vuole convertire un file PSD/PNG a template Joomla: convertite prima la grafica in semplice template xhtml e CSS e dopodich convertite quest'ultimo a Joomla. Questo metodo molto efficace e pu essere utilizzato per qualsiasi CMS. Per aiutarvi a seguire la guida ho preparato un template "scheletro" che potete scaricare ed installare nel vostro Joomla. Notare che il template scheletro contiene gli override di YooTheme e lo script IE6 Warning, che fa apparire un messaggio di avviso agli utenti che utilizzano Internet Explorer 6, incoraggiandoli ad aggiornare il loro browser.

Panoramica del template: struttura dei file Una volta installato il template scheletro noterete che la maggior parte dei file contenuti nell'archivio zip sono stati spostati dall'installer di Joomla nella cartella "/miotemplate" a sua volta contenuta nella cartella "/templates" e che solo contenenti le traduzioni sono stati spostati in altre cartelle. La struttura filesystem del template risulter quindi la seguente:templates/ miotemplate/ CSS/ html/ images/ js/ component.php index.html index.php params.ini template_thumbnail.png templateDetails.xml language/ en-GB/ en-GB.tpl_miotemplate.ini it-IT/ it-IT.tpl_miotemplate.ini administrator/ language/ en-GB/ en-GB.tpl_miotemplate.ini it-IT/ it-IT.tpl_miotemplate.ini

Vediamo velocemente cosa rappresentano questi file e queste cartelle.

2Federico Capoano - La Guida Definitiva per Creare un Template Joomla

CSS/ Questa cartella conterr tutti i file CSS, ovvero i file in cui contenuto il codice di presentazione, il layout, i colori e tutte le informazioni relative all'aspetto del template. html/ La cartella "/html" abbastanza importante in quanto conterr tutti gli overrides del template, ovvero file php che dicono a Joomla che tipo di output html/xhtml utilizzare per le parti interne del template. Se non avete la pi pallida idea di cosa sia un override e incontrate difficolt nel capire questo concetto non preoccupatevi: spiegher in dettaglio gli overrides pi avanti nell'articolo. images/ La cartella "images" conterr tutte le immagini utilizzate dal template, quindi immagini di sfondo, il logo e cos via. js/ La cartella "js" conterr eventuali file javascript del template, ovvero file che definiscono funzionalit aggiuntive del template. Ci tengo a definire che sono funzionalit aggiuntive: un buon template dovrebbe essere in grado di funzionare anche con javascript disabilitato. component.php Questo il template per la modalit popup, una versione ridotta del template che viene caricata in finestre popup, come ad esempio quando si clicca sul link "stampa" o "invia ad un amico". index.html Questo semplicemente un file vuoto che impedir ad eventuali curiosi di vedere la lista dei file contenuti nella cartella del template. index.php Questo il file principale del template, che conterr il codice PHP e la struttura html del template. params.ini Questo file conterr i valori di eventuali parametri utilizzati dal template. Spiegher in dettaglio questo concetto pi avanti nell'articolo. Assicuratevi che il file sia settato con permessi tale che Joomla possa sovrascriverlo. template_thumbnail.png Questa l'anteprima del template che viene mostrata in "Estensioni" > Gestione Template quando si passa il mouse sopra il nome del template. Le dimensioni consigliate sono 200 x 150 pixels.

3Federico Capoano - La Guida Definitiva per Creare un Template Joomla

I file di lingua I file "en-GB.tpl_miotemplate.ini" e "it-IT.tpl_miotemplate.ini" conterranno le traduzioni del template e sono contenuti in cartelle esterne a quella dei template, una relativa al backend ed una relativa al frontend. Questi file sono opzionali e la loro presenza dipende dalla necessit di avere un template multilingua o meno. Pi avanti nella guida spiegher in dettaglio il funzionamento di questi file. templateDetails.xml Questo il file d'installazione del template e contiene informazioni che vengono utilizzate da Joomla per installare, gestire e caricare il template. Un errata configurazione di questo file pu portare a diversi problemi, tra i quali i pi comuni sono: impossibilit di installare il template malfunzionamento nel caricamento delle posizioni malfunzionamento nella traduzione del template impossibilit di selezionare il template come predefinito nel backend di Joomla

Al fine di evitare questi problemi comuni cercher di spiegare velocemente a cosa servono i vari tag XML contenuti nel file templateDetails.xml, per prima occorre che prendiamo come riferimento quello contenuto nel template scheletro: Mio Template October 2010 Federico Capoano contact@joomlashow.it http://www.joomlashow.it/ Nemesis Design di Federico Capoano GNU/GPL 1.0 Template Scheletro
Realizzato da Federico Capoano per joomlashow.it. ]]> index.html index.php params.ini templateDetails.xml template_thumbnail.png component.php html/ images/ css/ js/ en-GB.tpl_miotemplate.ini it-IT.tpl_miotemplate.ini

4Federico Capoano - La Guida Definitiva per Creare un Template Joomla

en-GB.tpl_miotemplate.ini it-IT.tpl_miotemplate.ini navigation top right1 right2 breadcrumb homepage footer

Notare la sezione speciale CDATA che permette di inserire codice html nell'xml senza causare errori di parsing. questo tag indica all'installer di joomla 1.5 che il pacchetto un template : nome del template : data creazione del template, appare nel backend : nome dell'autore del template : data creazione del template, appare nel backend : sito dell'autore, appare nel backend : detentore del copyright, tag opzionale : licenza con cui viene distribuito il template, tag opzionale : versione del template, appare nel backend : descrizione del template, appare al momento dell'installazione e nel backend : tag che raggruppa i tag e : questo tag indica all'installer di Joomla i file del template : simile a file ma indica le cartelle invece dei file. Il tag folder un modo veloce di includere molti file : parametri del template Riferimento: What is the purpose of the templateDetails.xml file? (in Inglese)

5Federico Capoano - La Guida Definitiva per Creare un Template Joomla

Completiamo il file index.php

Prima di andare avanti selezionate il template appena installato come predefinito andando in "Estensioni > Gestione Template" quindi selezionando "Mio Template" e cliccando sul pulsante "Predefinito" in alto a destra. Una volta fatto ci aprite il file index.php del template con il vostro editor preferito, se non ne avete ancora uno vi consiglio Kommodo Edit (Windows / Linux / Mac), PsPad (Windows), BlueFish (Linux). Noterete che il file contiene gi una quantit modesta di codice: la definizione della variabile _JEXEC, il DOCTYPE, l'inclusione dell'head di Joomla, il caricamento dei file CSS del template, il tag html, body e il javascript che carica lo script IE6 Warning. Aggiungiamo quindi dopo l'inizio del tag il codice seguente:

rounded

Titolo Modulo

table

Titolo Modulo

horz

Titolo Modulo

outline

left[outline]

Riferimento: What is module chrome? (in Inglese) 17Federico Capoano - La Guida Definitiva per Creare un Template Joomla

"Module Chrome" personalizzati Se i module chrome predefiniti di Joomla non soddisfano le vostre esigenze potrete crearne altri molto facilmente. Creiamo il file "modules.php" nella cartella "/templates/miotemplate/html/" e inseriamo il codice: