Joomlashow arrow Guide arrow Guida alla creazione di un template per Joomla 1.5

Guida alla creazione di un template per Joomla 1.5

20-06-2009 14:50

scritto da Paolo Mariani

tutorial_template joomla
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:

Joomla! Community Portal ...

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"> - 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.

<name>tutorial_template</name> - Questa riga indica il nome del vostro template. In questo esempio abbiamo usato "tutorial_template";

<creationDate>02/2008</creationDate> - Questa riga indica la data di creazione di template;

<author>SiteGround</author> - Questa riga indica l'autore del template;

<authorEmail>user@yourdomain.com</authorEmail> - Questa riga contiene il vostro indirizzo e-mail;

<authorUrl>http://www.siteground.com</authorUrl> Questa riga indica ilsito del creatore del template;

<copyright>SiteGround</copyright> - Questa riga indica contiene le informazioni di copyright del template;

<license>SG TOS</license> - Questa riga indica il tipo di licenza con cui il vostro template è pubblicato;

<version>1.0.0</version> - Questa riga indica la versione del vostro template;

<description>Basic Joomla Template</description> In questa riga potete aggiungere informazioni sul vostro template;

 
  <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>css/template.css</filename>
  </files>

Le righe precedenti indicano tutti i file utilizzati dal vostro template.

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

Anteprima template joomla stadio 2

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!

AstridServizi ItaliaPaolo Mariani, traduttore e imprenditore, titolare di AstridServizi Italia, Monza e socio di Europrogettare, ha collaborato con importanti aziende, case editrici ed enti fieristici in qualità di traduttore, revisore e redattore, copywriter di testi e pagine pubblicitarie. Fin da giovane è appassionato di informatica, in passato si è accostato al PHP e gestisce il sito amatoriale www.tuttomonza.com, recentemente si sta dedicando al CMS Joomla con cui ha creato il sito www.europrogettare.eu.

Commenti utenti  

Nessun commento postato

Aggiungi il tuo commento

Solo gli utenti possono commentare un'articolo.
‹ Precedente   Successivo ›


Articoli Cancelleria

Sito del mese

Il sito del mese su Joomlashow è Arredamenti Attanasio, il sito specializzato nella vendita di cucine a torino.

Ultimi siti Joomla

1. Necrologi
    Categoria: Community

2. Web Agency Evo Sistemi
    Categoria: Business

3. ...
    Categoria: Siti personali

4. leggerelamano.net
    Categoria: Ricerca spirituale

5. Malasanità errore...
    Categoria: Diritto

Random link

www.nonsolobirra.net
Categoria: Siti personali

Categorie

Ricerca

Web Design

Login

Hai dimenticato la password?

Registrati