ZOD - Adattare un template HTML a Joomla 1.5

Home

Ricerche sviluppo

Adattare un template HTML a Joomla 1.5

Menu Lab

Donazione Paypal

Hei! Hai trovato qualcosa di utile nel mio sito?

Siti realizzati...

RSS Feeds

Adattare un template HTML a Joomla 1.5

lunedì 14 luglio 2008

In un articolo precedente ho parlato di come adattare un template html a Joomla! E ha riscosso un notevole successo.
Però era un tutorial per Joomla nella versione 1.0, oggi voglio esaminare la versione 1.5 che ha delle differenze.

Cosa è cambiato in Joomla 1.5? posso ancora fare il template alla maniera 1.0?
No! A dire il vero non è più possibile, nella versione 1.5 i concetti fondamentali sono gli stessi ma il codice da inserire nei template è totalmente cambiato.

Questa volta non mi soffermerò a spiegare tutto dettagliatamente, non voglio ripetermi quindi se volete capire velocemente la logica di Joomla, leggete il precedente articolo che va bene lo stesso.

Di seguito invece evidenzierò le cose cambiate in Joomla 1.5, che sono solo a livello codice della "index.php". Procedo a compilare il codice partendo da un ipotetico template html.
Uno per seguirmi deve già avere in mente: 1. la struttura html di una pagina. 2. come funziona Joomla e di cosa sto parlando.

Partendo dall'inizio della pagina html, prima del doctype inserire questo codice:

<?php

// no direct access

defined( '_JEXEC' ) or die( 'Restricted access' );



$tplurl = $this->baseurl . "/templates/template_marta/";



?>

da notare che ho inserito la variabile $tplurl, questa è una mia personalizzazione, e contiene il path al template, nel caso specifico si chiama "template_marta". Ma voi potete modificare per il vostro template.
Questa variabile sarà utile in seguito quando dobbiamo inserire immagini o file che risiedono nella folder del template.

Ecco ora come si presenta il doctype e il tag html, evidenzio in giallo le aggiunte tipiche di Joomla.


<!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; ?>" >

Nel tag head inserire subito questo codice che inserisce il title, i meta, e varie cose di Joomla.


<jdoc:include type="head" />

Dopo di questo continuate con gli stili css, javascript e roba che va in head del vostro template, li includete usando la variabile $tplurl che ho menzionato poco fa, evidenzio in giallo.


<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />


<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />



<link href="<?php echo $tplurl ?>css/screen.css" type="text/css" media="screen" rel="stylesheet" />

<link href="<?php echo $tplurl ?>css/print.css" type="text/css" media="print" rel="stylesheet" />

<!--[if lte IE 6]>

<link href="<?php echo $tplurl ?>css/ie6.css" type="text/css" media="screen" rel="stylesheet" />

<![endif]-->



<script type="text/javascript" src="<?php echo $tplurl ?>js/swfobject.js"></script>

<script type="text/javascript" src="<?php echo $tplurl ?>js/checkform.js"></script>

Da notare le prime due inclusioni di css che ho evidenziato in rosa, non sono del mio template ma sono tipiche di Joomla e arrivano da "system/css/". Joomla 1.5 a quanto pare abbisogna di quei due stili "system.css" e "general.css". Ricordarsi di inserirli. Si chiude il tag head.

Poi, body, ovviamente come abbiamo visto le inclusioni di js e css, includiamo anche le immagini alla stessa maniera:

<img id="logo" src="<?php echo $tplurl ?>img/logo.png" alt="Immobiliare Marta" />
Per inserire il contenuto centrale, inserire il seguente codice.


<jdoc:include type="component" />

Il pathway? beh quello non esiste più, o meglio è diventato un normale modulo quindi va inserito come i moduli, di default lo mettono nella posizione "breadcrumb".

Per inserire i moduli il codice è diventato questo:

<?php if($this->countModules('left')) : ?>

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

<?php endif; ?>

Come ho spiegato nell'articolo precedente, abbiamo aggiunto un piccolo controllo "if" per inserire i moduli solo se abbiamo configurato la loro visibiltà per la pagina aperta.

Come per Joomla 1.0 notiamo che si usa chiamare la posizione, nell'esempio chiamiamo i moduli di "left". E per stilizzare c'è un attributo style.

Abbiamo 5 scelte per style:

table: il default se nulla è specificato. Racchiude tutto in una tabella che fa da wrapper ai moduli (non chiedetemi perchè usare tabella di default, lo so che fa schifo...).
horiz: ancora una tabella, e mostra i moduli in modo orizzontale.
xhtml: un singolo div fa da wrapper ai moduli.
rounded: significa che 4 div fanno da wrapper ai moduli, così uno potrebbe usarli per fare i rounded corners (non mi piace, tutti sti div nel codice!! jquery per i rounded corner suona meglio, oppure altre soluzioni con meno div).
raw: nessun wrap, solo output dei moduli.

Raw è il mio preferito, controllo io sul mio template come vanno fatti i div, e non Joomla. Gli altri che aggiungono div o tabelle li vedo abbastanza inutili.

Ad ogni modo è bello ricordare che ci sono le opzioni xhtml e rounded, magari in un caso su cento tornano utili.

E con questo è tutto, ora potete fare anche Templates Joomla 1.5!

Aggiungi ai preferiti (190) | Visualizzazioni: 12528

Commenti (2)

1. 27-01-2009 20:08

Problema con i rollover

Ma i rollover fatti con dreamweaver non funzionano, il js te lo mettono nella pagina, devo fare un file esterno per forza? Sei un grande. Erano secoli che cercavo un sistema dinamico agile da applicare ai vecchi html. Questo articolo mi è stato davvero prezioso.

grazie davvero
buona serata

http://www.enricocarli.altervista.org

Ospite

Indirizzo e-mail protetto dal bots spam , deve abilitare Javascript per vederlo

2. 06-02-2009 11:21

Grande!

Stavo cercando proprio una guida sui template di joomla per cominciare a liberarmi di quelli fatti dagli altri...e finalmente costruire un sito dalle mie idee e non modificando quelle altrui.

Grazie!

http://www.spektra-design.it

Ospite

Indirizzo e-mail protetto dal bots spam , deve abilitare Javascript per vederlo

Scrivi Commento

Si prega di inserire commenti riguardanti l'articolo. Commenti ritenuti offensivi verranno eliminati. E' severamente vietato qualsiasi tipo di spam. Cose del genere verranno cancellate. Assicurati di aggiornare(refresh) la pagina per visualizzare un nuovo codice. Ovviamente questo accade se hai inserito il codice errato.
Nome:
E-mail
Sito web
Titolo:
Commento:
Codice:*

< Prec.		Pros. >