Guida Completa Creare Template Joomla

La Guida Definitiva per Creare un Template Joomla - Joo...

1 di 26

http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

Joomla Show

Chi Siamo Suggerire siti Farsi votare Forum Mappa del sito Joomlashow

Guide

La Guida Definitiva per Creare un Template Joomla

La Guida Definitiva per Creare un Template Joomla 12-10-2010 16:31 scritto da Federico Capoano

L'obiettivo di questa guida è quello di fornire una panoramica completa sul funzionamento dei template di Joomla 1.5: dalla struttura xhtml + css, passando per il file xml fino ad arrivare ai vari tipi di personalizzazioni e tecniche possibili. Svilupperemo inoltre un template che chiameremo "MioTemplate". Ovviamente "MioTemplate" è un nome di esempio e potete scegliere qualsiasi nome preferite.

Prerequisiti Per comprendere questa guida al 100% è necessario essere in possesso di alcune conoscenze (anche basiche) prerequisite, che sono: html/xhtml css php Se non conoscete neanche uno di questi linguaggi vi consiglio vivamente di studiare le basi di almeno due di essi. Se invece conoscete già almeno due dei linguaggi precedentemente elencati, potete provare a leggere questa guida ugualmente.

Sviluppare il template La conversione grafica da PNG/PSD (Adobe Fireworks o Adobe Photoshop) ad HTML/XHTML e CSS è fuori

07/08/2013 11:33

La Guida Definitiva per Creare un Template Joomla - Joo...

2 di 26

http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

dall'obiettivo di questa guida, dato che sarebbe necessaria un'intera guida a parte per spiegarne il processo. Per questo il template che svilupperemo avrà un aspetto molto semplice, sarà poi vostro compito mettere in pratica le tecniche per realizzare template più accattivanti integrando immagini di sfondo, tipografia e colori sgargianti. Un consiglio per chi vuole convertire un file PSD/PNG a template Joomla: convertite prima la grafica in semplice template xhtml e css e dopodichè convertite quest'ultimo a Joomla. Questo metodo è molto efficace e può essere utilizzato per qualsiasi CMS. Per aiutarvi a seguire la guida ho preparato un template "scheletro" che potete scaricare ed installare nel vostro Joomla. Notare che il template scheletro contiene gli override di YooTheme e lo script IE6 Warning, che fa apparire un messaggio di avviso agli utenti che utilizzano Internet Explorer 6, incoraggiandoli ad aggiornare il loro browser.

Panoramica del template: struttura dei file Una volta installato il template scheletro noterete che la maggiorparte dei file contenuti nell'archivio zip sono stati spostati dall'installer di Joomla nella cartella "/miotemplate" a sua volta contenuta nella cartella "/templates" e che solo contenenti le traduzioni sono stati spostati in altre cartelle. La struttura filesystem del template risulterà quindi la seguente: templates/ miotemplate/ css/ html/ images/ js/ component.php index.html index.php params.ini template_thumbnail.png templateDetails.xml language/ en-GB/ en-GB.tpl_miotemplate.ini it-IT/ it-IT.tpl_miotemplate.ini administrator/ language/ en-GB/ en-GB.tpl_miotemplate.ini it-IT/ it-IT.tpl_miotemplate.ini

Vediamo velocemente cosa rappresentano questi file e queste catelle.

css/ Questa cartella conterrà tutti i file css, ovvero i file in cui è contenuto il codice di presentazione, il layout, i colori e tutte le informazioni relative all'aspetto del template.

html/ La cartella "/html" è abbastanza importante in quanto conterrà tutti gli overrides del template, ovvero file php che dicono a Joomla che tipo di output html/xhtml utilizzare per le parti interne del template. Se non avete la più pallida idea di cosa sia un override e incontrate difficoltà nel capire questo concetto non preoccupatevi: spiegherò in dettaglio gli overrides più avanti nell'articolo.

07/08/2013 11:33

La Guida Definitiva per Creare un Template Joomla - Joo...

3 di 26

http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

images/ La cartella "images" conterrà tutte le immagini utilizzate dal template, quindi immagini di sfondo, il logo e così via.

js/ La cartella "js" conterrà eventuali file javascript del template, ovvero file che definiscono funzionalità aggiuntive del template. Ci tengo a definire che sono funzionalità aggiuntive: un buon template dovrebbe essere in grado di funzionare anche con javascript disabilitato.

component.php Questo è il template per la modalità popup, una versione ridotta del template che viene caricata in finestre popup, come ad esempio quando si clicca sul link "stampa" o "invia ad un amico".

index.html Questo è semplicemente un file vuoto che impedirà ad eventuali curiosi di vedere la lista dei file contenuti nella cartella del template.

index.php Questo è il file principale del template, che conterrà il codice PHP e la struttura html del template.

params.ini Questo file conterrà i valori di eventuali parametri utilizzati dal template. Spiegherò in dettaglio questo concetto più avanti nell'articolo. Assicuratevi che il file sia settato con permessi tale che Joomla possa sovrascriverlo.

template_thumbnail.png Questa è l'anteprima del template che viene mostrata in "Estensioni" > Gestione Template quando si passa il mouse sopra il nome del template. Le dimensioni consigliate sono 200 x 150 pixels.

I file di lingua I file "en-GB.tpl_miotemplate.ini" e "it-IT.tpl_miotemplate.ini" conterranno le traduzioni del template e sono contenuti in cartelle esterne a quella dei template, una relativa al backend ed una relativa al frontend. Questi file sono opzionali e la loro presenza dipende dalla necessità di avere un template multilingua o meno. Più avanti nella guida spiegherò in dettaglio il funzionamento di questi file.

templateDetails.xml Questo è il file d'installazione del template e contiene informazioni che vengono utilizzate da Joomla per installare, gestire e caricare il template. Un errata configurazione di questo file può portare a diversi problemi, tra i quali i più comuni sono: impossibilità di installare il template malfunzionamento nel caricamento delle posizioni malfunzionamento nella traduzione del template impossibilità di selezionare il template come predefinito nel backend di Joomla Al fine di evitare questi problemi comuni cercherò di spiegare velocemente a cosa servono i vari tag XML contenuti nel file templateDetails.xml, però prima occorre che prendiamo come riferimento quello contenuto nel template scheletro:

07/08/2013 11:33

La Guida Definitiva per Creare un Template Joomla - Joo...

4 di 26

http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

Mio Template October 2010 Federico Capoano [email protected] http://www.joomlashow.it/ Nemesis Design di Federico Capoano GNU/GPL 1.0 Template Scheletro Realizzato da Federico Capoano per index.html index.php params.ini templateDetails.xml template_thumbnail.png component.php html/ images/ css/ js/ en-GB.tpl_miotemplate.ini it-IT.tpl_miotemplate.ini en-GB.tpl_miotemplate.ini it-IT.tpl_miotemplate.ini navigation top right1 right2 breadcrumb homepage footer

Notare la sezione speciale CDATA che permette di inserire codice html nell'xml senza causare errori di parsing. questo tag indica all'installer di joomla 1.5 che il pacchetto è un template : nome del template : data creazione del template, appare nel backend : nome dell'autore del template : data creazione del template, appare nel backend : sito dell'autore, appare nel backend : detentore del copyright, tag opzionale : licenza con cui viene distribuito il template, tag opzionale : versione del template, appare nel backend : descrizione del template, appare al momento dell'installazione e nel backend : tag che raggruppa i tag e : questo tag indica all'installer di Joomla i file del template

07/08/2013 11:33

La Guida Definitiva per Creare un Template Joomla - Joo...

5 di 26

http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

: simile a file ma indica le cartelle invece dei file. Il tag folder è un modo veloce di includere molti file : parametri del template Riferimento: What is the purpose of the templateDetails.xml file? (in Inglese)

Completiamo il file index.php

Prima di andare avanti selezionate il template appena installato come predefinito andando in "Estensioni > Gestione Template" quindi selezionando "Mio Template" e cliccando sul pulsante "Predefinito" in alto a destra. Una volta fatto ciò aprite il file index.php del template con il vostro editor preferito, se non ne avete ancora uno vi consiglio Kommodo Edit (Windows / Linux / Mac), PsPad (Windows), BlueFish (Linux). Noterete che il file contiene già una quantità modesta di codice: la definizione della variabile _JEXEC, il DOCTYPE, l'inclusione dell'head di Joomla, il caricamento dei file CSS del template, il tag html, body e il javascript che carica lo script IE6 Warning. Aggiungiamo quindi dopo l'inizio del tag il codice seguente: