joomla template development

Come creare un template per Joomla 3 – Parte 1

In questo articolo spiego la prima parte della creazione di un template per Joomla 3, ci focalizzeremo sulle basi, ossia i requisiti minini per la sua progettazione; è scontato che è necessario almeno avere conoscenze dei linguaggi di programmazione HTML, CSS e PHP.

Bando alla ciance e mettiamoci all’opera!

Struttura di lavoro template Joomla

  1. creare una nuova cartella chiamata joomla_tmpl
  2. all’interno di joomla_tmpl creare una cartella chiamata css
  3. creare un file vuoto index.php e copiare all’interno di joomla_tmpl
  4. creare un file vuoto templateDetails.xml e copiarlo all’interno di joomla_tmpl
  5. creare un file vuoto template.css e copiarlo all’interno di joomla_tmpl/css

La struttura della cartella joomla_tmpl che otterete è la seguente

struttura template joomlaAnalizziamo in dettaglio cosa abbiamo creato e a cosa serve ogni singolo file

joomla_tmpl : è la cartella che contiene tutti i file del template

css : è la cartella che contiene tutti i file .css del template

index.php : è il file principale del template che “renderizza” i contenuti

templateDetails.xml : è il file che utilizza l’installer di Joomla per sapere cosa e dove copiare i file e contiene anche le informazioni del template.

Questo è lo stretto necessario per iniziare a creare il primo template, si lo so che è un pò pochino, ma come prima lezione è più che sufficiente credetemi.

Come scrivere un file index.php per il template di Joomla

Bene, ora che abbiamo la struttura necessaria iniziamo con l’editare i singoli file, così da immetere il codice necessario per creare il template.

Quindi aprite il file index.php con un editor di testo a basso livello tipo Notepad, Fraise oppure anche Dreamweaver se lo utilizzate, inserite esattemete il codice sottostante.

Analizziamo il codice inserito

<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?> : è una stringa che si utilizza ai fini di sicurezza ed impedisce ai malintezionati di utilizzare il codice per provare a bucare il sito, certo non è la soluzione a tutti i mali ma è comunque utile e necessaria.

<!DOCTYPE html> : è la dichiarazione del tipo di documento, in questo caso HTML5
 
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head> : indica la lingua del sito in uso ed inizializza il template (si veda infatti il tag head)
 
<jdoc:include type=”head” /> : include le informazioni meta (keywords, description, title)
 
linea 6 e 7 : vengono inclusi due file css di sistema
 
line 8 e 9 : alla linea 8 viene incluso il file css del template (template.css), il file risiede nella cartella css del tema (quella che abbiamo creato in precedenza); la linea 9 chiude il tag head infatti subito dopo troviamo il tag body dove andrà all’interno tutto il codice HTML del template.

Come creare posizioni dei moduli in un template Joomla 3

Dalla riga 10 del file index.php troviamo il tag body, da qui in poi andranno inserite le chiamate (dette call) ai vari componenti e moduli di Joomla, in gergo si chiamano Jdoc statements .
 
<jdoc:include type=”modules” name=”top” /> : in questo caso stiamo mostrando la posizione top di un modulo, normalmente in questa posizione viene visualizzato il menu principale di Joomla.
 
<jdoc:include type=”component” /> : questa stringa è fondamentale in quanto mostra i contenuti di Joomla che utilizzano i componenti (vedi Gestione Articoli per esempio).
 
<jdoc:include type=”modules” name=”bottom” /> : qui invece mostriamo il contenuto di un modulo pubblicato nella posizione bottom.
 
Alle righe 14 e 15 chiudiamo pure i tag body ed html così da avere il nostro file index.php completo.

Come creare un file xml per template Joomla

Il contenuto del file templateDetails.xml è molto importante in quanto al suo interno troviamo tutte le posizioni dei moduli del template, tutte le cartelle ed i file da copiare in fase di installazione e le informazioni sull’autore, la descrizione del tema, la data di creazione dello stesso ed infine il tipo di licenza.
 
Questo il contenuto del file templateDetails.xml
 

 Analizziamo anche qui il file XML

<extension version=”3.1″ type=”template” client=”site”> : è la stringa che identifica che il pacchetto è per la versione di Joomla 3.x

<name>joomla_tmpl</name> : è il nome che avete dato alla cartella che contiene tutti i file del template, se cambiate il nome alla cartella dovete cambiare anche il contenuto del tag name, altrimenti l’installazione darà errore perchè non troverà corrispondenza.

<filename>index.php</filename> : indica il nome del file che è nella root della cartella del template, quindi tutti i file che sono al di fuori di altre cartelle (vedi la cartella css). E’ necessario creare una stringa per ogni file da includere.

<folder>css</folder> : a differenza del tag file name in cui è necessario specificare il singolo file, il tag folder include tutti i file contenuti nella cartella e la cartella stessa. Attenzione perchè se includete una cartella che però non contiene alcun file, l’installazione vi darà un errore.
 
<position>top</position> : questo tag specifica il tipo di posizione che verrà visualizzato nel menu a tendina dei moduli alla voce “Posizione”, è necessario creare una stringa per ogni posizione del template ed il nome deve essere identico a quello di jdoc:include nel parametro name del file index.php.

Come creare un file CSS per il template di Joomla

Il file template.css è quello che conterrà tutta la formattazione di layout del nostro template, giusto per prova potete scrivere un paio di righe, poi potrete sbizzarrirvi come meglio credete e volete.
 

Come creare un file zippato per l’installazione del template Joomla 3

Bene ora abbiamo creato il nostro primo, se pur modesto, template per Joomla 3 ! Adesso dobbiamo comprimerlo in .targ.gz o in .zip, per fare ciò potete utilizzare Winzip su Windows oppure Zipeg su Mac, comprimiamo la cartella joomla_tmpl.

Ora che abbiamo il nostro bel file zippato possiamo provare ad installarlo come fosse un normalisso template Joomla.

Se avete seguito alla lettera la guida, una volta installato il template apparirà nella lista dei template installati e sarà possibili utilizzarlo.

come creare un template joomla 3

Programmatore WordPress e Joomla, PHP/MySQL.
Sono freelance mi trovi come Professionista Joomla e articolista nella lista ufficiale di joomla.it, e come Professionista WordPress nella lista ufficiale di WUG Italia.
Dal 2006 sono titolare di Web Synapse, una Web Agency di Milano.
Pratico Kung Fu Wing Chun e mi piacciono le tagliatelle al ragù ! :-)

3 commenti su “Come creare un template per Joomla 3 – Parte 1

  1. Ciao Alessio innanzitutto complimenti per la tua spiegazione esaustiva, in pratica è da poco che ho iniziato la mia avventura nel web, mi sono appena diplomato da web master a Roma ed in pratica ho imparato a montare temi personalizzati solo su wordpress volevo chiederti praticamente tutto il codice qui sopra per il collegamento ai fogli di stile è lo stesso meccanismo che si utilizza con Word Press?? ed una volta effettuato poi iniziamo a scrivere il codice e non serve altro??Se puoi darmi qualche delucidazione in più per favore che mi sarebbe di grande aiuto grazie anticipatamente.

    • Ciao Alessandro,

      ti ringrazio per i complimenti.In realtà WP è un pò diverso da Joomla, si ha come Joomla le sue funzioni integrate però la sintassi del codice è un pò diversa, se sei al primo approccio ti consiglio prima di lavorare su Wp che è molto semplice, qui https://codex.wordpress.org/ puoi trovare una miriade di esempi.

      Per Joomla ci sono delle guide ufficiali sul sito https://docs.joomla.org/Main_Page dove trovi anche deli esempi pratici.

      Diciamo che la logica di WP e Joomla è più o meno la stessa per quanto concerne lo sviluppo di template, scrivi il tuo HTML e poi richiami con jdoc per esempio i vari moduli o funzioni di Joomla.

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?