Struttura di un template Joomla!

Un template è composto da files HTML, PHP, CSS, oltre ad immagini grafiche che consentono di definire la presentazione delle pagine del sito.

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:

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

File templateDetails.xml

Il file templateDetails.xml contiene tutta una serie di meta-dati utilizzati dal Gestore template per l'installazione 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 EstensioniGestione template, la schermata appare come quella riportata nella figura di seguito:

gestione template
Gestione template

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>webmaster_@_joomlart.com>
<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

Joomla!, per poter visualizzare i moduli all'interno del sito, si avvale delle Posizioni modulo. Tali Posizioni Modulo consentono una maggiore personalizzazione sia per quanto riguarda il numero di moduli da includere in un sito, che il nome stesso da assegnare ai 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 attraverso una immagine o testo; possibilità di inserire il testo che apparirà nel logo ecc.

parametri del template
Parametri template di joomla!

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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati