Il layout di Joomla!

Tutto questo fa parte del layout di Joomla! ed in questo articolo si vedrà come implementare una serie di moduli in un layout che potrebbe essere una ipotetica base di partenza per un nostro sito. Prima di procedere, si prenda in esame la figura posta immediatamente sotto la fine del seguente paragrafo. E' una immagine che raffigura, appunto, un layout a 2 colonne più una header ed un footer.

Esempio layout a 2 colonne di Joomla!
Esempio layout Joomla! a 2 colonne

Immaginando che un layout simile costituisca il nostro template per Joomla!, tale visualizzazione con i blocchi modulo la possiamo vedere, lato back end, attraverso il seguente percorso: SITO » ANTEPRIMA » SITO NEL PANNELLO DI CONTROLLO CON POSIZIONE BLOCCHI MODULO.

Tale visualizzazione ci permette di avere sotto controllo le "zone di pubblicazione" dei blocchi modulo, che abbiamo a disposizione per il template in uso. Nell'esempio ho voluto proporre uno schema di layout molto semplice ma, grazie alla elasticità di Joomla!, possiamo ottenere dei risultati molto più complessi.

Una "posizione blocco" altro non è che un segnaposto grazie al quale possiamo visualizzare tutto quello di cui abbiamo bisogno  in una determinata parte della pagina web. Non ci si confonda, cosa che succede abbastanza spesso, tra gli ID assegnati alle diverse parti del layout realizzato con i CSS e gli stessi nomi dati alle posizioni dei blocchi. Tornando alla figura del template, ho nominato con un <div id="header"></div> la testata, all'interno della quale metteremo, per il nostro esempio, 2 posizioni modulo le quali conterranno, a loro volta, i moduli di Joomla!. La cosa potrebbe sembrare un pò contorta ma, una volta capito tale meccanismo, ci si renderà conto che è più semplice di quanto si possa credere. Ricapitolando:

nel DIV, o nella cella di tabella, abbiamo il segnaposto (la posizione del blocco modulo); nella posizione del blocco modulo richiameremo il modulo vero e proprio di Joomla! attraverso un codice che viene definito snippet ed è formato da codice php.

Richiamare un modulo nel layout di Joomla!

Una volta stabilito il layout che il sito deve avere, nell'esempio a 2 colonne, non rimane altro da fare che richiamare, tramite codice php, i blocchi modulo. Se si osserva l'immagine, notiamo che nella testata sono stati inseriti 2 blocchi modulo; (i nomi sono già assegnati di default da Joomla!).

Molti di questi si spiegano da soli (vedi banner, top, left, bottom, footer ecc...). Altri, come ad esempio, user 1, user 2 ecc... potremmo definirli come "nomi a caso". Effettivamente un modulo che si chiama user 1 potrebbe non avere una spiegazione logica ma, quello che a noi interessa, è che possiamo utilizzarne quanti ne vogliamo in un sito (Joomla! dispone di 26 blocchi modulo) e, addirittura, crearne degli altri con nomi scelti liberamente da noi.

Vogliamo, per esempio, visualizzare un circuito banner. Dove? Abbiamo scelto di visualizzarlo nella testata. Quale codice viene in nostro aiuto per poter visualizzare un banner?

<?php mosLoadModules('banner'); ?>

Questo è tutto quello che ci serve! Dal back end di Joomla!, dalla voce di menu Moduli » Moduli sito sceglieremo proprio la posizione banner per vedere il circuito nel sito. Quello che si deve capire è che il nome di un blocco modulo non è vincolante nè per quello che deve mostrare a video nè per la sua posizione. Avremmo potuto scegliere di visualizzare un modulo, nel nostro caso sempre banner, anche nel footer, o nella colonna sinistra o immediatamente prima dei contenuti veri e propri. Esempio: se avessimo voluto mettere il modulo banner nel footer avremmo scritto, nella pagina index.php, il seguente codice:

<div id="footer">
<?php mosLoadModules('banner'); ?>
</div>

Dopo aver salvato la pagina, i banner sarebbero stati stampati a video proprio nella parte inferiore del layout. Capito questo concetto, procediamo con il completamento del richiamo degli altri blocchi modulo. Prendiamo in esame la pagina completa del codice html e php, come se volessimo trasformare per intero il layout grafico.

<div class="contenitore">
<div id="header">
<?php mosLoadModules('banner'); ?>
<?php mosLoadModules('top'); ?>
</div>
<div id="left">
<?php mosLoadModules('left'); ?>
</div>
<div id="content">
<?php mosMainBody(); ?>
<?php mosLoadModules('user1'); ?>
<?php mosLoadModules('user2'); ?>
<?php mosLoadModules('user3'); ?>
</div>
<div id="footer">
<?php mosLoadModules('bottom'); ?>
</div>
</div>

Il listato di codice appena scritto non fa altro che richiamare tutti i blocchi modulo all'interno della pagina index.php, quando verrà visualizzata tramite browser. Non è detto che tutti i moduli debbano essere necessariamente utilizzati. A seconda del layout da realizzare, si tende a mettere i blocchi modulo dove servono. Di contro, se i blocchi modulo rimanessero "vuoti", nella zona in cui sono stati "prenotati", non apparirebbe nulla.

Esempio: se ci rendiamo conto che non tutti e 3 i blocchi modulo "user1", "user2" e "user3" devono ospitare al loro interno moduli proprietari di Joomla!, o di terze parti, non succede nulla in quanto in quella zona non vedremmo niente ma, se dovesse essere necessario, abiamo già pronto il segnaposto, all'occorrenza.

Ecco l'elasticità di cui gode Joomla! e che ho menzionato precedentemente: assegnare ad una zona il blocco modulo ed eventualmente occuparlo con il modulo vero e proprio.

Richiamare i contenuti nella pagina

Una parte molto importante, direi cruciale, affinchè tutto funzioni a dovere è quella rappresentata dai contenuti veri e propri del sito. Notizie, articoli, testi e quant'altro, dove verranno visualizzati? Tenendo come riferimento il layout a 2 colonne dell'immagine, i contenuti non potremmo che metterli nella colonna destra; ma come richiamarli? Per quanto riguarda questa parte, non ci si affida al codice visto prima per richiamare i moduli bensì al seguente:

<?php mosMainBody(); ?>

Il mosMainBody() comunica a Joomla! che deve inserire in quella zona tutti i contenuti esistenti nelle tabelle del Database. E' questa la parte cruciale del sito. Anche queste righe che state leggendo, se non ci fosse stato il MainBody, non sarebbe stato possibile richiamarlo, nè visualizzarlo. Nel listato di codice, l'ho messo nel <div id="content"></div>, prima dei 3 blocchi modulo. Avrei potuto mettere prima i 3 blocchi e dopo il MainBody; non sarebbe successo nulla. Possiamo giostrare come vogliamo. Joomla! ci lascia completamente liberi da questo punto di vista. Una cosa molto molto importante, da tenere a mente, è la seguente: NON SI POSSONO INCLUDERE MODULI, ALL'INTERNO DEL MainBody.

Questa è la regola generale ma... si possono trovare dei sotterfugi per fare in modo da visualizzare un modulo all'interno dei contenuti. E' una operazione, questa, che non va fatta nel file index.php, bensì nel back end; ma di questa cosa ce ne occuperemo in seguito. Per il momento ci basti sapere che, con quanto detto fin qui, saremmo pronti a scrivere una pagina, index.php, che potrebbe essere lontana parente di una pagina completa e perfettamente funzionante.

Se facessimo la prova ad inserire il codice presentato prima in un file index.php, non si otterrebbe nessun risultato utile anzi, molto probabilmente, riceveremmo un messaggio di errore se richiamassimo la pagina dal browser. Vedremo adesso cosa scrivere esattamente in una pagina .php, affinche il nostro layout prenda "corpo" se volessimo utilizzarlo per un template di test.

Codice completo per la pagina index.php del template di Joomla!

Affinchè Joomla! funzioni correttamente, c'è bisogno di inserire la giusta sintassi in fase di compilazione del template. Vediamo i vari passaggi. Cominciamo dal codice che viene messo prima del !DOCTYPE:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO $iso = split( '=', _ISO ); ?>
<!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="it" lang="it" dir="ltr">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor(); }
?>

Proseguiamo adesso, con i normali tag Meta:

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="shortcut icon" href="/<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
<link href="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

A questo punto verrà introdotto, tra i tag <body> e </body>, tutto il codice misto tra html e php.

<div class="contenitore"> <div id="header"> <?php mosLoadModules('banner'); ?> <?php mosLoadModules('top'); ?> </div>      <div id="left">     <?php mosLoadModules('left'); ?>     </div>      <div id="content">     <?php mosMainBody(); ?>     <?php mosLoadModules('user1'); ?>     <?php mosLoadModules('user2'); ?>     <?php mosLoadModules('user3'); ?>     </div>      <div id="footer">     <?php mosLoadModules('bottom'); ?>     </div>      </div>     </body>     </html> 

Tutto questo codice riguarda soltanto la pagina index.php. Proseguiamo adesso nell'analisi del file templateDetails.xml il quale contiene, come visto nella presentazione del template di Joomla!, tutta quella serie di informazioni relative alla installazione, email autore, url del sito autore.... Ma nello specifico contiene il nome dei files grafici, del file css ed altro, utilizzati nel template di produzione.

Il file templateDetails.xml

Il file templateDetails.xml altro non contiene che le informazioni di installazione esatte affinchè il template possa funzionare correttamente. In cosa consistono tali informazioni? Email ed url sito autore, nella parte iniziale; percorso dei file per il reperimento degli stessi durante la installazione del template. Di seguito il file completo.

<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.0.0">     <name>Test Demo</name>     <creationDate>15/03/2008</creationDate>     <author>Nome Autore</author>     <copyright>GNU/GPL</copyright>     <authorEmail>info @ admin.com</authorEmail>     <authorUrl>http://www.nomesito.com</authorUrl>     <version>1.0</version>     <description>Breve descrizione</description>          <files>         <filename>index.php</filename>         <filename>template_thumbnail.png</filename>         </files>      <css>         <filename>css/template_css.css</filename>     </css>      <images>         <filename>images/logo.png</filename>     </images> </mosinstall> 

Con queste informazioni a disposizione, siamo in grado di affrontare i primi sviluppi di un template. Ovviamente risorse in rete abbondano ed è possibile fare un confronto tra le diverse metodiche di realizzazione del template stesso.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati