Come realizzare un template Joomla? (prima parte)

In questo articolo getteremo le basi per comprendere le tecniche necessarie alla realizzazione di un template per joomla, il celebre CMS. Hai già provato ma ti sei subito scoraggiato? Curiosando nelle cartelle non sei riuscito a capirci nulla? Pensi che sia difficile?

Ti sbagli, basta capire il metodo. Non mi credi?

Prima di iniziare vediamo quali sono i vantaggi e gli svantaggi dell’utilizzo di un cms per la realizzazione di un sito web.

Quali sono gli svantaggi dell’utilizzo di un CMS?

  • Dovrà essere eseguita una grande quantità di codice e di query anche se il sito è molto leggero. Questo riduce le performance che, con un sito tradizionale, sarebbero certamente superiori.
  • Un’installazione di joomla occupa oltre 20Mb.
  • Saremo legati ad un paradigma concettuale (questo non è necessariamente uno svantaggio). Un alto livello di strutturazione, come in qualsiasi cms, ci lega ad una metodologia precisa. E questo non solo nell’organizzazione del sito stesso, ma anche nell’estensione delle sue funzionalità. Così, difficilmente potremo riutilizzare ad esempio una libreria che avevamo scritto in un’altra occasione senza doverla parzialmente o completamente riadattare.

Quali sono i vantaggi dell’utilizzare un CMS nello sviluppo di un sito web?

Vediamo ora i principali vantaggi che in effetti sono molto golosi:

  • Gestione strutturata e standardizzata dei contenuti. Questo ci permetterà di non temere una crescita anche molto forte del sito.
  • Gestione e manutenzione semplificata. La modifica della logica, dell’organizzazione o della navigazione saranno operazioni facili e veloci.
  • Disponibilità immediata di servizi e funzionalità. In un sito tradizionale, implementare un’area riservata è un’operazione laboriosa. Se utilizziamo un CMS tutta la catena che comprende registrazione, verifica della registrazione, autenticazione e gestione utenti è già pronta. Oppure pensiamo che ci venga richiesto, per un sito tradizionale, di implementare un motore di ricerca interno. Non è impossibile, ma i risultati non sono eccellenti e ci vorrà del tempo. Se invece utilizziamo un CMS, ci vorrà un minuto.

L’infinità di moduli esistenti per joomla permetterà di trovare sempre una risposta alle più svariate esigenze.

É possibile realizzare template dall’estetica accattivante con Joomla?

Voglio chiarire che con Joomla è possibile realizzare qualsiasi tipo di template. Lo dico in quanto c’è chi è convinto che l’utilizzo di un CMS comporti delle limitazioni nella creatività. Beh, questo non è vero e lo vedremo.

Iniziamo dunque a produrre il nostro template, sarà molto semplice (header, navigazione a sinistra, contenuti a destra, footer); non sarà un layout accattivante, quello che interessa è comprendere la tecnica.

Parto dal presupposto che tu abbia un’installazione di joomla pulita, senza nessun dato.

1. Struttura dei file e delle cartelle

La cartella di un template di Joomla può contenere diversi file e cartelle, ma come minimo deve essere strutturata come segue (utilizza gli stessi nomi, sono obbligatori).

La cartella del template – il cui nome sarà il nome del template stesso – (nel nostro caso chiameremo il template “inspiration” dunque anche la cartella avrà questo nome). Che contiene:

  • Un file denominato “index.php“.
  • Un file denominato “templateDetails.xml“.
  • Una cartella chiamata “css” che conterrà il foglio di stile denominato “template.css“.
  • Una cartella denominata “images“.

Creiamo dunque la struttura dei file e delle cartelle all’interno della directory “template” di Joomla. Il nostro template, come detto, lo chiameremo “inspiration“.

struttura delle cartelle

2. Il file templateDetails.xml

Questo file può contenere moltissime informazioni relative al template, noi ne inseriremo solo alcune, quelle obbligatorie. Il nostro file sarà così composto:


<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">

    <name>inspiration</name>
    <version>1.0.0</version>
    <creationDate>03/11/10</creationDate>
    <author>Maurizio Tarchini</author>
    <authorEmail>info@mtxweb.ch</authorEmail>
    <authorUrl>http://www.mtxweb.ch</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL version 2</license>
    <description>Descrizione di inspiration</description>

    <positions>
        <position>left</position>
        <position>user1</position>
    </positions>

</install>

Come puoi vedere, la prima parte contiene le informazioni generali relative al template, alcune delle quali le ritroveremo nella schermata della scelta. E’ importante che il valore di “name” sia uguale al nome della cartella.

In seguito troviamo un altro elemento importante, ovvero le positions. In questa sezione definiamo le posizioni disponibili dove inserire i vari moduli. Al nostro template servirà unicamente la posizione “left” per inserire la navigazione e “user1″ che vedremo in seguito per cosa utilizzeremo. Questo elenco lo ritroveremo nel pannello amministrativo quando dovremo scegliere dove posizionare un modulo.

Schermata moduli

3. Il file index.php

Questo file è il cuore del template, vedremo come procedere per implementarlo. Intanto diamo uno sguardo al markup e successivamente commentiamo.

<!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" />
    <link href="templates/system/css/general.css" rel="stylesheet" type="text/css" />
    <link href="templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="container">

        <div id="header">

        </div>

        <div id="navigation">

        </div>

        <div id="content">

        </div>

        <div id="footer">

        </div>

    </div>

</body>
</html>

Dopo la dichiarazione del doctype passiamo a dichiarare l’html ed inseriamo dinamicamente il linguaggio tramite le proprietà pubblica “language” che restituirà la lingua impostata nel pannello di amministrazione.

Ora incontriamo per la prima volta un tag particolare, ovvero

<jdoc:include …>

Questo tipo di tag è utilizzato dal motore di joomla per individuare all’interno del template quali sono i punti nei quali dovrà inserire qualcosa. Nel nostro caso

<jdoc:include type="head" />

segnala il punto dove incudere gli header dinamici, che potrebbero essere ad esempio i meta tag e altre cose che, a dipendenza della configurazione e dei moduli richiesti, potrebbero essere inserite o meno nell’header.

In seguito colleghiamo al documento il foglio di stile denominato “general.css” che come è ovvio conterrà alcuni parametri generali che comunque possono essere ridefiniti se fosse il caso.

Fatto questo colleghiamo il foglio di stile del nostro template. Anche qui facciamo capo alla proprietà pubblica “template” che restituisce il nome del template impostato.

A questo punto non ci resta che impostare il body. Come puoi vedere, abbiamo un elemento di contenimento (#container) che ci servirà per centrare il layout, al suo interno abbiamo gli elementi che conterranno l’header, la navigazione, il contenuto ed infine il footer.

A questo punto dobbiamo iniziare a definire lo stile.

4. Il file template.css

Tramite questo file daremo ora forma al nostro layout. Iniziamo da alcune piccole specificazioni sul body ed in seguito centriamo il contenitore.


body{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: White;
}

#container {
    margin: 0px auto;
    width: 962px;
}

A questo punto definiamo l’header:


#header{
    width: 960px;
    height: 250px;
    border: 1px solid gray;
    margin-bottom: 5px;
}

La navigazione ed i contenuti; nota che li definirò anche in altezza. Questo unicamente per poterli vedere con il layout vuoto. Appena inseriremo i contenuti la proprietà “height” dovrà essere rimossa da questi due elementi così che si possano adattare.


#navigation{
    width: 200px;
    height: 400px;
    border: 1px solid gray;
    float: left;
    margin-bottom: 5px;
}

#content{
    width: 746px;
    margin-left: 10px;
    height: 400px;
    border: 1px solid gray;
    float: right;
    margin-bottom: 5px;
}

Ed infine il footer


#footer{
    width: 960px;
    height: 100px;
    border: 1px solid gray;
    clear: both;
}

A questo punto possiamo impostare il nostro template come predefinito dal pannello amministrativo e visualizzare l’anteprima che darà luogo ad un risultato del genere.

struttura del template

5. Inseriamo dei contenuti

Bene, ora possiamo iniziare ad inserire alcuni articoli nel nostro CMS. Suppongo che se stai leggendo questo articolo utilizzi Joomla e quindi sai come farlo, ma comunque, brevemente:

  • crea una sezione ed una categoria a scelta ed inserisci 4 o 5 articoli. Io li ho chiamati home, contenuto 1, contenuto 2 e contenuto 3.
  • Vai su “menù”->”gestione menù” ed aggiungi un menù indicando un tipo ed un titolo.

Ora passiamo alla creazione del modulo:

  • Vai in “estensioni” -> “Gestione moduli” e clicca su nuovo.
  • Scegli menù e clicca su successivo.
  • Posiziona il menù in “left” e legalo, “in parametri modulo” al nome del menù precedentemente creato.

Ora in “menù” entra nel menù creato ed aggiungi le voci cliccando su “nuovo” e scegliendo “articoli”->”aspetto articolo”, ed in seguito definendo (in “parametri standard”) quale articolo dovrà mostrare.

Fatto questo non dimenticare, sempre in “menù”, di indicare la pagina predefinita (quella che comparirà come pagina di entrata nel sito, in caso contrario tutto si bloccherà).

Bene, e ora basterà inserire nel div “navigation” questo tag:

<div id="navigation">

    <jdoc:include type="modules" name="left" style="" />

</div>

Come vedi il type=”modules” stà ad indicare che verrà appunto caricato uno o più moduli; con l’attributo name facciamo sapere che in quel punto vogliamo che vengano caricati i moduli inseriti nella posizione “left”.

Il tag per i contenuti è invece così:


<div id="content">

    <jdoc:include type="component" />

</div>

Semplicemente type=”component” per indicare che in quel punto vogliamo i contenuti.

Rimuovi ora gli attributi height della navigazione e del contenuto dal foglio di stile ed infine ricarica l’anteprima.

Ecco il risultato:

struttura template con contenuti

6. Conclusione

Fino ad ora abbiamo visto la struttura di base del template, ovvero i file minimi che occorrono e la loro utilità. Siamo intervenuti in seguito sul foglio di stile per posizionare gli elementi ed abbiamo visto come indicare, nel file del template, i punti di inserimento degli output. Come avevo detto, non è poi così difficile.

Nel prossimo articolo ripartiremo da questo punto e vedremo come intervenire sul foglio di stile per dare forma al template, che ora è solo uno scheletro. Vedremo altresì, aspetto molto importante, come agire sugli output dinamici come ad esempio la navigazione.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

67 commenti

  1. velasco
  2. Marco
  3. Giuseppe
  4. QKappa
  5. Mary
  6. Antonio
  7. lxn
  8. Michele.77
  9. Marco
  10. Marco
  11. liars
  12. Domenico
  13. antonio
    • Gabriele
  14. Giampiero
  15. francesco

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by gleenk: Wow crea un template joomla da …
  2. Notizie dai blog su Come realizzare un template Joomla? (seconda parte)
    [...] Come realizzare un template Joomla? (prima parte) In questo articolo getteremo le basi per comprendere le tecniche necessarie alla …
  3. Joomla, template gratuiti per il tuo sito internet | Guida Pagine Web
    [...] Come realizzare un template Joomla? Fonte: yourinspirationweb.com [...]

Lascia un Commento

Current day month ye@r *