Creazione template per Joomla 1.5
scritto da Paolo Mariani
Questa guida è abbastanza semplice e copre gli argomenti di base per la creazione di un template per Joomla tralasciando altri argomenti più avanzati.
Al fine di trattare gli argomenti che non sono stati trattati qui è stata scritta un’altra guida:
La Guida Definitiva per Creare un Template Joomla
In questo articolo spiegheremo come creare un semplice template per Joomla 1.5.
Una volta letto l’articolo, al fine di approfondire le vostre conoscenze ed imparare nuove tecniche nella realizzazione di template per Joomla vi consiglio di leggere alcune recensioni e scaricare alcuni template joomla gratuiti ed osservarne il codice.
Questo articolo è è una traduzione dell’articolo Create a simple Joomla 1.5 template pubblicato su Siteground.com.
L’articolo è stato tradotto da Paolo Mariani
Per prima cosa dovete aprire la directory “templates” e creare una sottocartella chiamata “tutorial_template”. Essa è importante perché conterrà tutti i file del vostro template.
Nella vostra nuova directory create un primo file index.php ed un secondo chiamato templateDetails.xml. Quindi create una cartella css ed un nuovo dal nome template.css. Per creare questi file è sufficiente usare il Blocco Note e salvare i file nel computer. In seguito li potrete caricare via FTP o dal File Manager del pannello di controllo.
Quelli indicati di seguito sono i file necessari per il funizonamento di ogni template Joomla.
- index.php – Questo file specifica la posizione disponibile del modulo e il percorso del file Stylesheet (foglio di stile). Questa è la “sezione” principale del vostro;
- templateDetails.xml – File di sistema che fornisce informazioni sul vostro template all’applicazione Joomla;
- css/template.css – Il file con il foglio di stile (anche conosciuto come CSS) del vostro template. Esso definisce l’aspetto del sito;
Una volta fatto questo, modificate il template di default del vostro sito attivando quello appena creato. Per maggiori informazioni su tale operazione si rimanda alla sezione su come cambiare il template di default in Joomla 1.5.
Ecco il contenuto di ogni file:
Il file index.php deve inziare come segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head>
Le righe precedenti indicano l’inizio dell’output XHTML del vostro sito.
La riga <jdoc:include type=”head” />
inserisce il contenuto dell’header Joomla nella vostra pagina (titolo della pagina, meta descrizione, keyword, etc.) che avete aggiunto nella backend di Joomla.
Ora dobbiamo aggiungere il “corpo” del sito:
<body>
<jdoc:include type="component" />
</body>
</html>
L’istruzione <jdoc:include type=”component” /> mostra il contenuto principale di ogni pagina.
Controlliamo il nostro template. Salvate il file index.php ed accedete alla parte amministrativa dell’applicazione Joomla. Attivate il nuovo “tutorial_template” rendendolo il template di default del sito. Per maggiori informazioni su tale operazione vi rimando ad un articolo che spiega come cambiare il template di default in Joomla 1.5 .
La pagina apparirà come segue, secondo il contenuto che avete inserito:
Questa pagina contiene solo i vostri articoli, senza visualizzazione di stili o moduli. Allora, aggiungiamo qualche posizione per i moduli. Modificate il file index.php e le righe tra <body> e </body> come segue:
<div id="container"> <div id="header"> <jdoc:include type="modules" name="top" /> </div> <div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left"/> </div> <div id="content" class="float"> <jdoc:include type="component" /> </div> <div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right"/> </div> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div> </div>
La riga <jdoc:include type=”modules” name=”left” /> dice a Joomla dove inserire i moduli pubblicati in posizione “left“. Abbiamo appena aggiunto le posizioni top, left, right e footer nel nostro template.
Notare che abbiamo racchiuso queste posizioni in tag <div> ed abbiamo aggiunto informazioni sulle loro classi e ID. Inoltre abbiamo racchiuso il tutto in un altro div con ID “container” che ci permetterà di impostare le dimensioni di base della nostra pagina. Le classi dei div verranno definite nel file template.css che creeremo fra poco.
A questo punto, il nostro template dovrebbe apparire come segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head> <body> <div id="container"> <div id="header"> <jdoc:include type="modules" name="top" /> </div> <div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div> <div id="content" class="float"> <jdoc:include type="component" /> </div> <div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div> </div> </body> </html>
Ora dobbiamo modificare il file templateDetails.xml copiando le seguenti righe:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>tutorial_template</name> <creationDate>02/2008</creationDate> <author>SiteGround</author> <authorEmail>templates@siteground.com</authorEmail> <authorUrl>http://www.siteurl.com</authorUrl> <copyright>SiteGround</copyright> <license>SG TOS</license> <version>1.0.0</version> <description>Basic Joomla Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>css/template.css</filename> </files> <positions> <position>left</position> <position>right</position> <position>top</position> <position>footer</position> </positions> </install>
Guardiamo nel dettaglio il codice del file templateDetails.xml:
<install version=”1.5″ type=”template"></strong> – Questa riga indica la versione di Joomla a cui il template è destinato. Essa permette all’installatore di usare correttamente il vostro template se deciderete di creare un archivio di template.</p> <p><strong><name>tutorial_template</name></strong> – Questa riga indica il nome del vostro template. In questo esempio abbiamo usato "tutorial_template";</p> <p><strong><creationDate>02/2008</creationDate></strong> – Questa riga indica la data di creazione di template;</p> <p><strong><author>SiteGround</author></strong> – Questa riga indica l’autore del template;</p> <p><strong><authorEmail>user@yourdomain.com</authorEmail></strong> – Questa riga contiene il vostro indirizzo e-mail;</p> <p><strong><authorUrl>http://www.siteground.com</authorUrl></strong> Questa riga indica ilsito del creatore del template;</p> <p><strong><copyright>SiteGround</copyright></strong> – Questa riga indica contiene le informazioni di copyright del template;</p> <p><strong><license>SG TOS</license></strong> – Questa riga indica il tipo di licenza con cui il vostro template è pubblicato;</p> <p><strong><version>1.0.0</version></strong> – Questa riga indica la versione del vostro template;</p> <p><strong><description>Basic Joomla Template</description></strong> In questa riga potete aggiungere informazioni sul vostro template;</p> <pre class="php"> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>css/template.css</filename> </files> </strong></p>
<p><strong>Le righe precedenti indicano tutti i file utilizzati dal vostro template.</strong></p>
<strong>
<pre class="php”>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
Le righe precedenti definiscono le posizioni che avete attivato nel vostro template.
Il passaggio successivo consiste nell’aggiungere un po’ di stile al template. Aprire il file index.php e aggiungere la seguente riga prima del tag </head>:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css" type="text/css" />
Questa riga indica al vostro sito la posizione da cui caricare il file con il foglio di stile (CSS).
Modificate il file css/template.css aggiungendo le seguenti righe:
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;}#container {
width: 960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}#header {
text-align: center;
background-color: #f4f9fc;
height: 80px;
}#content {
width: 598px;
text-align: left;
background-color: #f4f9fc;
padding: 5px;
}#sidebar_left {
text-align: center;
background-color: #f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}#sidebar_right {
background-color: #f4f9fc;
text-align: center;
width: 165px;
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}#footer {
background-color: #f4f9fc;
text-align: center;
border-top: 1px solid #e2e2e2;
border-botom: 1px solid #e2e2e2;
padding: 5px;
}
Queste righe aggiungono some clean basic design alle diverse parti del vostro sito. Dovrete acquisire qualche elementare nozione di lavoro con I CSS per apportare le modifiche nell’aspetto del vostro sito Joomla.
A questo punto il vostro template è complete ed il vostro sito apparirà come indicato nella figura sottostante :
Da questo momento l’unico limite al design del vostro sito è la vostra immaginazione. Potete aggiungere posizioni di moduli, giocare con il file css, modificare le immagini di sfondo e cosi via…
La struttura di un template Joomla vi permette di creare con la massima libertà il sito che avete sempre desiderato.
Buon lavoro!
Fonte : Qua
