Dopo esserci addentrati nel mondo Joomla! ed aver mosso i primi passi attraverso gli articoli trattati, vediamo come questo CMS "ragiona" in fatto di disposizione dei blocchi e posizionamento dei moduli, all'interno del sito web.
Quello che vedremo appartiene al 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 sito web. Prima di procedere, si prenda in esame la figura posta immediatamente sotto la fine del presente paragrafo. E' una immagine che raffigura, appunto, un layout a 2 colonne più una header ed un footer.
Immaginando che un layout simile costituisca il nostro sito realizzato con Joomla!, tale visualizzazione con i blocchi modulo la possiamo vedere, lato back end, attraverso il seguente percorso: Estensioni ⇒ Templates ⇒ Opzioni
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 modulo" è 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 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 stabilita l'impostazione del sito, 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 personalizzati". 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.
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?
<jdoc:include type="modules" name="banner" style="none" />
Questo è tutto quello che ci serve. Dal back end di Joomla!, dalla voce di menu Estensioni » Moduli 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"> <jdoc:include type="modules" name="banner" style="none" /> </div>
Dopo aver salvato la pagina, i banner sarebbero stati visualizzati 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"> <jdoc:include type="modules" name="banner" style="none" /> <jdoc:include type="modules" name="top" style="xhtml" /> </div> <div id="left"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> <div id="content"> <jdoc:include type="component" /> <jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <div id="footer">
<jdoc:include type="modules" name="bottom" style="xhtml" /> </div>
</div>
Il listato di codice appena scritto richiama 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, abbiamo 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, affinchè tutto funzioni a dovere, è quella rappresentata dai contenuti veri e propri del sito. Notizie, articoli, testi e quant'altro, dove e come vengono 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:
<jdoc:include type="component" />
Lo snippet type="component" comunica a Joomla! che deve inserire in quella zona tutti i contenuti esistenti nelle tabelle del Database. E' questa la parte importante del sito. Anche queste righe che stai leggendo, se non ci fosse stato il type="component", non avresti visto nulla. Sarebbe apparsa la pagina bianca.
Nel listato di codice, l'ho messo nel div id="content", prima dei 3 blocchi modulo. Avrei potuto mettere prima i 3 blocchi e dopo il type="component" e 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 ben presente, è la seguente: NON SI POSSONO INCLUDERE MODULI, ALL'INTERNO DEL type="component".
Questa è la regola generale ma, con qualche "trucchetto" è un'operazione fattibile. Questa cosa verrà trattata in un altro articolo.
Vediamo adesso come è composta una pagina index.php completa per Joomla!, partendo dall'esempio riportato in figura.
<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
<div class="contenitore">
<div id="header">
<jdoc:include type="modules" name="banner" style="none" />
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="content">
<jdoc:include type="component" />
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div id="footer">
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</div>
</body>
</html>
Il file templateDetails.xml
Il file templateDetails.xml contiene tutta una serie di informazioni relative a:
- nome del template
- versione del template
- data di creazione
- nome autore
- copyright
- eventuali cartelle contenenti files
- singoli files presenti nella cartella del template
- nome posizioni dei moduli
Un esempio del file templateDetails.xml potrebbe essere:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd"> <extension version="3.1" type="template" client="site"> <name>TW3</name> <files> <folder>css/</folder> <filename>index.php</filename> </files> <positions> <position>position1</position> ........... </positions> </extension>
Con queste informazioni base 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.