Guida per creare template per Joomla

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 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 maggiorparte 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 catelle.

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.

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/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/" 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>
  
  <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"></strong> questo tag indica all’installer di joomla 1.5 che il pacchetto è un template</li>
  <li><strong><name></strong>: nome del template</li>
  <li><strong><creationDate></strong>: data creazione del template, appare nel backend</li>
  <li><strong><author></strong>: nome dell’autore del template</li>
  <li><strong><authorEmail></strong>: data creazione del template, appare nel backend</li>
  <li><strong><authorUrl></strong>: sito dell’autore, appare nel backend</li>
  <li><strong><copyright></strong>: detentore del copyright, tag opzionale</li>
  <li><strong><license></strong>: licenza con cui viene distribuito il template, tag opzionale</li>
  <li><strong><version></strong>: versione del template, appare nel backend</li>
  <li><strong><description></strong>: descrizione del template, appare al momento dell’installazione e nel backend</li>
  <li><strong><files></strong>: tag che raggruppa i tag <filename> e <folder></li>
  <li><strong><filename></strong>: questo tag indica all’installer di Joomla i file del template</li>
  <li><strong><folder></strong>: simile a file ma indica le cartelle invece dei file. Il tag folder è un modo veloce di includere molti file</li>
  <li><strong><params></strong>: parametri del template</li>
  </ul>
  <blockquote class="note”>Riferimento: What is the purpose of the templateDetails.xml file? (in Inglese)

  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">
   
    <!-- Parte superiore -->
    <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('&', '&amp;amp;', JRequest::getURI()) ?>#content-anchor" accesskey="1" rel="nofollow">Vai al contenuto principale</a></li>
        <li><a href="<?php echo str_replace('&', '&amp;amp;', JRequest::getURI()) ?>#search-anchor" accesskey="2" rel="nofollow">Vai alla colonna destra / ricerca</a></li>
      </ul>
   
      <div id="navigation">
        <jdoc:include type="modules" name="navigation" />
      </div><!--/#navigation-->
   
    </div><!--/#head-->
   
    <div id="body">
   
      <a name="content-anchor" class="accessibility">Contenuto Principale</a>
   
      <!-- Modulo Breadcrumb, anche conosciuto come pathway - ci dice in che parte del sito ci troviamo -->
      <div id="breadcrumb"><span>Sei qui:</span> <jdoc:include type="module" name="breadcrumb" /></div>
   
      <!-- Contenuto Principale, nel nostro caso a sinistra -->
      <div id="main">
   
        <!-- Messaggio di avviso o errore -->
        <jdoc:include type="message" />
   
        <jdoc:include type="component" />
   
      </div><!--/#main-->
   
      <!-- Contenuto Secondario, nel nostro caso a destra -->
      <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><!--/#side-->
   
    </div><!--/#body-->
   
    <!-- Footer -->
    <div id="foot">
   
      <jdoc:include type="modules" name="footer" style="xhtml" />
   
      <p>Testo footer</p>
   
    </div><!--/#foot-->
   
  </div><!--/#container-->
   

  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.

  

  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 spefico per Internet Explorer 6 caricato con commenti condizionali
  • ie.css, css spefico 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;
    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 propietà 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.

  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:

   
  #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

  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 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 ?>"><!-- Mio Template --><?php echo $this->params->get( 'logo' ); ?></a></h1>
   

  Dopodichè cambiamo anche “Testo footer” in <?php echo $this->params->get( ‘footer’ ); ?>

   
  <!-- Footer -->
  <div id="foot">
   
      <jdoc:include type="modules" name="footer" style="xhtml" />
   
      <p><!--Testo footer--><?php echo $this->params->get( 'footer' ); ?></p>
   
  </div><!--/#foot-->
   

  Infine inseriamo lo switch che permette di disattivare lo script IE6 Warning andando ad aggiungere un “if” php subito prima del tag condizionale <!–[if lte IE 6]>:

   
  <?php if($this->params->get( 'ie6warning' )): ?>
  <!--[if lte IE 6]><script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/ie6/warning.js"></script><![endif]-->
  <?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/it-IT.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 dd
  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.
  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('&', '&amp;', JRequest::getURI()) ?>#content-anchor" accesskey="1" rel="nofollow"><?php echo JText::_( 'Vai al contenuto principale' ); ?></a></li>
      <li><a href="<?php echo str_replace('&', '&amp;', 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>
   
  <!-- Modulo Breadcrumb, anche conosciuto come pathway - ci dice in che parte del sito ci troviamo -->
  <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 &quot;.

  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 tringa non trova corrispondenza nel file di lingua' ); ?>
   

  Restituirà: “Questa tringa 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
   

  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_[NOME-TEMPLATE]

  Dove [CODICE-LINGUA] corrisponde al codice della lingua che vogliamo aggiungere e [NOME-TEMPLATE] 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)

  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

  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	Output
  None (omesso)	<!-- codice interno del modulo -->
  xhtml	<div class="moduletable_menu"> <h3>Main Menu</h3> <!-- codice interno del modulo --> </div>
  rounded	<div class="module_menu"> <div> <div> <div> <h3>Titolo Modulo</h3> <!-- codice interno del modulo --> </div> </div> </div> </div>
  table	<table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Titolo Modulo</th> </tr> <tr> <td> <!-- codice interno del modulo --> </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> <!-- codice interno del modulo --> </td> </tr> </table> </td> </tr> </table>
  outline	<div class="mod-preview"> <div class="mod-preview-info">left[outline]</div> <div class="mod-preview-wrapper"> <!-- codice interno del modulo --> </div> </div>

  Riferimento: What is module chrome? (in Inglese)

  “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" 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:

   
  <h2>Titolo Modulo</h2>
  <!-- codice modulo -->
   

  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:

  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 conisderazione 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.
  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 quest modo <div class=”user6"></strong> verrà visualizzato solamente nel caso ci sia almeno un modulo pubblicato nella posizione "user6".</p>
  <p>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:

   
  <!-- Contenuto Principale, nel nostro caso a sinistra -->
  <div id="main"<?php if(!$this->countModules('right or right2')): ?> class="single_column"<?php endif; ?>>
   

   
  <?php if($this->countModules('right or right2')): ?>
  <!-- Contenuto Secondario, nel nostro caso a destra -->
  <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><!--/#side-->
  <?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"></strong>.</p>
  <p>Secondo blocco: se almeno un modulo è pubblicato nelle posizioni "right” o “right1” visualizzare <div id=”side"></strong> con i suddetti moduli.</p>
  <p>Terzo blocco (css): l’elemento con id <strong>"main"</strong> e classe <strong>"single_column"</strong> occupa tutto lo spazio disponibile nella pagina.</p>
  <h3 class="contentheading contents”>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):
  ?>
  <!-- Modulo Breadcrumb, anche conosciuto come pathway - ci dice in che parte del sito ci troviamo -->
  <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 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.

  Fonte : Qua