Guida Template Joomla

La Guida Definitiva per Creare un Template Joomla
di
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.
2
Federico 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.
3
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:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/templateinstall.dtd"> <install version="1.5" type="template"> <name>Mio Template</name> <creationDate>October 2010</creationDate> <author>Federico Capoano</author> <authorEmail>contact@joomlashow.it</authorEmail> <authorUrl>http://www.joomlashow.it/</authorUrl> <copyright>Nemesis Design di Federico Capoano</copyright> <license>GNU/GPL</license> <version>1.0</version> <description> <![CDATA[ <b>Template Scheletro</b><br /> Realizzato da <a href="http://nemesisdesign.net/" target="_blank">Federico Capoano</a> per <a href="http://www.joomlashow.it/" target="_blank">joomlashow.it</a>. ]]> </description> <files> <filename>index.html</filename> <filename>index.php</filename> <filename>params.ini</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>component.php</filename> <folder>html/</folder> <folder>images/</folder> <folder>css/</folder> <folder>js/</folder> </files> <languages> <language tag="en-GB">en-GB.tpl_miotemplate.ini</language> <language tag="it-IT">it-IT.tpl_miotemplate.ini</language> </languages>
4
<administration> <languages folder="admin"> <language tag="en-GB">en-GB.tpl_miotemplate.ini</language> <language tag="it-IT">it-IT.tpl_miotemplate.ini</language> </languages> </administration> <positions> <position>navigation</position> <position>top</position> <position>right1</position> <position>right2</position> <position>breadcrumb</position> <position>homepage</position> <position>footer</position> </positions> </install>
Notare la sezione speciale CDATA che permette di inserire codice html nell'xml senza causare errori di parsing. <install version="1.5" type="template"> questo tag indica all'installer di joomla 1.5 che il pacchetto un template <name>: nome del template <creationDate>: data creazione del template, appare nel backend <author>: nome dell'autore del template <authorEmail>: data creazione del template, appare nel backend <authorUrl>: sito dell'autore, appare nel backend <copyright>: detentore del copyright, tag opzionale <license>: licenza con cui viene distribuito il template, tag opzionale <version>: versione del template, appare nel backend <description>: descrizione del template, appare al momento dell'installazione e nel backend <files>: tag che raggruppa i tag <filename> e <folder> <filename>: questo tag indica all'installer di Joomla i file del template <folder>: simile a file ma indica le cartelle invece dei file. Il tag folder un modo veloce di includere molti file <params>: parametri del template Riferimento: What is the purpose of the templateDetails.xml file? (in Inglese)
5
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 <body> il codice seguente:
<div id="container">  <div id="head"> <h1 id="logo"><a href="<?php echo $this->baseurl ?>">Mio Template</a></h1> <!-Skip Navigation Links Scorciatoie nascoste che migliorano l'accessibilit. Appaiono al focus (usando il pulsante TAB della tastiera), ai browser testuali e agli screenreaders Per maggiori informazioni leggere l'articolo: http://nemesisdesign.net/blog/accessibility/nice-css-skip-links-appearing-focus/ --> <ul id="skip" class="robots-nocontent"> <li><a href="<?php echo str_replace('&', '&', JRequest::getURI()) ?>#content-anchor" accesskey="1" rel="nofollow">Vai al contenuto principale</a></li> <li><a href="<?php echo str_replace('&', '&', JRequest::getURI()) ?>#search-anchor" accesskey="2" rel="nofollow">Vai alla colonna destra / ricerca</a></li> </ul> <div id="navigation">
6
<jdoc:include type="modules" name="navigation" /> </div> </div> <div id="body"> <a name="content-anchor" class="accessibility">Contenuto Principale</a>  <div id="breadcrumb"><span>Sei qui:</span> <jdoc:include type="module" name="breadcrumb" /></div>  <div id="main">  <jdoc:include type="message" /> <jdoc:include type="component" /> </div>  <div id="side"> <a name="search-anchor" class="accessibility">Ricerca / Colonna destra</a> <jdoc:include type="modules" name="right" style="xhtml" /> <jdoc:include type="modules" name="right2" style="xhtml" /> </div> </div>  <div id="foot"> <jdoc:include type="modules" name="footer" style="xhtml" /> <p>Testo footer</p> </div> </div>
Questo codice contiene gi diverse informazioni. Come potete vedere la struttura html abbastanza semplice: c' un <div> container (contenitore) che contiene a sua volta i tag <div> (testa), body (corpo) e foot (piede). Il <div> body a sua volta contiene main (principale) e side (lato). Ogni div contiene i tag di Joomla <jdoc:include>, che servono a caricare i componenti e i moduli di Joomla nelle rispettive posizioni utilizzate (per maggiori informazioni vedere "Direttive Jdoc" pi avanti nella guida). Il codice fa anche uso di una tecnica conosciuta come "skip navigation links", descritti da me nell'articolo appena linkato. Completiamo il CSS Salvato il file index.php e provate ad aggiornare l'homepage del vostro sito Joomla: noterete che il contenuto disposto in righe e che la colonna destra ancora non esiste.
7
Come possiamo cambiare il layout del template? Per molti la risposta sar ovvia: con il CSS. In questa guida useremo solo tre file CSS: template.css, il file principale del template ie6.CSS, CSS specifico per Internet Explorer 6 caricato con commenti condizionali ie.css, CSS specifico per Internet Explorer a partire dalla versione 7, caricato con commenti condizionali
I file specifici per internet explorer fanno parte delle best practises ma tutto sommato hanno un'importanza marginale, se non quella di correggere alcuni errori di visualizzazione su quei browser. Non c' limite al numero di file CSS che si possono utilizzare nel template, ma per ragioni di performance vi consiglio di limitarvi ad un solo file (e quindi una sola richiesta HTTP). Apriamo quindi il file template.css e inseriamo il codice seguente prima del codice degli override di YooTheme:
/* * Mio Template - Tutorial su Joomlashow.it * Realizzato da Federico Capoano * Licenza GNU/GPL */ body{ text-align: center; font: normal 14px/21px "Arial", "Freesans", sans-serif; } #container{ width:960px; padding: 0 20px; margin: 0 auto; text-align: left; } #logo{ font-size:300%; letter-spacing: -2px } #breadcrumb{ margin-bottom: 20px } #body{ overflow: hidden } #main{ float: left; overflow: hidden; width: 610px;
8
padding-right: 10px; } #side{ float: right; width: 310px; padding-left: 10px; } #foot{ margin-top: 20px; clear: both; } div.joomla h1.title, div.joomla h1.pagetitle { margin-top: 0 } /* * Nice Skip links with :focus * http://nemesisdesign.net/blog/accessibility/nice-css-skip-links-appearing-focus/ */ .accessibility{ position: absolute; left: -99999px; height: 10px; width: 10px } #skip{ position: absolute; left: 0; top: 0; width: 100%; padding: 0; text-align: center; list-style: outside none; } #skip a{ position: absolute; left: -99999px; top: 50px; width: 100%; } #skip a:focus, #skip a:active{ position: relative; left: 0; z-index:9999; width: 75%; height: auto; margin: 0 auto; padding: 30px 45px; text-align: center; text-decoration: none; letter-spacing: -4px !important; font: bold 50px "Arial", "Freesans", sans-serif !important; /* color information, edit this to suit the colors of your layout */ color: #a9a9a9; background: transparent url(../images/transparent.png) repeat scroll 0 0; border: 1px dotted black; }
Questo codice CSS non fa altro che impostare il layout in modo che il contenuto si posizioni al centro del browser disponendosi su due colonne. L'uso della propriet overflow: hidden ci permette che gli elementi genitori riconoscano il contenuto settato con la propriet float. Questa tecnica ci risparmia l'uso di elementi vuoti come <br style="clear:both" /> e previene inoltre che eventuali elementi troppo grandi (ad esempio immagini giganti) possano rompere il layout. 9
Non dimentichiamoci di Internet Explorer Il testo iniziale non viene visualizzato correttamente su IE6 e 7 ma niente paura, possiamo risolvere facilmente il problema grazie ai CSS specifici per internet explorer caricati con i commenti condizionali. Aprite il file ie6.CSS e inserite:
h1 { line-height:45px } /* fix IE 6*/
Quindi aprite il file ie.css e inserite:

*:first-child+html h1 { line-height:45px } /* fix IE 7*/
Pubblichiamo alcuni moduli nelle posizioni del template
Ora il contenuto ha assunto un aspetto pi gradevole e si disposto su due colonne, ma se non avete pubblicato nessun modulo in determinate posizioni alcune parti del template risulteranno vuote. Iniziamo perci col pubblicare alcuni moduli nella posizioni "right1", "right2" e "footer" in modo da riempire questi spazi ed osservare il risultato. La posizione "navigation" Se non avete gi un modulo menu principale createne uno e pubblicatelo nella posizione "navigation". Noterete quindi che il menu apparir nella pagina in forma di lista. Per migliorare l'aspetto del menu dovrete utilizzare il CSS: 10
#navigation{ overflow: hidden; margin-bottom: 20px } #navigation ul{ float: left; list-style: outside none; margin: 0; padding: 0; } #navigation li, #navigation a{ float: left } #navigation a{ padding:5px 10px; margin-right: 5px; background: #7b7b7b; color: #fff; text-decoration: none; font-weight: bold } #navigation a:hover, #navigation a:focus{ background-color: #000 }
Aggiungendo questo snippet CSS il modulo assomiglier pi ad un menu vero e proprio (segue screenshot).
Breadcrumb
Il modulo Breadcrumb, che traducendo significa letteralmente "molliche di pane", ci indica in che parte del sito ci troviamo e migliora molto l'usabilit del sito. Se non utilizzate gi questo modulo nel vostro template lo dovrete aggiungere:
1. andate in "Estensioni > Gestione moduli" 2. cliccate su "Nuovo" in alto a destra. 3. Selezionate Breadcrumb 4. Cliccate su "Succ" in alto a destra 5. Dategli un titolo, ad esempio "Breadcrumbs mio template" 6. Assegnate il modulo alla posizione "breadcrumb" 7. Assicuratevi che la checkbox "Attivato" sia impostata su s 8. Salvate il modulo
11
Aggiungere parametri al template
I parametri sono delle opzioni configurabili dal backend di Joomla che permettono di amministrare alcune parti del template senza dover mettere le mani sul codice. L'utilizzo di questa funzionalit permette di realizzare template molto flessibili con cui si possono cambiare velocemente e facilmente alcune parti di esso: tema di colori, logo e cos via. templateDetails.xml I parametri vengono specificati nel file templateDetails.xml all'interno del gruppo <params> e vengono salvati nel file params.ini nella cartella del template. Vediamo come aggiungere alcuni parametri al nostro template con un esempio pratico, apriamo il file templateDetail.xml e aggiungiamo il codice seguente subito dopo la chiusura del tag </position>:
<params> <param type="spacer" default="<b>Testo</b><hr />" /> <param type="text" name="logo" label="Testo Logo" description="Testo che appare in alto a sinistra" default="Mio Template" /> <param type="text" name="footer" label="Testo Footer" description="Testo che appare nel footer" default="Copyright Mio Template" /> <param type="spacer" default="<b>Javascript</b><hr />" /> <param type="radio" name="ie6warning" label="IE6 Warning" description="Attiva o disattiva lo script IE6 Warning" default="1"> <option value="1">Attivato</option> <option value="0">Disattivato</option> </param> </params>
index.php Per recuperare i parametri con php ci basta usare:

<?php $mio_parametro = $this->params->get( 'nome_parametro' ); ?>
Dove $mio_parametro il nome della variabile PHP che conterr il valore settato nel backend di Joomla per il parametro "nome_parametro". Applichiamo quindi l'esempio al nostro template: cambiamo "Mio Template" in <?php echo $this->params->get( 'logo' ); ?>
<h1 id="logo"><a href="<?php echo $this->baseurl ?>"><?php echo $this>params->get( 'logo' ); ?></a></h1>
12
Dopodich cambiamo anche "Testo footer" in <?php echo $this->params>get( 'footer' ); ?>
 <div id="foot"> <jdoc:include type="modules" name="footer" style="xhtml" /> <p><?php echo $this->params->get( 'footer' ); ?></p> </div>
Infine inseriamo lo switch che permette di disattivare lo script IE6 Warning andando ad aggiungere un "if" php subito prima del tag condizionale  <?php endif; ?>
Ora i parametri sono correttamente implementati nel template, non vi resta che giocarci un p e farvi venire idee su come utilizzarli per i vostri template. Se volete approfondire l'argomento dei parametri dei template di Joomla vi consiglio di dare un'occhiata a Tutorial: Template parameters (in Inglese). Questo articolo contiene informazioni dettagliate riguardo a tutti i tipi di parametri disponibili, sia per Joomla 1.5 che per Joomla 1.6. I file di lingua: tradurre il template Il framework di Joomla permette di sviluppare template multilingua abbastanza facilmente. Per farlo bisogna utilizzare i file di lingua, i quali non sono altro che file con estensione "ini" come il file params.ini ma contenenti le variabili di traduzione del template. Possiamo utilizzare due file di lingua: uno per il frontend ed uno per il backend, contenuti rispettivamente nelle cartelle "/language/" e "/administrator/language/". Tradurre il front-end Il nostro template contiene alcuni testi in italiano scritti direttamente nel template e finch utilizzeremo solo una lingua questo non sar necessariamente sbagliato, ma nel momento in cui vorremo sviluppare un sito multilingua dovremo effettuare delle modifiche. Il framework di Joomla dotato di un buon sistema di internazionalizzazione, lo sapevate? Per cominciare ad internazionalizzare il nostro template apriamo il file "/language/it-IT/itIT.tpl_miotemplate.ini" e inseriamo:
VAI AL CONTENUTO PRINCIPALE=Vai al contenuto principale VAI ALLA COLONNA DESTRA=Vai alla colonna destra Contenuto Principale=Contenuto Principale SEI QUI=Sei qui COLONNA DESTRA=Colonna destra
Dopodich apriamo il file "/language/en-GB/en-GB.tpl_miotemplate.ini" e inseriamo:

VAI AL CONTENUTO PRINCIPALE=Skip to main content VAI ALLA COLONNA DESTRA=Skip to right column CONTENUTO PRINCIPALE=Main Content SEI QUI=You are here COLONNA DESTRA=Right Column
Ora per utilizzare le traduzioni appena inserite dovremo usare la classe JTEXT del framework di Joomla. 13
Apriamo il file "index.php" e modifichiamo le parti del template interessate:

<ul id="skip" class="robots-nocontent"> <li><a href="<?php echo str_replace('&', '&', JRequest::getURI()) ?>#content-anchor" accesskey="1" rel="nofollow"><?php echo JText::_( 'Vai al contenuto principale' ); ?></a></li> <li><a href="<?php echo str_replace('&', '&', JRequest::getURI()) ?>#search-anchor" accesskey="2" rel="nofollow"><?php echo JText::_( 'Vai alla colonna destra' ); ?></a></li> </ul>
Notare l'introduzione di <?php echo JText::_( 'Vai al contenuto principale' ); ?> e <?php echo JText::_( 'Vai alla colonna destra' ); ?>. Ora ripetete l'operazione applicando la stessa tecnica con le altre traduzioni:
<a name="content-anchor" class="accessibility"><?php echo JText::_( 'Contenuto Principale' ); ?></a>  <div id="breadcrumb"><span><?php echo JText::_( 'Sei qui' ); ?>:</span> <jdoc:include type="modules" name="breadcrumb" /></div>
<a name="search-anchor" class="accessibility"><?php echo JText::_( 'Colonna destra' ); ?></a>
Notare che le chiavi contenute nel file di lingua devono essere maiuscole (esempio: SEI QUI), mentre il metodo della classe JText case insensitive, ovvero non tiene conto della differenza tra maiuscole e minuscole, per cui "Sei Qui" trover una corrispondenza nella chiave "SEI QUI". Nelle stringhe non possibile utilizzare doppi apici ("") per farlo dovrete utilizzate l'entit html equivalente ". Se nessuna stringa corrispondente viene trovata nei file di lingua, JText restituir il testo contenuto nella stringa con cui viene chiamato. Ad Esempio:
<?php echo JText::_( 'Questa stringa non trova corrispondenza nel file di lingua' ); ?>
Restituir: "Questa stringa non trova corrispondenza nel file di lingua" sia nella versione italiana che in quella inglese. Tradurre il backend Possiamo tradurre anche i testi contenuti nella gestione dei parametri del backend di Joomla ("Estensioni > Gestione template > Mio Template"). Per farlo apriamo il file "/administrator/language/it-IT/it-IT.tpl_miotemplate.ini" e aggiungiamo:
TESTO=<b>Testo</b><hr /> TESTO LOGO=Testo Logo TESTO FOOTER=Testo Footer LOGO DESC=Testo che appare in alto a sinistra nella pagina FOOTER DESC=Testo che appare nel footer IE6WARNING DESC=Attiva o disattiva lo script IE6 Warning ATTIVATO=Attivato DISATTIVATO=Disattivato
Mentre in "/administrator/language/en-GB/en-GB.tpl_miotemplate.ini" aggiungiamo:

TESTO=<b>Text</b><hr /> TESTO LOGO=Logo Text TESTO FOOTER=Footer Text LOGO DESC=Text appearing in upper left part of the page FOOTER DESC=Text appearing in footer IE6WARNING DESC=Activate or deactivate IE6 Warning script ATTIVATO=Active DISATTIVATO=Unactive
14
Quindi modifichiamo la sezione <params> del file "templateDetails.xml":

<params> <param type="spacer" default="TESTO" /> <param name="logo" type="text" label="TESTO LOGO" description="LOGO DESC" default="Mio Template" /> <param name="footer" type="text" label="TESTO FOOTER" description="FOOTER DESC" default="Copyright Mio Template" /> <param type="spacer" default="<b>Javascript</b><hr />" /> <param name="ie6warning" type="radio" label="IE6 Warning" description="IE6WARNING DESC" default="1"> <option value="1">ATTIVATO</option> <option value="0">DISATTIVATO</option> </param> </params>
Aggiungere altre lingue Abbiamo tradotto il nostro template in italiano e inglese (potete verificare cambiando la lingua di default da "Estensioni > Gestione lingua") ma come possiamo aggiungere il supporto per altre lingue? Prima di tutto dovremo aggiungere i file di lingua nel posto giusto: /language/[CODICE-LINGUA]/[CODICE-LINGUA].tpl_[NOME-TEMPLATE] /administrator/language/[CODICE-LINGUA]/[CODICE-LINGUA].tpl_[NOMETEMPLATE]
Dove [CODICE-LINGUA] corrisponde al codice della lingua che vogliamo aggiungere e [NOMETEMPLATE] al nome del template. Supponiamo quindi di voler aggiungere lo Spagnolo (es-ES), prima di tutto dovremo creare le cartelle "/language/es-ES/" e "/administrator/language/es-ES/" dopodich dovremo creare il file "es-ES.tpl_miotemplate.ini" in entrambe. Quindi dovremo aggiungere il rispettivo codice xml nel file templateDetails.xml:
<languages> <language tag="en-GB">en-GB.tpl_miotemplate.ini</language> <language tag="it-IT">it-IT.tpl_miotemplate.ini</language> <language tag="es-ES">es-ES.tpl_miotemplate.ini</language> </languages> <administration> <languages folder="admin"> <language tag="en-GB">en-GB.tpl_miotemplate.ini</language> <language tag="it-IT">it-IT.tpl_miotemplate.ini</language> <language tag="es-ES">es-ES.tpl_miotemplate.ini</language> </languages> </administration>
Riferimento: Tutorial:Template translations (Inglese) importante notare che il funzionamento dei file di lingua cambier leggermente in Joomla 1.6, per informazioni vedere: Specification of language files in Joomla 1.6 (Inglese)
15
Direttive Jdoc Per imparare ad usufruire di tutta la potenza dei template Joomla importante capire a fondo le direttive Jdoc (<jdoc:include />). Component
<jdoc:include type="component" />
Questo elemento include il contenuto del componente in uso e dovrebbe essere utilizzato solamente una volta nel template. Head
<jdoc:include type="head" />
Questo elemento include il CSS, i javascript, il titolo e i meta tag della pagina. Installation
<jdoc:include type="installation" />
Questo elemento viene utilizzato solo dall'installer di Joomla e non c' motivo di utilizzarlo in un template front-end. Personalmente non mi mai capitato di utilizzarlo. Message
<jdoc:include type="message" />
Questo elemento mostra eventuali messaggi di sistema e dovrebbe essere incluso solamente una volta nel template. Il CSS relativo pu essere trovato in "/templates/system/CSS/system.css". Module
<jdoc:include type="module" name="mainmenu" title="Main Menu" />
Questo elemento carica un singolo modulo definito dagli attributi "name" e "title". L'attributo "name" deve corrispondere al tipo di modulo (in questo esempio "mod_mainmenu") mentre l'attributo "title" dovrebbe essere il nome del modulo desiderato. Modules
<jdoc:include type="modules" name="right" style="xhtml" />
Questo elemento permette di includere tutti i moduli assegnati alla posizione specificata nell'attributo "name". L'attributo style permette di scegliere il codice html contenitore del modulo, anche conosciuto come "Module Chrome".
Riferimenti: Jdoc statements (in Inglese) La direttiva "jdoc:include" nei template per Joomla
16
L'attributo "sytle" dei moduli, ovvero "Module Chrome" L'attributo style dei moduli determina l'output html in cui il modulo viene contenuto. Ecco una tabella di riferimento: Style
None (omesso) 
Output
xhtml
<div class="moduletable_menu"> <h3>Main Menu</h3>  </div>
rounded
<div class="module_menu"> <div> <div> <div> <h3>Titolo Modulo</h3>  </div> </div> </div> </div>
table
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Titolo Modulo</th> </tr> <tr> <td>  </td> </tr> </table>
horz
<table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Titolo Modulo</th> </tr> <tr> <td>  </td> </tr> </table> </td> </tr> </table>
outline
<div class="mod-preview"> <div class="mod-preview-info">left[outline]</div> <div class="mod-preview-wrapper">  </div> </div>
Riferimento: What is module chrome? (in Inglese) 17

"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:
<?php defined('_JEXEC') or die('Restricted access'); /** * Questo un file che aggiunge stili di rendering dei moduli personalizzati. * Per usarlo devi settare l'attributo style nell'inclusione del modulo nel tuo template in modo che combaci con l'ultima parte del nome della funzione. * * esempio. Per includere i moduli della posizione "right" nello style "custom" dovreste usare l'include seguente: * <jdoc:include type="module" name="right" style="custom" /> * * Questo da ai template designer il controllo ultimo su come i moduli vengono visualizzati. * * NOTA BENE: Tutti i metodi personalizzati devono essere chiamati: modChrome_{STYLE} * e devono prendere gli stessi argomenti ($module, &$params, &$attribs). */ function modChrome_custom($module, &$params, &$attribs) { $headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3; if (!empty ($module->content)) : ?> <?php if ($module->showtitle) : ?> <h<?php echo $headerLevel; ?>><?php echo $module->title; ?></h<?php echo $headerLevel; ?>> <?php endif; ?> <?php echo $module->content; ?> <?php endif; }
Ora aggiungendo nel vostro template:

<jdoc:include type="modules" name="right" style="custom" headerLevel="2" />
Si otterr il seguente output html:

<h2>Titolo Modulo</h2> 
In questo caso abbiamo solamente fatto piccole modifiche, ad esempio stiamo utilizzando <h2> invece di <h3>, ma possibile utilizzare questa funzionalit per ottenere il massimo della flessibilit nella personalizzazione grafica del vostro template. Approfondimento: Applying custom module chrome (in Inglese)
Overrides Gli overrides permettono di modificare il codice interno di Joomla e di altri componenti che seguono il pattern MVC e tenere queste modifiche separate dai file del core in modo da non compromettere l'aggiornabilit di Joomla. Purtroppo i componenti interni di Joomla restituiscono un output HTML di default che fa un uso massiccio di tabelle per la visualizzazione del contenuto, tecnica abbastanza discutibile sotto diversi punti di vista, come ad esempio accessibilit, peso del codice HTML e SEO. Gli overrides permettono di cambiare questo output senza andare a modificare i file interni di Joomla con due vantaggi importanti: 18
1. le modifiche sono raggruppate tutte nello stessa cartella; 2. possibile aggiornare Joomla senza preoccuparsi di sovrascrivere le modifiche, perch sono contenute al sicuro nella cartella del template. Gli overrides sono contenuti in: "/templates/miotemplate/html/" Seguono una struttura del tipo: /templates/NOME_TEMPLATE/html/NOME_ESTENSIONE/VIEW/NOME_FILE.php Quindi se per esempio volessimo modificare l'output html degli articoli di contenuto di Joomla dovremmo prendere in considerazione l'estensione "com_content" e la view "Article" copiando cos il file: /components/com_content/views/article/tmpl/default.php in /templates/miotemplate/html/com_content/article/default.php Una volta copiato il file potremo modificarlo a nostro piacimento. Naturalmente dovreste avere conoscenze adeguate riguardanti php, html e CSS per effettuare queste modifiche con successo. Nel nostro caso non necessario applicare questo esempio dato che abbiamo utilizzato gli override di YooTheme, che forniscono una buona base per poter sviluppare un template completamente tableless. Riferimenti: How to override the output from the Joomla! core (in Inglese) Understanding Joomla Output Overrides (in Inglese)
Il file "component.php" Come gi scritto in precedenza, questa una versione ridotta del template che viene utilizzata nelle popup, come ad esempio quando si clicca su "Stampa" o "Invia ad un amico". Non c' molto da aggiungere, se non che potete personalizzarla a vostro piacimento per ottenere una buona leggibilit. Approfondimento: The popup template file su theartofjoomla.com (in Inglese)
Il file "editor_content.css" Questo file CSS viene utilizzato dall'editor di Joomla per importare gli stili del template nell'editor. Lavorando correttamente su questo file potete ottenere una buona anteprima dei vostri articoli nell'editor di Joomla. Per ottenere questo risultato non c' una tecnica standard, ma dovrete lavorare sul CSS copiando dal file principale "template.css" tutte le informazioni riguardanti la tipografia, i colori, margini, ritmo verticale e cos via. Notare che questo il funzionamento dell'editor di default di Joomla e di alcuni altri editor, come FCK e JCK, ma potrebbe non funzionare nello stesso modo per altri editor. 19
Se utilizzate un editor diverso possibile che la stessa funzionalit venga implementata diversamente, per accertarvene dovrete consultare la sua documentazione. Tecniche comuni Se non avete esperienza con i template di Joomla questa sezione vi sar molto utili per imparare alcune tecniche di base che vengono usate comunemente. $this->countModules() Supponiamo di voler fare in modo che una certa zona di un template venga visualizzata solo se ci sono moduli pubblicati in una determinata posizione, il metodo countModules() ci viene in aiuto:
<?php if($this->countModules('user6')): ?> <div class="user6"> <jdoc:include type="modules" name="user6" style="xhtml"> </div> <?php endif; ?>
In questo modo <div class="user6"> verr visualizzato solamente nel caso ci sia almeno un modulo pubblicato nella posizione "user6". Applichiamo ora questo esempio al nostro template facendo in modo che la colonna destra venga visualizzata solo nel caso in cui ci sia almeno un modulo pubblicato nelle posizioni "right" e "right1". Modifichiamo il codice del file index.php in due punti:
 <div id="main"<?php if(!$this->countModules('right or right2')): ?> class="single_column"<?php endif; ?>>
<?php if($this->countModules('right or right2')): ?>  <div id="side"> <a name="search-anchor" class="accessibility"><?php echo JText::_( 'Colonna destra' ); ?></a> <jdoc:include type="modules" name="right" style="custom" headerLevel="2" /> <jdoc:include type="modules" name="right2" style="xhtml" /> </div> <?php endif; ?>
Quindi modifichiamo il file template.css aggiungendo:

#main.single_column{ width:920px; padding-right:10px }
Come traduciamo questo codice in linguaggio umano? Primo blocco: se nessun modulo pubblicato nelle posizioni "right" o "right1" aggiungere la classe "single_column" a <div id="main">. Secondo blocco: se almeno un modulo pubblicato nelle posizioni "right" o "right1" visualizzare <div id="side"> con i suddetti moduli. Terzo blocco (CSS): l'elemento con id "main" e classe "single_column" occupa tutto lo spazio disponibile nella pagina.
20
Determinare se si in homepage Determinare se si in homepage o meno una necessit che si presenta spesso quando si sviluppa un template. Per farlo possiamo utilizzare un codice del tipo:
<?php $menu = &JSite::getMenu(); $homepage = ($menu->getActive() == $menu->getDefault()); if($homepage) echo "Questa l'homepage"; ?>
Se la vostra homepage coincide con il componente "frontpage" potreste anche utilizzare questo codice pi specifico:
<?php $menu = &JSite::getMenu(); $homepage = ($menu->getActive() == $menu->getDefault() && JRequest::getVar('view') == 'frontpage'); if($homepage) echo "Questa l'homepage"; ?>
Applichiamo la tecnica al nostro template per fare in modo che il modulo breadcrumb non venga visualizzato in homepage, dato che l il testo "home" del tutto superfluo.
<?php $menu = &JSite::getMenu(); $homepage = ($menu->getActive() == $menu->getDefault() && JRequest::getVar('view') == 'frontpage'); if(!$homepage): ?>  <div id="breadcrumb"><span><?php echo JText::_( 'Sei qui' ); ?>:</span> <jdoc:include type="modules" name="breadcrumb" /></div> <?php endif; ?>
Sebbene l'esempio sia piuttosto banale, rende abbastanza bene l'idea di come poter utilizzare la tecnica. Disabilitare mootools dove non serve Se nel vostro template non utilizzate la libreria mootools sarete probabilmente interessati a sapere come disabilitarla nelle pagine in cui non necessaria, al riguardo ho gi scritto un'articolo qui su Joomlashow intitolato "Disabilitare Mootools e caption.js dal frontend di Joomla 1.5". Il modo migliore di imparare altre tecniche Il modo migliore per imparare altre tecniche ed aumentare le vostre conoscenze senza dubbio quello di scaricare template open source realizzati da designer esperti ed analizzarli. Il bello del codice open source proprio questo: la conoscenza libera e ognuno libero di potervi accedere. Condividendo la vostra conoscenza con non aiutate soltanto gli altri, ma permettete a voi stessi di crescere insieme a tutta la comunit.
21
Convertire il template in un archivio zip installabile Una volta che il template completato possibile creare un'archivio zip installabile. Il procedimento semplice, basta includere tutti i file del template (compresi i file di lingua contenuti nelle cartelle "/languages/" e "/administrator/languages/") in un file zip con una struttura simile:
miotemplate.zip admin/ it-IT.tpl_miotemplate.ini en-GB.tpl_miotemplate.ini CSS/ html/ images/ js/ component.php index.html index.php params.ini template_thumbnail.png templateDetails.xml it-IT.tpl_miotemplate.ini en-GB.tpl_miotemplate.ini
Conclusione Le possibilit di evoluzione e personalizzazione dei template Joomla sono probabilmente illimitate, gli unici limiti sono dettati dalla vostra creativit e le vostre conoscenze tecniche. Scrivere questa guida stato molto impegnativo ed ha richiesto diversi giorni. Prima di iniziare pensavo che ormai era troppo tardi per scriverla dato che Joomla 1.6 gi alle porte (beta 11 al momento in cui scrivo). Alla fine per ho deciso di scriverla ugualmente: penso che potr essere comunque utile a moltissime persone che vogliono imparare il funzionamento interno dei template Joomla.
22

Guida Template Joomla

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guida Template Joomla

Caricato da

Copyright:

Formati disponibili

La Guida Definitiva per Creare un Template Joomla

Vediamo velocemente cosa rappresentano questi file e queste cartelle.

Completiamo il file index.php

Quindi aprite il file ie.css e inserite:

Pubblichiamo alcuni moduli nelle posizioni del template

Aggiungere parametri al template

index.php Per recuperare i parametri con php ci basta usare:

Dopodich apriamo il file "/language/en-GB/en-GB.tpl_miotemplate.ini" e inseriamo:

Apriamo il file "index.php" e modifichiamo le parti del template interessate:

<a name="search-anchor" class="accessibility"><?php echo JText::_( 'Colonna destra' ); ?></a>

Mentre in "/administrator/language/en-GB/en-GB.tpl_miotemplate.ini" aggiungiamo:

Quindi modifichiamo la sezione <params> del file "templateDetails.xml":

Riferimento: What is module chrome? (in Inglese) 17

Ora aggiungendo nel vostro template:

Si otterr il seguente output html:

Quindi modifichiamo il file template.css aggiungendo:

Potrebbero piacerti anche