Struttura di un template Joomla! 1.5

Tutti i templates per il frontend di Joomla! sono reperibili nell'omonima cartella, raggiungibile via FTP, nella root principale in cui è stato installato il CMS: /templates/.

Supponiamo che il template di nostro interesse si chiami Test-Template; esso deve trovarsi necessariamente al seguente percorso: root_principale/templates/Test-Template.

Al pari dei templates del sito, Joomla! consente anche la personalizzazione dei templates lato amministrativo. In questo caso il percorso è: root_principale/administrator/template/Template_Admin.

Struttura tipica di una cartella template Joomla! 1.5

Scaricando un template free o a pagamento dalla rete, se apriamo la cartella, troveremo al suo interno i seguenti files:

• index.php:è il file principale di tutto il sito; in esso è contenuta tutta l'impostazione generale, il posizionamento di moduli e componenti;
• templateDetails.xml: contiene meta-informazioni relative al template utilizzate dall'installer di Joomla! e dalla Gestione template nel momento in cui lo si installa;
• template_thumbnail.png: solitamente una immagine delle dimensioni di 200 x 150 pixel che viene visualizzata quando in Gestione template si passa con il mouse sul nome del template tra quelli installati.

Una cartella template per Joomla! contiene anche delle sottocartelle di seguito elencate:

• css: contiene il file template.css; gestisce tutti gli aspetti di presentazione del template come, ad esempio, le specifiche per i margini, elenchi, titoli, bordi immagini ecc;
• images: contiene tutte le immagini usate come background del template, logo ecc;
• js: questa cartella, opzionale, non è sempre presente in un template in quanto non necessarimente si deve ricorrere ad un file javascript in un sito web realizzato con Joomla!

File templateDetails.xml

Il file templateDetails.xml contiene tutta una serie di meta-dati utilizzati dal Gestore template per l'intallazione e la manutenzione. E' molto importante conoscere le diverse sezioni dalle quali è composto al fine di capire ed interpretare tutto quanto scritto se si volesse analizzare un file importato in un template di terze parti.

Elementi di base

Accedendo dal frontend di Joomla! alla gestione template da Estensioni → Gestione template, la schermata appare come quella riportata nella figura di seguito:

Ogni campo della tabella prende le informazioni che sono state scritte nel file templateDetails.xml. Facendo riferimento al template predefinito, come in figura, vediamo la sintassi del file .xml:

<install version="1.5" type="template">
<name>JA_Purity</name>
<version>1.2.0</version>
<creationDate>12/26/07</creationDate>
<author>JoomlArt.com</author>
<authorEmail>
 Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo.
 </authorEmail>
<authorUrl>http://www.joomlart.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL version 2</license>
<description>JA PURITY DESCRIPTION</description> 

Struttura dei file

Tutti i files relativi al template sono presentati, alla pari delle informazioni appena viste più su, come una sorta di elenco. Ciascun file contiene tutte le informazioni partendo dalla root principale del template stesso. L'installer di Amministrazione utilizza tali info quando immagazzina i files durante il processo di installazione. Segue una parte di files elencati nel documento templatesDetails.xml, relativa al template JA_Purity:

<filename>component.php</filename>
<filename>css/index.html</filename>
<filename>favicon.ico</filename> 

Lingue

Alcuni templates possono anche includere file di lingua per consentire la traduzione del testo presente nel template. Un esempio per i files lingua viene riportato di seguito; da notare che il primo contiene la descrizione per il file lingua relativo al testo che verrà visualizzato nel frontend. Il secondo attiene al testo che verrà visualizzato dall'Amministratore del sito:

    <languages>
        <language tag="it-IT">it-IT.tpl_JA_Purity.ini</language>
    </languages>
    <administration>
        <languages folder="admin">
            <language tag="it-IT">it-IT.tpl_JA_Purity.ini</language>
        </languages>
    </administration>

Posizione Moduli all'interno del template

Come Joomla! 1.0, anche Joomla! 1.5, per poter visualizzare i moduli all'interno del sito, si avvale delle Posizioni moduli. La differenza sostanziale tra le due versioni è la seguente: mentre nel primo le posizioni blocchi modulo sono già predefinite nell'apposita area di amministrazione (sono 27 le posizioni di default), nel secondo è consentita una maggiore personalizzazione sia per quanto riguarda il numero che il nome stesso da assegnare alla posizione moduli. Per esempio abbiamo:

    <positions>
        <position>hornav</position>
        <position>breadcrumbs</position>
        <position>banner</position>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>user1</position>
        <position>user2</position>
        <position>user3</position>
        <position>user4</position>
        <position>user5</position>
        <position>footer</position>
        <position>syndicate</position>
        <position>debug</position>
 </positions>

Parametri

Un template Joomla! offre, tra le altre cose, una serie di opzioni utili per apportare in tempo reale, da parte di chi amministra il sito, modalità differenti di visualizzazione; il tutto attraverso, come sempre, la Gestione template del sito. Per avere una idea di quanto è stato scritto, viene riportata di seguito una screenshot che racchiude parte del pannello parametri del template predefinito, attraverso i quali si può scegliere il logo del sito reppresentato attraverso una immagine o testo; possibilità di inserire il testo che apparirà nel logo ecc.

Un esempio di come aggiungere i parametri ed i loro valori, nel file templateDetails.xml, è riportato di seguito:

<params>
    <param type="spacer" default="Template Logo" />
    <param name="logoType" type="list" default="image" label="Logo type" description="LOGO TYPE DESCRIPTION">
            <option value="image">Image</option>
            <option value="text">Text</option>
    </param>
    <param name="logoText" type="text" default="" size="50" label="Logo text" description="LOGO TEXT DESCRIPTION" />
    <param name="sloganText" type="text" default="" size="50" label="Slogan" description="SLOGAN DESCRIPTION" />
        <param type="spacer" default="Horizontal Navigation" />        
        <param name="horNavType" type="list" default="moo" label="Horizontal Navigation Type" description="Suckerfish menu or JAMoo menu">
            <option value="moo">JAMoo Menu</option>
            <option value="css">Suckerfish Menu</option>
  </param>
</params>  

Il file index.php di Joomla!

Il file index.php è lo scheletro, il cuore, di tutto il sito web. Qualsiasi pagina che Joomla! "crea" è sempre "index.php"; i suoi contenuti sono estrapolati dal database che immagazzina i dati precedentemente inseriti attraverso l'editor di amministrazione.

Un file index.php lo si può paragonare ad una "miscela" tra codice html e codice php. Mentre il codice html viene visualizzato così come è stato scritto, il codice .php viene prima interpretato dal server e poi presentato a video.

Il codice è assolutamente familiare per chi realizza pagine web; la struttura è sempre quella utilizzata per una normale pagina html. Le sezioni principali <head> e <body> le troviamo comunque nel file. La distinzione del file index.php per Joomla!, rispetto agli altri, la si vede nell'uso del codice (snippet) per inserire le informazioni all'interno delle quali verranno stampate a video i contenuti presenti nel database.

Una porzione di codice html di una semplicissima pagina potrebbe essere il seguente:

<head>
<title>Esempio di pagina html</title>
<meta name="title" content="Pagina di esempio" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
</head>

Lo stesso risultato possiamo averlo con Joomla!, scrivendo un codice del genere:

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

Mettendo a confronto le due parti di codice, possiamo vedere come, nel secondo caso, tutto quello che appare come snippet ( <jdoc:: /> ) viene preso direttamente dal database e presentato a video come un normalissimo codice html. Confrontando il codice prodotto tra una pagina Joomla! ed una html, non vedremmo nessuna differenza.