Guida Completa Creare Template Joomla

La Guida Denitiva per Creare un Template Joomla - Joo...
http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...
Joomla Show
Chi Siamo Suggerire siti Farsi votare Forum Mappa del sito Joomlashow Guide La Guida Denitiva per Creare un Template Joomla
La Guida Denitiva per Creare un Template Joomla

12-10-2010 16:31 scritto da 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 le xml no 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 graca da PNG/PSD (Adobe Fireworks o Adobe Photoshop) ad HTML/XHTML e CSS fuori
1 di 26
07/08/2013 11:33
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, tipograa e colori sgargianti. Un consiglio per chi vuole convertire un le PSD/PNG a template Joomla: convertite prima la graca in semplice template xhtml e css e dopodich convertite quest'ultimo a Joomla. Questo metodo molto ecace 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 le

Una volta installato il template scheletro noterete che la maggiorparte dei le 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 lesystem 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 le e queste catelle.
css/
Questa cartella conterr tutti i le css, ovvero i le 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 le 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 dicolt nel capire questo concetto non preoccupatevi: spiegher in dettaglio gli overrides pi avanti nell'articolo.
2 di 26
07/08/2013 11:33
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 le javascript del template, ovvero le che deniscono funzionalit aggiuntive del template. Ci tengo a denire 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 nestre popup, come ad esempio quando si clicca sul link "stampa" o "invia ad un amico".
index.html
Questo semplicemente un le vuoto che impedir ad eventuali curiosi di vedere la lista dei le contenuti nella cartella del template.
index.php
Questo il le principale del template, che conterr il codice PHP e la struttura html del template.
params.ini
Questo le conterr i valori di eventuali parametri utilizzati dal template. Spiegher in dettaglio questo concetto pi avanti nell'articolo. Assicuratevi che il le 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.
I le di lingua
I le "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 le 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 le.
templateDetails.xml
Questo il le d'installazione del template e contiene informazioni che vengono utilizzate da Joomla per installare, gestire e caricare il template. Un errata congurazione di questo le 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 predenito nel backend di Joomla Al ne di evitare questi problemi comuni cercher di spiegare velocemente a cosa servono i vari tag XML contenuti nel le templateDetails.xml, per prima occorre che prendiamo come riferimento quello contenuto nel template scheletro:
3 di 26
07/08/2013 11:33
<?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/template-install.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/" ]]> </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> <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 <les>: tag che raggruppa i tag <lename> e <folder> <lename>: questo tag indica all'installer di Joomla i le del template
4 di 26
07/08/2013 11:33
<folder>: simile a le ma indica le cartelle invece dei le. Il tag folder un modo veloce di includere molti le <params>: parametri del template Riferimento: What is the purpose of the templateDetails.xml le? (in Inglese)
Completiamo il le index.php
Prima di andare avanti selezionate il template appena installato come predenito andando in "Estensioni > Gestione Template" quindi selezionando "Mio Template" e cliccando sul pulsante "Predenito" in alto a destra. Una volta fatto ci aprite il le 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 le contiene gi una quantit modesta di codice: la denizione della variabile _JEXEC, il DOCTYPE, l'inclusione dell'head di Joomla, il caricamento dei le 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 co <li><a href="<?php echo str_replace('&', '&', JRequest::getURI()) ?>#search-anchor" accesskey="2" rel="nofollow">Vai alla c </ul> <div id="navigation"> <jdoc:include type="modules" name="navigation" /> </div>
5 di 26
07/08/2013 11:33
</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 le 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.
6 di 26
07/08/2013 11:33
Come possiamo cambiare il layout del template? Per molti la risposta sar ovvia: con il CSS. In questa guida useremo solo tre le CSS: template.css, il le principale del template ie6.css, css speco per Internet Explorer 6 caricato con commenti condizionali ie.css, css speco per Internet Explorer a partire dalla versione 7, caricato con commenti condizionali I le specici 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 le CSS che si possono utilizzare nel template, ma per ragioni di performance vi consiglio di limitarvi ad un solo le (e quindi una sola richiesta HTTP). Apriamo quindi il le 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; padding-right: 10px; } #side{ float: right;
7 di 26
07/08/2013 11:33

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 propiet overow: hidden ci permette che gli elementi genitori riconoscano il contenuto settato con la propriet oat. 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.
Non dimentichiamoci di Internet Explorer
8 di 26
07/08/2013 11:33
Il testo iniziale non viene visualizzato correttamente su IE6 e 7 ma niente paura, possiamo risolvere facilmente il problema grazie ai css specici per internet explorer caricati con i commenti condizionali. Aprite il le ie6.css e inserite:
h1 { line-height:45px } /* fix IE 6*/
Quindi aprite il le 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:
9 di 26
07/08/2013 11:33
#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 signica 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. 2. 3. 4. 5. 6. 7. 8. andate in "Estensioni > Gestione moduli" cliccate su "Nuovo" in alto a destra. Selezionate Breadcrumb Cliccate su "Succ" in alto a destra Dategli un titolo, ad esempio "Breadcrumbs mio template" Assegnate il modulo alla posizione "breadcrumb" Assicuratevi che la checkbox "Attivato" sia impostata su s Salvate il modulo
Aggiungere parametri al template
I parametri sono delle opzioni congurabili dal backend di Joomla che permettono di amministrare alcune parti
10 di 26
07/08/2013 11:33

del template senza dover mettere le mani sul codice.
L'utilizzo di questa funzionalit permette di realizzare template molto essibili con cui si possono cambiare velocemente e facilmente alcune parti di esso: tema di colori, logo e cos via.
templateDetails.xml
I parametri vengono specicati nel le templateDetails.xml all'interno del gruppo <params> e vengono salvati nel le params.ini nella cartella del template. Vediamo come aggiungere alcuni parametri al nostro template con un esempio pratico, apriamo il le 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 sinitra" 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>
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>
Inne inseriamo lo switch che permette di disattivare lo script IE6 Warning andando ad aggiungere un "if" php subito prima del tag condizionale  <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 le di lingua devono essere maiuscole (esempio: SEI QUI), mentre il metodo della classe JText case insensitive, ovvero non tiene conto della dierenza tra maiuscole e minuscole, per cui "Sei Qui" trover una corrispondenza nella chiave "SEI QUI".
12 di 26
07/08/2013 11:33
Nelle stringhe non possibile utilizzare doppi apici ("") per farlo dovrete utilizzate l'entit html equivalente ". Se nessuna stringa corrispondente viene trovata nei le di lingua, JText restituir il testo contenuto nella stringa con cui viene chiamato. Ad Esempio:
<?php echo JText::_( 'Questa tringa non trova corrispondenza nel file di lingua' ); ?>
Restituir: "Questa tringa non trova corrispondenza nel le 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 le "/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
Quindi modichiamo la sezione <params> del le "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 vericare cambiando la lingua di default da "Estensioni > Gestione lingua") ma come possiamo aggiungere il supporto per altre lingue? Prima di tutto dovremo aggiungere i le di lingua nel posto giusto: /language/[CODICE-LINGUA]/[CODICE-LINGUA].tpl_[NOME-TEMPLATE] /administrator/language/[CODICE-LINGUA]/[CODICE-LINGUA].tpl_[NOME-TEMPLATE] Dove [CODICE-LINGUA] corrisponde al codice della lingua che vogliamo aggiungere e [NOME-TEMPLATE] al nome del template.
13 di 26
07/08/2013 11:33
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 le "es-ES.tpl_miotemplate.ini" in entrambe. Quindi dovremo aggiungere il rispettivo codice xml nel le 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 le di lingua cambier leggermente in Joomla 1.6, per informazioni vedere: Specication of language les in Joomla 1.6 (Inglese)
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
14 di 26
07/08/2013 11:33
<jdoc:include type="module" name="mainmenu" title="Main Menu" />
Questo elemento carica un singolo modulo denito 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 specicata 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
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
codice interno del modulo -->
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>
15 di 26
07/08/2013 11:33
<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)
"Module Chrome" personalizzati

Se i module chrome predeniti di Joomla non soddisfano le vostre esigenze potrete crearne altri molto facilmente. Creiamo il le "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 * * esempio. Per includere i moduli della posizione "right" nello style "custom" dovrest 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:
16 di 26
07/08/2013 11:33

<h2>Titolo Modulo</h2> 
In questo caso abbiamo solamente fatto piccole modiche, ad esempio stiamo utilizzando <h2> invece di <h3>, ma possibile utilizzare questa funzionalit per ottenere il massimo della essibilit nella personalizzazione graca del vostro template. Approfondimento: Applying custom module chrome (in Inglese)
Overrides
Gli overrides permettono di modicare il codice interno di Joomla e di altri componenti che seguono il pattern MVC e tenere queste modiche separate dai le 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 modicare i le interni di Joomla con due vantaggi importanti: 1. le modiche sono raggruppate tutte nello stessa cartella; 2. possibile aggiornare Joomla senza preoccuparsi di sovrascrivere le modiche, 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 modicare l'output html degli articoli di contenuto di Joomla dovremmo prendere in conisderazione l'estensione "com_content" e la view "Article" copiando cos il le:
/components/com_content/views/article/tmpl/default.php
in
/templates/miotemplate/html/com_content/article/default.php
Una volta copiato il le potremo modicarlo a nostro piacimento. Naturalmente dovreste avere conoscenze adeguate riguardanti php, html e css per eettuare queste modiche 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 le "component.php"
17 di 26
07/08/2013 11:33
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 le su theartofjoomla.com (in Inglese)
Il le "editor_content.css"
Questo le css viene utilizzato dall'editor di Joomla per importare gli stili del template nell'editor. Lavorando correttamente su questo le 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 le principale "template.css" tutte le informazioni riguardanti la tipograa, 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. 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.
18 di 26
07/08/2013 11:33
$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 quest 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". Modichiamo il codice del le 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 modichiamo il le 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.
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"; ?>
19 di 26
07/08/2013 11:33
Se la vostra homepage coincide con il componente "frontpage" potreste anche utilizzare questo codice pi specico:
<?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 superuo.
<?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.
Convertire il template in un archvio zip installabile

Una volta che il template completato possibile creare un'archivio zip installabile. Il procedimento semplice, basta includere tutti i le del template (compresi i le di lingua contenuti nelle cartelle "/languages/" e "/administrator/languages/") in un le 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
20 di 26
07/08/2013 11:33
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 ne per ho deciso di scriverla ugualmente: penso che potr essere comunque utile a moltissime persone che vogliono imparare il funzionamento interno dei template Joomla. Il risultato nale del template joomla realizzato in questa guida: miotemplate.zip La guida disponibile anche in formato pdf, grazie a Fabrizio Galuppi.
Questa guida pubblicata con Licenza Creative Commons.
Federico Capoano un freelance web designer / web developer proveniente da Roma che attualmente vive in Spagna, nelle Isole Baleari. Ideatore e fondatore di Joomlashow.it, gestisce una piccola impresa individuale conosciuta come "Nemesis Design" che ore servizi di web design a ibiza. Puoi tenerti aggiornato su nuovi articoli e tips & tricks su Joomla seguendolo su Twitter. Hai trovato questo articolo utile o interessante? Non perdere i nostri prossimi post, iscriviti ai nostri Feeds RSS Aiutaci a spargere la voce segnalando l'articolo su altri Social Networks!
Commenti utenti
Visualizza 14 di 14 commenti Grazie per l'ottima guida Ciao, come da titolo... grazie per l'ottima guida! Non mancher di leggerla appena avr un po' pi tempo, nel frattempo ti ringrazio xch mi sembra ben fatta. Stefano N.B.: [consiglio] il form lascia un po' a desiderare (non mi chiamo messapico e la mia mail vorrei poterla decidere io) Scritto da: messapico (Membro) 12-10-2010 18:51 Bel lavoro!! La guida ottima ma mi viene dicile capire il senso della parola "denitiva" nel titolo... :-D Perch dopo questa fatica hai deciso di non scriverne pi? :D :D :D Sai cosa avrei aggiunto? un'immagine del template con disegnate le posizioni modulo in modo da rendere pi comprensibile il codice del template. Si, lo so! E' fatica sprecata :D :D Ci sar sempre qualcuno che ti chieder: come si allarga la colonna destra/sinistra, l'intestazione, il footer, il
21 di 26
07/08/2013 11:33
banner, come si aggiunge una posizione modulo, come si cambia il carattare, ecc. ecc. Ciao Scritto da: BigHam (Guest) 13-10-2010 06:13 Grazie Grazie ragazzi. L'ho voluto chiamare denitiva perch dopo questa non c' bisogno che scriva altre guide relative ai template per Joomla 1.5. Ora voglio cominciare a scrivere qualcosa per Joomla 1.6. Scritto da: nemesis (Guest) 13-10-2010 09:21 @ BigHam Penso che avevi ragione, uno schema graco con le posizioni dei moduli utile e perci l'ho aggiunto. Per me talmente chiaro che non mi ero reso conto che potrebbe non essere cos per molti di quelli che leggeranno la guida. Scritto da: nemesis (Membro) 13-10-2010 10:54 rientrare lato amministrativo.... Ciao a tutti!! ho un problema con il lato amministrativo del joomla...ah! dimenticavo....(ho installato joomla nel mio localhost) praticamente se installo joomla senza template e senza esempi mi esce solo il lato "sito" e non riesco + ad entrare nel lato amministrativo...la stessa cosa per quanto riguarda l'installazione di base del template...una volta installato non riesco + ad andare nel lato amministrativo.....da premettere una cosa...sono un programmatore di vari linguaggi ma la prima volta che uso i cms.....dove sbaglio????? aiutatemi...perch la guida molto semplice da seguire ma nel momento in cui chiudo il broswer elo riapro mi esce solo il lato "sito"...come faccio ad entrare nel lato amministratore??????? Scritto da: beppe (Guest) 04-12-2010 06:37 RE: rientrare lato amministrativo.... La domanda non chiara, inoltre esce fuori tema rispetto all'articolo. Se vieni sul forum e apri un post spiegando il tuo problema in dettaglio posso provare ad aiutarti. Scritto da: Federico Capoano (Guest) 04-12-2010 06:59 Problema mod_Syndication-Feed Entries! Dopo aver provato ad esercitarmi col tuo tutorial ed aver caricato il template "scheletro.zip", in seguito ad alcune prove di codice, come hai spiegato tu, (probabilmente non andate a buon ne), ho caricato il mio precedente template fatto con Artisteer 2.5. Purtroppo non mi funziona pi il bottone Feed Entries, del modulo Syndication che per la Homepage visualizza tutti i feeds. Ho provato anche a caricare il template di default di Joomla 1.5.22, chiamato "rhuk_milkyway", ma anche qui il bottone non funziona, nel senso che riporta una pagina bianca con scritto: "...Internet Explorer: impossibile visualizzare il feed. Il feed contiene errori di codice. Torna alla pagina precedente. Ulteriori informazioni: Carattere non valido nel contenuto di testo. Riga: 31 Carattere: 96 -->JavaScript..." -Come si pu risolvere questo problema? Ho gi provato a disattivare-riattivare il modulo, ma non v! Scritto da: Horsepower (Guest) 23-02-2011 06:21
22 di 26
07/08/2013 11:33

Complimenti! Ragazzo mio, tu hai i controcoglioni!
Una guida cos non l'avevo mai vista neanche nei siti dei "Guru" di Joomla. Se ne fai una anche per Joomla 1.6 mi avrai come ammiratore devoto per il resto dei miei giorni! Scritto da: Pippo (Guest) 06-03-2011 22:30 Ciao Federico. Ciao Federico. Scusami se faccio qualche errore scrivendo in italiano, ma sono glio d'italiani residenti all'estero, sudamerica. Mi sto iniziando un questo di disegnare siti web e ho scelto Joomla! e ti voglio chiedere se e' possibile che mi aiuti a disegnare un Template per il mio sito. Io ho in programma andare in Italia per meta settembre a trovare a uno zio che non vedo da una decina d'anni, in Provincia de Roma. Stando io li ti posso chiamare e pagarti per il tuo lavoro. Fammelo sapere attraverso il mio e-mail (piper90[--at--]hotmail[--dot- -]com). Grazie. Antonio. Scritto da: Antonio (Guest) 14-06-2011 04:14 Dove modico la pagina index per w3c? Ciao, non riesco a trovare la pag. modicabile per correggere un errore che mi segnala w3c. Ho installato joomla accessibile Cinzia Scritto da: Cinzia (Guest) 07-07-2011 12:18 grande Ottima guida... complimenti... l'ho salvata nei miei favourites di ie.... mi mettero subito all'opera : ) Scritto da: Chiara (Guest) 31-07-2011 16:48 ottimo , ci provo e vi aggiorno Grande guida , grande joomla... mi metto a lavoro saluti paola Scritto da: paola (Guest) 20-09-2011 10:38 grazie mille ho trovato la guida utile e facile grazie mille. Scritto da: ottima guida (Guest) 02-01-2012 15:18 vale anche per Joomla 2.5? Ciao Federico, la tua guida mi stata utilissima: ci ho fatto un sito in Jommla 1.5 per un mio amico che funziona benissimo! Ora per sto lavorando con la 2.5 e sto ricavando i les per il template da un psd. Questa guida valida anche per Joomla 2.5? Cosa va cambiato/ricontrollato per renderla compatibile? Grazie Scritto da: Silvia (Guest) 22-02-2012 09:18
Aggiungi il tuo commento
23 di 26
07/08/2013 11:33

Solo gli utenti possono commentare un'articolo.
Successivo Indietro
Main Menu
Joomlashow Home Cos' Joomla News / Blog Articoli Guide Templates Forum Siti amici Aiutaci / Collabora
Directory Menu
Suggerisci una categoria I miei siti Joomla Ultimi siti Joomla inseriti Siti Joomla in evidenza Siti Joomla pi cliccati Siti Joomla pi votati Siti Joomla pi belli Siti Joomla pi commentati
Ultimi siti Joomla

1. Chat over 40 senza...
Categoria: Community
2. Consulenza Privacy
Categoria: Diritto
3. telefonateerotiche.com
Categoria: Siti personali
4. ...
Categoria: Siti personali
5. Progesa Help Card

Categoria: Salute
Random link
Runelore
runelore.it Categoria: Siti personali
eettua il Login oppure Registrati
Categorie
Animali (16)
24 di 26
07/08/2013 11:33

Arte (81) Business (118) Cinema (11) Community (21) Computer (118) E-commerce (76) Giochi (21) Hobby (35) Libri (11) News portal (50) Salute (24) Scienza (10) Siti personali (25) Societ (98) Sport (123) Tecnologia (4) Turismo (167) Umorismo (4) Volontariato (11)
Ricerca
Cerca nel sito Cerca
Web Design
Joomlashow, Directory siti Joomla - Contatti - Privacy
Login
Registrati
25 di 26
07/08/2013 11:33
Nome:
Username: Username: Email: Password: Password: Ricordami Accedi Hai dimenticato la password? Accept terms Registrati Conferma Password:
26 di 26
07/08/2013 11:33

Guida Completa Creare 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 Completa Creare Template Joomla

Caricato da

Copyright:

Formati disponibili

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla

La Guida Denitiva per Creare un Template Joomla - Joo...

Panoramica del template: struttura dei le

Vediamo velocemente cosa rappresentano questi le e queste catelle.

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

Non dimentichiamoci di Internet Explorer

La Guida Denitiva per Creare un Template Joomla - Joo...

Quindi aprite il le ie.css e inserite:

Pubblichiamo alcuni moduli nelle posizioni del template

La Guida Denitiva per Creare un Template Joomla - Joo...

Aggiungere parametri al template

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

I le di lingua: tradurre il template

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

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

La Guida Denitiva per Creare un Template Joomla - Joo...

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

Quindi modichiamo la sezione <params> del le "templateDetails.xml":

Aggiungere altre lingue

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

<jdoc:include type="module" name="mainmenu" title="Main Menu" />

L'attributo "sytle" dei moduli, ovvero "Module Chrome"

<table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr>

La Guida Denitiva per Creare un Template Joomla - Joo...

Riferimento: What is module chrome? (in Inglese)

"Module Chrome" personalizzati

Ora aggiungendo nel vostro template:

Si otterr il seguente output html:

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

Quindi modichiamo il le template.css aggiungendo:

La Guida Denitiva per Creare un Template Joomla - Joo...

Disabilitare mootools dove non serve

Il modo migliore di imparare altre tecniche

Convertire il template in un archvio zip installabile

La Guida Denitiva per Creare un Template Joomla - Joo...

Questa guida pubblicata con Licenza Creative Commons.

La Guida Denitiva per Creare un Template Joomla - Joo...

La Guida Denitiva per Creare un Template Joomla - Joo...

Aggiungi il tuo commento

La Guida Denitiva per Creare un Template Joomla - Joo...

Ultimi siti Joomla

5. Progesa Help Card

runelore.it Categoria: Siti personali

eettua il Login oppure Registrati

La Guida Denitiva per Creare un Template Joomla - Joo...

Joomlashow, Directory siti Joomla - Contatti - Privacy

La Guida Denitiva per Creare un Template Joomla - Joo...

Potrebbero piacerti anche