Guida Completa Creare Template Joomla

download Guida Completa Creare Template Joomla

of 26

  • date post

    30-Nov-2015
  • Category

    Documents

  • view

    31
  • download

    1

Embed Size (px)

description

guida completa come creare template per joomla con spiegazioni complete in merito

Transcript of Guida Completa Creare Template Joomla

  • Joomla Show

    Chi SiamoSuggerire sitiFarsi votareForumMappa del sito

    Joomlashow Guide La Guida Denitiva per Creare un Template Joomla

    La Guida Denitiva per Creare un Template Joomla12-10-2010 16:31scritto da Federico Capoano

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

    PrerequisitiPer comprendere questa guida al 100% necessario essere in possesso di alcune conoscenze (anche basiche)prerequisite, che sono:

    html/xhtmlcssphp

    Se non conoscete neanche uno di questi linguaggi vi consiglio vivamente di studiare le basi di almeno due diessi.Se invece conoscete gi almeno due dei linguaggi precedentemente elencati, potete provare a leggere questaguida ugualmente.

    Sviluppare il templateLa conversione graca da PNG/PSD (Adobe Fireworks o Adobe Photoshop) ad HTML/XHTML e CSS fuori

    La Guida Denitiva per Creare un Template Joomla - Joo... http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

    1 di 26 07/08/2013 11:33

  • 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 inpratica le tecniche per realizzare template pi accattivanti integrando immagini di sfondo, tipograa e colorisgargianti.Un consiglio per chi vuole convertire un le PSD/PNG a template Joomla: convertite prima la graca insemplice template xhtml e css e dopodich convertite quest'ultimo a Joomla. Questo metodo molto ecace epu essere utilizzato per qualsiasi CMS.Per aiutarvi a seguire la guida ho preparato un template "scheletro" che potete scaricare ed installare nelvostro Joomla.Notare che il template scheletro contiene gli override di YooTheme e lo script IE6 Warning, che fa apparire unmessaggio di avviso agli utenti che utilizzano Internet Explorer 6, incoraggiandoli ad aggiornare il loro browser.

    Panoramica del template: struttura dei leUna volta installato il template scheletro noterete che la maggiorparte dei le contenuti nell'archivio zip sonostati 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 lesystem 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 le e queste catelle.css/Questa cartella conterr tutti i le css, ovvero i le in cui contenuto il codice di presentazione, il layout, icolori e tutte le informazioni relative all'aspetto del template.html/La cartella "/html" abbastanza importante in quanto conterr tutti gli overrides del template, ovvero le phpche 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 dicolt nel capire questo concetto nonpreoccupatevi: spiegher in dettaglio gli overrides pi avanti nell'articolo.

    La Guida Denitiva per Creare un Template Joomla - Joo... http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

    2 di 26 07/08/2013 11:33

  • images/La cartella "images" conterr tutte le immagini utilizzate dal template, quindi immagini di sfondo, il logo e cosvia.js/La cartella "js" conterr eventuali le javascript del template, ovvero le che deniscono funzionalitaggiuntive del template. Ci tengo a denire che sono funzionalit aggiuntive: un buon template dovrebbeessere in grado di funzionare anche con javascript disabilitato.component.phpQuesto il template per la modalit popup, una versione ridotta del template che viene caricata in nestrepopup, come ad esempio quando si clicca sul link "stampa" o "invia ad un amico".index.htmlQuesto semplicemente un le vuoto che impedir ad eventuali curiosi di vedere la lista dei le contenuti nellacartella del template.index.phpQuesto il le principale del template, che conterr il codice PHP e la struttura html del template.params.iniQuesto le conterr i valori di eventuali parametri utilizzati dal template. Spiegher in dettaglio questoconcetto pi avanti nell'articolo.Assicuratevi che il le sia settato con permessi tale che Joomla possa sovrascriverlo.template_thumbnail.pngQuesta l'anteprima del template che viene mostrata in "Estensioni" > Gestione Template quando si passa ilmouse sopra il nome del template. Le dimensioni consigliate sono 200 x 150 pixels.I le di linguaI le "en-GB.tpl_miotemplate.ini" e "it-IT.tpl_miotemplate.ini" conterranno le traduzioni del template esono contenuti in cartelle esterne a quella dei template, una relativa al backend ed una relativa al frontend.Questi le 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 le.templateDetails.xmlQuesto il le d'installazione del template e contiene informazioni che vengono utilizzate da Joomla perinstallare, gestire e caricare il template.Un errata congurazione di questo le pu portare a diversi problemi, tra i quali i pi comuni sono:

    impossibilit di installare il templatemalfunzionamento nel caricamento delle posizionimalfunzionamento nella traduzione del templateimpossibilit di selezionare il template come predenito nel backend di Joomla

    Al ne di evitare questi problemi comuni cercher di spiegare velocemente a cosa servono i vari tag XMLcontenuti nel le templateDetails.xml, per prima occorre che prendiamo come riferimento quello contenutonel template scheletro:

    La Guida Denitiva per Creare un Template Joomla - Joo... http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

    3 di 26 07/08/2013 11:33

  • Mio Template October 2010 Federico Capoano contact@joomlashow.it 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 le del template

    La Guida Denitiva per Creare un Template Joomla - Joo... http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

    4 di 26 07/08/2013 11:33

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

    Completiamo il le index.php

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

  • Contenuto Principale

    Sei qui:

    Ricerca / Colonna destra

    Testo footer

    Questo codice contiene gi diverse informazioni. Come potete vedere la struttura html abbastanza semplice:c' un container (contenitore) che contiene a sua volta i tag (testa), body (corpo) e foot (piede). Il body a sua volta contiene main (principale) e side (lato).Ogni div contiene i tag di Joomla , che servono a caricare i componenti e i moduli di Joomlanelle rispettive posizioni utilizzate (per maggiori informazioni vedere "Direttive Jdoc" pi avanti nella guida).Il codice fa anche uso di una tecnica conosciuta come "skip navigation links", descritti da me nell'articoloappena linkato.

    Completiamo il CSSSalvato il le index.php e provate ad aggiornare l'homepage del vostro sito Joomla: noterete che il contenuto disposto in righe e che la colonna destra ancora non esiste.

    La Guida Denitiva per Creare un Template Joomla - Joo... http://www.joomlashow.it/guide/sviluppo-estensioni/la-gu...

    6 di 26 07/08/2013 11:33

  • Come possiamo cambiare il layout del template?