Pagine

Cerca nel blog

Caricamento in corso...

martedì 20 gennaio 2009

Come fare un template per Joomla!




Esistono diversi modi per creare un template per Joomla! Possiamo usare dei software come NVU (vedi http://www.sanavia.it/nvuitalia/) e scaricarsi l'estensione per creare siti Joomla! che potete trovare qui oppure.. convertire un vecchio html...!

Come convertire un template statico
Creiamo una cartella, e la nominiamo con il nome che vogliamo dare al template.
All'interno di questa mettiamo:
1 cartella "css" dove metteremo il nostro style.css
1 cartella "html" dove metteremo il nostro file index.html
1 cartella "images" per tutte le immagini del template
1 file chiamato "index.php" che sarà il nostro html convertito con codice php
1 file "favicon.ico" che sarà l'icona del sito, in alto nella barra dei contatti.
1 file chiamato "templateDetails.xml" dove metteremo i seguenti parametri: (ps: metto più spazi tra < e > perchè altrimenti blogger non me li pubblica, state dunque attenti se copiate e incollate)


< ?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>Nome del template< /name >
< creationDate>data di creazione< /creationDate >
< author >Nome autore< /author >
< authorEmail>email@autore< /authorEmail >
< authorUrl >sito autore< /authorUrl >
< copyright >< /copyright >
< license >GNU/GPL< /license >
< version >1.0.0< /version >
< description >template for Joomla 1.5< /description>

< files >
< filename>index.html< /filename >
< filename>index.php< /filename >
< filename>templateDetails.xml< /filename >
< filename>favicon.ico< /filename >
< filename>component.php< /filename >
< filename>images/tutta la lista delle immagini< /filename >
< filename>images/tutta la lista dei file< /filename >
< /files >

< positions >
< position >left< /position >
< position >right< /position >
< position >top< /position >
< position >breadcrumb < /position>
< position >user1< /position >
< position >user2< /position >
< position >user3< /position >
< position >user4< /position >
< position >debug< /position >
< position >syndicate< /position >
< /positions >

< params >
< /params >
< /install >



Come rendere i tag html dinamici?
Includendo i moduli joomla!

Prendiamo il nostro file html e convertiamolo in index.php, sia salvandolo con questo nome, sia inserendo l'indestazione come segue:



< ?php echo '< ?xml version="1.0" encoding="utf-8"?'.'>'; ?>
< !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; ? >" dir="< ?php echo $this->direction; ? > " >



< head >
< jdoc:include type="head" / >
< link rel="stylesheet" href="baseurl ?>/templates/cartella con il nome del template/css/style.css" type="text/css" />
< /head >
< body >
< /body >
< /html >




Negli spazi che ci servono, rispetto al nostro template in codice html, inseriamo poi i richiami dei diversi moduli Joomla! Ad esempio, se vogliamo mettere in un td di una nostra tabella il riferimeno alla colonna sinistra metteremo dentro il < TD >:



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


Questo div includerà i moduli ai quali assegneremo la posizione a sinistra.

Cosi via inseriamo poi i collegamenti tutti i moduli nei posti dove vogliamo:


name="top"
name="breadcrumb"
name="user1"
name="user2"
name="user3"
name="user4"
name="right"
name="left"
name="syndicate"
name="debug"

Fatto questo non ci resta che uplodare la nostra cartella sotto la cartella "joomla" --> "template" e provare l'effetto che fa. Per vedere se abbiamo fatto tutto nel modo corretto, prima inseriamo dei contenuti, il modulo menu, cerca ecc. e poi cambiamo l'aspetto sostituendo il nostro template. Una volta agganciato poi si può perfezionare andando ad agire su html e css.
Sembra facile? beh non esattamente, Joomla! è una piattaforma opensource molto potente, ma sicuramente non facilissima a primo sguardo, occorre mettersi d'impegno e dedicarci un bel pò di tempo per creare template e siti belli e funzionali.

Per altre informazioni: http://www.joomla.it/

7 commenti:

  1. Ciao Spettinata,

    vorrei sapere come si installa l'estensione per NUV per creare template per JOOMLA.

    Grazie

    RispondiElimina
  2. Vai al seguente indirizzo:

    http://www.joomlafrance.org/telecharger/startdown/NVU_Template_Builder.html

    da qui scarichi il file da caricare su NVU, o meglio KompoZer

    ps: NVU è nei repo di Debian, col nome KompoZer ( NVU è "morto" -> KompoZer ha ripreso il progetto )

    RispondiElimina
  3. Ciao! volevo complimentarmi con te...è da secoli che cerco il sistema per creare dei template in joomla =) senti ma cosa significa:

    < filename>images/tutta la lista delle immagini< /filename >

    cosa devo inserire?

    e sul file: templateDetails.xml
    nella riga:

    < position >breadcrumb

    non va chiuso il tag position?



    grazie davvero.
    se ho dei problemi tornerò a romperti =)

    buona serata

    RispondiElimina
  4. ciao enrico, si hai ragione mi sono dimenticata di chiudere il tag position

    < position > breadcrumb < /position >

    :) grazie per la segnalazione, editerò il post in modo che rimanga giusto:D

    il filename è il tag che racchiude tutte le immagini che vengono utilizzate nel template, in modo che siano in chiaro in templateDetails.xml
    li ad esempio puoi mettere

    < filename >images/header.jpg< /filename >
    < filename >images/sfondo.jpg< /filename >
    < filename >images/menu.jpg< /filename >

    ecc.. ecc..
    non essenziale come definire position ma per correttezza è uso metterlo in chiaro.

    Spero di esserti stata d'aiuto! :D

    RispondiElimina
  5. sei stata d'immenso aiuto...grazie di cuore =) devo ancora testare il tutto...grazie davvero =)

    RispondiElimina
  6. enrico.. oltre che spettinata mi fai venire tutta rossa! grazie per i complimenti, nello spirito dell'opensource spero di averti dato le informazioni che cercavi!

    RispondiElimina
  7. Cavoli!

    Io adoro Kompozer/NVU... tutti i miei siti sono stati creati con lui!

    Questaè una bellissima notizia!!!

    Se ti và passa a trovarmi sul mio blog
    http://blogs.dotnethell.it/glmITALY/

    Me la cavo meglio con la sistemistica e Windows :)

    RispondiElimina

LinkWithin

Related Posts Plugin for WordPress, Blogger...