Qual'è lo scopo del template?

Il template controlla completamente l'aspetto estetico e il layout del sito. Esso fornisce il framework che mette assieme gli elementi comuni, i moduli e i componenti ed anche il CSS del sito. Il template è presente sia nel back-end sia nel front-end del sito.

Quando Joomla! è installato per la prima volta, ti sono forniti automaticamente un gran numero di template. Puoi trovare molti altri template su altri siti web. Alcuni sono forniti gratuitamente sotto diverse licenze, mentre altri sono a pagamento. In aggiunta, ci sono molti sviluppatori che possono fornirti un template personalizzato. Puoi anche costruirti il tuo template da solo.

I template sono gestiti dal Template Manager, che si trova nel menu Estensioni, situato nel back-end ( amministrazione ) del tuo sito.

Comprendere i template di Joomla

Iniziamo col dire che templates del sito (i templates che cambiano l'aspetto del sito - “front-end”) possono essere trovati nella specifica directory per i templates. Ad esempio, se il tuo template si chiama "mytemplate", allora verrà messo nella cartella "[path-assoluto-di-Joomla!] / Templates / mytemplate".

 Mentre i templates dell'Amministratore (i templates che cambiano l'aspetto del Pannello di Amministrazione - “back-end”) possono essere trovati nella directory administrator / templates. Ad esempio, se il tuo template per amministratore si chiama "myadmintemplate", allora verrà messo nella cartella "[path-assoluto-di-Joomla!] / Administrator / templates / myadmintemplate".

Struttura tipica della directory del template

Comunemente per un template sono presenti almeno quattro file:

• index.php - stabilisce la logica della visualizzazione e del posizionamento dei moduli e dei componenti;
• template.css - gestisce l'aspetto della presentazione del template contenenti specifiche per i margini, i caratteri, le voci, i bordi delle immagini, l'aspetto degli elenchi, eccetera;
• templateDetails.xml - contiene le meta-informazioni relative al template che vengono utilizzate dal programma di installazione e da Gestione Template;
• template_thumbnail.ext (sostituendo .ext con un estensione per i formati delle immagini: .jpg, .png, .gif) - generalmente è un immagine del template in uso, delle dimensioni di 200x150 pixel, che viene visualizzata quando il cursore passa sul nome del template nel pannello Gestione Template. Questo dà all'amministratore un'anteprima del template prima che questo venga applicato al sito.

Un tipico template per Joomla! 1.5 comprenderà, inoltre, le seguenti directory:

• Css - contenente tutti i file .Css;
• Images - contenente tutte le immagini utilizzate dal modello;
• Html - contenente i files di override del template e del modulo chrome;

Al fine di suggerire brevemente il significato di questi ultimi termini, in questa sede ci limitiamo a dire che:

• L'override permette ai componenti di sovrascrivere il comportamento che ha normalmente un template quando si visualizzano i componenti, con uno personalizzato per il componente stesso;
• Il modulo chrome consente ai realizzatori di template di avere diverse tipologie di controllo sul modo in cui un modulo viene visualizzato nel proprio template.

Il file templateDetails.xml mostra una gran quantità di meta-data utilizzati dal sistema di Gestione Template in fase di installazione e di manutenzione. È utile riconoscere le diverse sezioni del file. In genere, ogni sezione dei dati è preposta a rendere il file più leggibile, anche se ciò non è necessario.

Dettagli di base

Il file templateDetails.xml.

La schermata iniziale di Gestione Template mostra la lista dei templates disponibili ed i dettagli relativi al template stesso. Ciascuna di queste piccole informazioni è contenuta nel file templateDetails.xml.

<install version="1.5" type="template">    <name>rhuk_milkyway</name>    <creationDate>11/20/06</creationDate>    <author>Andy Miller</author>    <authorEmail>rhuk@rockettheme.com.com</authorEmail>    <authorUrl>http://www.rockettheme.com</authorUrl>    <copyright></copyright>    <license>GNU/GPL</license>    <version>1.0.2</version>    <description>TPL_RHUK_MILKYWAY</description> 

Struttura del file

Tutti i file relativi al template vengono elencati. Ognuno di essi contiene le informazioni del percorso completo a partire dalla directory del template. Il programma di installazione usato dall’Amministratore utilizza queste informazioni per la memorizzazione dei file in fase di installazione.

Di seguito è visibile una parte dei files elencati nel template “rhuk_milkyway”.

<files>   <filename>index.php</filename>   <filename>templateDetails.xml</filename>   <filename>template_thumbnail.png</filename>   <filename>params.ini</filename>   <filename>images/arrow.png</filename>   <filename>images/indent1.png</filename> </files> 

Lingua

Alcuni templates possono contenere i file di lingua, per abilitare la traduzione dei testi statici del template. Si noti come nell’esempio che segue, emerge la presenza di due files di lingua. Il primo contiene il file di lingua per il testo che verrà visualizzato dall'utente. Il secondo, collocato all'interno del tag <administration>, per il testo che verrà visualizzato dall’Amministratore.

<languages>   <language tag="en-GB">en-GB.tpl_beez.ini</language>   </languages>   <administration>   <languages folder="admin">   <language tag="en-GB">en-GB.tpl_beez.ini</language>   </languages> </administration> 

Il modulo “position”

Questo definisce i moduli che possono essere utilizzati nel template.

<positions>   <position>breadcrumb</position>   <position>left</position>   <position>right</position>   <position>top</position>   <position>user1</position>   <position>user2</position>   <position>user3</position>   <position>user4</position>   <position>footer</position>   <position>debug</position>   <position>syndicate</position> </positions> 

Parametri

Il template può offrire varie opzioni di visualizzazione che possono essere selezionate dall’Amministratore nel menù Gestione Template. Ad esempio, il template “rhuk_milkyway” consente all'Amministratore di cambiare i colori dei bordi, il colore dello sfondo, e definire la larghezza della visualizzazione.

Un esempio di parametri aggiuntivi e dei loro valori è mostrato di seguito.

<params>   <param name="colorVariation" type="list" default="white" label="Color Variation"   description="Color variation to use">   <option value="blue">Blue</option>   <option value="red">Red</option>   <option value="green">Green</option>   <option value="orange">Orange</option>   <option value="black">Black</option>   <option value="white">White</option>   </param> </params> 

Ulteriori informazioni circa l’elaborazione dei parametri, sono reperibili ai seguenti link:

• Definizione dei parametri nel templateDetails.xml (da realizzare);
• Rilevare i dati dei parametri nei file del template (da realizzare).

Il file index.php

E' lo scheletro del sito web. Ogni pagina che Joomla! mostra è l’ "index.php" arricchito della selezione dei contenuti inseriti dal database. Questo file, contiene una insieme di codici che verranno interpretati così come sono, ed il codice php, che verrà modificato prima che sia mostrato all’utente finale. Il codice apparirà familiare a chiunque abbia disegnato una semplice pagina web html: ci sono 2 sezioni principali <head> e <body>. La differenza nell’Index.php è appunto l'uso del codice PHP che inserisce le informazioni selezionate da un database.

Ecco un esempio: Sezione <head> del tradizionale linguaggio html:

<head> <title>My Example Webpage</title> <meta name="title" content="example" /> <link rel="stylesheet" href="/www.example.com/css/css.css" type="text/css" /> </head> 

e, la stessa sezione realizzata con Joomla!

<head> <jdoc:include type="head" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>templates/mytemplate/css/css.css"  type="text/css" /> </head> 

Così, in sostituzione di queste parti di header, sul file index.php vengono definite le parti di header che sono gestite dal database con il codice php. La cosa intelligente è che entrambi questi script forniscono lo stesso codice all’utente. Se guardate il codice di un sito web joomla, tutti i comandi <? Php blah /> saranno sostituiti dal regolare codice HTML.

Buona progettazione del template.

Il file Index.php dovrebbe essere il più snello possibile perché sarà nuovamente richiamato ogni volta che una nuova pagina viene caricata. Gli elementi Stilistici dovrebbero essere allocati nel “css file” così da essere salvati nella cache degli utenti. I tutorial presenti in queste guide permettono di acquisire gli aspetti tecnici per creare il tuo index.php.

Perché index.php?

Index.htm è stato storicamente assegnato quale nome dell’home page di ogni sito web. Così quando un utente naviga verso http://www.esempio.com, il server web restituisce http://www.esempio.com/index.htm . Poiché Joomla! è scritto in PHP, index.php sarà il file prodotto automaticamente. Per complicare ulteriormente le cose, quando l’utente naviga verso un sito web joomla, l’index.php della directory principale, reindirizza all’index.php del template in uso.

Convertire un template da Joomla 1.0 a Joomla 1.5 

Aggiorna il tuo file index.php

  1. Sostituisci _VALID_MOS con _JEXEC   2. Sostituisci $mosConfig_absolute_path con $this->baseUrl   3. Sostituisci $mosConfig_live_site con $mainframe->getCfg( 'live_site' )   4. Sostituisci le stringhe fisse con stringhe traducibili. Per esempio, sostituisci echo 'Hello' con echo JText::_( 'Hello' )   5. Sostituisci le chiamate a mosGetParam con chiamate a JRequest::getVar.       Per esempio, sostituisci $id = mosGetParam( $_REQUEST, 'id', 0 ); con $id = JRequest::getVar( 'id', 0 );   6. Sostituisci mosShowHead(); con <jdoc:include type="head" />   7. Sostituisci mosMainBody() con <jdoc:include type="component" />   8. Sostituisci mosLoadModules( $position_name, $style ); con <jdoc:include type="modules" name=$position_name style=$style />   9. Sostituisci if(mosCountModules('position_name')) con if ($this->countModules('position_name'))

Model View Controller (MVC)

In Joomla! 1.5 questa sezione è stata implementata separando le istruzioni, i dati e la loro presentazione. Questo vuol dire che l'HTML, i CSS e il resto del codice necessario per rendere accessibile Joomla! (al browser o a qualsiasi altro dispositivo) sono adesso completamente separati dal codice di Joomla! e sono contenuti interamente nella sezione dei template. In questo modo puoi avere un controllo migliore sul modo in cui che i dati appaiano, senza avere la necessità di accedere al nucleo più profondo del codice di Joomla!. 
Le posizioni dei template
Le posizioni che vengono utilizzate dai template vengono adesso dichiarate nel file /templateDetails.xml/. Per esempio, 
<positions>                      <position>top</position>           <position>left</position>        </positions> 
Il numero di versione di Joomla!
Il numero della versione di Joomla! che si sta impiegando va dichiarata nel template. Per esempio, /<install version="1.5" type="template">/ sostituisce la vecchia versione /<mosinstall type="template">/ presente nelle versioni 1.0.x 
Parametri dei template
Nel template possono essere presenti dei parametri, che vengono dichiarati nel file /templateDetails.xml/. I valori di default posso essere settati nel file /templateDetails.xml/, cui si fa riferimento anche il file /templateDetails.xml /come un generico «file» di template. I parametri possono essere modificati usando l'Administrator Template Manager e anche le istruzioni Javascript del template. 
Gli override dei template
Il sistema di controllo di default per ciascun modulo o componente può essere attivato direttamente nel template, e si trova ora nelle directories /modules/mod_modulename/tmpl/ e /components/com_componentname/views/layout/tmpl/. Il controllo dell'impaginazione può essere modificato anche agendo nel file /pagination.php/. 
Oggetti e metodi
Il framework di Joomla! 1.5 è stato ridisegnato e reso più potente con l’inclusione di un layer Japplication, che contiene una serie di oggetti e di metodi cui potete far riferimento dal file index.php dei template. Per esempio 
· l’istruzione <jdoc:include type="head" /> sostituisce la <?php mosShowHead(); ?> presente nelle versioni 1.0.x 
· la nuova istruzione <?php echo $mainframe->getCfg('sitename');?> sostituisce quella precedente <?php echo $mosConfig_sitename; ?> [N.B: questo nuovo metodo funziona per tutti i parametri del file configuration.php] 
· <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?> prende il posto della vecchia istruzione <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> che appariva nelle versioni 1.0.x 
· e infine <?php echo JURI::base();;?> appare al posto della vecchia <?php echo $mosConfig_live_site; ?>. 
Posizione dei moduli
Ora è disponibile un nuovo modo di controllare quali posizioni previste per i moduli dispongono in un contenuto da mandare a schermo sulla pagina attiva. Questa proceduta può essere impiegata anche per le colonne che collassano (per esempio la colonna di sinistra o quella di destra se non hanno alcun conten contenuto). La vecchia funzione mosCountModules è stata sostituita da $this->countModules, e inoltre sono state aggiunte altre condizioni, come '+', '-', 'or' o 'and', per esempio se ($this->countModules('left or right') == 1). 
 
Struttura dei file di un template
La struttura tipica della directory di un template 
Nella grande maggioranza dei casi un template deve avere almeno quattro file: 
. index.php 
È il file che controlla l’aspetto generale della pagina provvedendo al posizionamento dei moduli e dei componenti 
. template.css 
Questo file controlla la presentazione delle pagine e comprende tutte le informazioni per i margini, i font, i titoli, i bordi delle immagini, il modo in cui deve essere formattata un listato e così via 
. templateDetails.xml 
Qui sono contenute le meta-informazioni che riguardano il tempate e che vengono utilizzate dall’Installer e dal Template Manager 
. template_thumbnail.ext - replace .ext con le estensioni per i vari formati di immagine (.jpg, .png, .gif) 
Di solito si tratta di un’immagine 200x150 pixel che appare quando tieni il cursore sopra il nome del template nella pagina di Gestione dei template e che dà all’Amministratore un visione sintetica dell’aspetto del template prima che questo venga effettivamente impiegato. 
 
Un tipico template per Joomla!1.5 includerà le seguenti cartelle: 
. css: contiene tutti i file con estensione .css 
. html: contiene i file che controllano il template e il suo aspetto finale 
. images: contiene tutte le immagini presenti nel template 
 
 

Ultimo aggiornamento: 26-01-2009 11:58