Personalizzare il template di Joomla! dal file params.ini

Se avessimo voluto creare, per esempio, un template con differenti colori di background o colori di testo, modificabili dall'Amministratore, avremmo dovuto creare un certo numero di templates per poi assegnarne ognuno ad una specifica voce di menu. Nulla di trascendentale, ovvio, ma non molto comodo in fase di progettazione. Apportare una modifica ad "n" templates non è come lavorare solo su uno.

Quanto appena accennato, per fortuna, è stato superato con la release 1.5.x di Joomla! il quale prevede la possibilità di ricorrere all'utilizzo ed implementazione dei parametri. Imparare a capirli ed utilizzarli, li si potrebbe paragonare a delle vere e proprie estensioni alla pari di Componenti, Moduli, Plugins.

Nel seguente tutorial vedremo come creare i parametri per poter cambiare il colore di background ad un template di Joomla!

Per poter apprezzare un'anteprima dei parametri applicati ad un template, portarsi nel pannello di amministrazione e poi su Estensioni → Gestione template e passare il mouse su JA_Purity; apparirà una miniatura del template uguale alla figura riportata di seguito:

Tale immagine mostra la possibilità di conferire allo stesso template colori di sfondo, header grafiche ecc, differenti. Se volessimo renderci conto meglio su come poter interagire con i parametri, sempre nella stessa schermata si prema il pulsante "Modifica".

Nella parte destra - Parametri - troviamo alcuni menu a tendina attraverso i quali è possibile scegliere il logo, il testo da associare al logo, lo slogan ecc... La  screenshot riporta quanto appena scritto:

Impostare i parametri nel file templateDetails.xml

Come scritto all'inizio, proveremo a creare i parametri per poter cambiare colore di sfondo dal lato Amministrativo. Per fare questo, si apra con un editor di testo il file templateDetails.xml, situato nella cartella del template attualmente attivo. Si scorra verso il basso e si individui il tag </install>. Prima della chiusura di tale tag si scriva:

<params>
............
............
</params>

Al posto dei puntini premere qualche volta il tasto INVIO per fare in modo da dare qualche spazio tra l'apertura e la chiusura dei tag. Tra <params> e </params> scriveremo:

<param name="backgroundVariation" type="list" default="bianco" label="Background Variation" description="">
    <option value="blue">Bianco</option>
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="black">Black</option>
</param>

In questo caso è stato  stabilito il solo parametro per il cambio del colore di sfondo; se avessimo voluto aggiungerne qualche altro inerente altre impostazioni, avremmo dovuto scrivere ancora i due tag <param> e </param> e passare i relativi argomenti.

Un parametro, come  si può vedere da quanto scritto nel codice, ha degli argomenti, alcuni obbligatori ed altri opzionali. Quelli obbligatori sono:

• name: rappresenta il nome univo del parametro. Ci si deve riferire ad esso quando si vorrà recuperare il suo valore nel codice del template;
• type: indica il tipo di modulo HTML utilizzato nei Parametri (colonna destra) del template, lato backend, per consentire all'amministratore di modificare i valori;
• default: il valore predefinito del parametro;
• label: come per un campo di testo di un form, altro non è che l'etichetta descrittiva che precede il campo nel pannello dei parametri;
• description: è la descrizione, vale a dire il testo che viene visualizzato nel pannello di backend.

Il codice scritto tra i tag <param> e </param> produce, una volta uplodato in remoto, una serie di parametri, riportati nell'immagine seguente:

Come si può vedere, adesso appare tutto quanto scritto nel file templateDetails.xml; le 4 opzioni dei colori sono state "tradotte" in una select.

Memorizzare i valori dei parametri nel file params.ini

Affinchè tutti i valori impostati nel file templateDetails.xml producano l'effetto desiderato, è necessario creare file params.ini. Tale file lo si deve uplodare via FTP nella cartella del template attivo:

Root-Joomla/templates/Mio_Template/params.ini

Solitamente il file params.ini lo si inserisce nella cartella del template in fase di creazione dello stesso. L'installer di Joomla! farà in modo che il file params.ini abbia tutti i permessi in lettura e scrittura appropriati.

Nel nostro caso, invece, ne creeremo uno ex-novo; i passagi da seguire sono i seguenti:

1. creare un file vuoto ed assegnargli il nome params.ini;
2. aprire il file e scrivere:  backgroundVariation=bianco;
3. uplodare il file via FTP nella cartella del template;

Creare i files CSS per i colori di background

Giusti a questo punto, dobbiamo creare tanti files .css per quante combinazioni di colori di sfondo desideriamo avere nel pannello di amministrazione, e quindi nel frontend. Riporto solo il codice di un file .css in quanto quello che cambierà sarà solo il colore esadecimale. Per quanto riguarda il colore di background rosso, scriveremo:

#page_bg {background: #f00;} 

Salviamo il file con il nome: red_bg.css. Alla stessa maniera creeremo gli altri 3 files con lo stesso ID (#page_bg) e colore differente.

Recuperare i valori dei parametri nel file index.php del template

Dopo aver definito i parametri nel file templateDetails.xml e creato il valore nel file params.ini, non ci resta che richiamarli nel template e quindi nel file index.php.

A tal proposito si apra il file index.php e nella header, anche subito dopo il link al file css di tutto il sito, scriveremo:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('backgroundVariation'); ?>_bg.css" type="text/css" /> 

E' un semnplicissimo link al file css ma, come si può vedere, richiama il nome del parametro - backgroundVariation - appena scritto nel file params.ini.

Questo da solo non basta per avere il cambio dei colori di sfondo; il tag di apertura <body> diventerà:

<body id="page_bg" class="bg_<?php echo $this->params->get('backgroundVariation'); ?>"> 

id="page_bg" è l'ID che abbiamo scritto nel file red_bg.css e possiamo vedere anche qui il recupero dei parametri attarverso il codice $this->params->get('backgroundVariation')

Salvare il file ed uplodarlo nella cartella del template attivo. Entrare nell'area di amministrazione e portarsi in Estensioni → Gestione Template; selezionare il template dal radiobutton e premere il pulsante  Modifica, in alto a destra. Se vediamo che tutti im parametri creati ed impostati sono visibili nella select, allora vuol dire che sono andati a buon fine tutti questi passaggi.

Good luck con i parametri.