Personalizzare il template Joomla! dal file params.ini

Personalizzare il template Joomla! dal file params.ini
Personalizzare il template Joomla! dal file params.ini

I valori di un template di Joomla! sono memorizzati nel file params.ini. Esso si deve trovare nella cartella principale del template in uso. Attraverso questo file si possono impostare delle configurazioni differenti, gestibili dall'area amministrativa di Joomla! Vediamo come fare.

Il file params.ini

Il file params.ini contiene, come detto nella intro, tutta una serie di informazioni che entrano in gioco quando si vogliono apportare modifiche di dimensioni, colori e tanto altro, al template Joomla! Va detto che tali modifiche vanno impostate dal pannello di amministrazione e non lato visitatore.

Se volessimo creare un template con differenti colori di background per la pagina oppure differenti colori di sfondo per la header, dovremmo creare da zero tanti templates per ogni colore desiderato. Si evince che il lavoro diventerebbe dispendioso per tutto il tempo che richiederebbe. Invece possiamo avere quanto scritto lavorando su un solo file.

Quanto appena accennato, per fortuna, non richiede molto lavoro perchè possiamo avere la possibilità di utilizzare ed implementare i "parametri" di Joomla!.

Nell'articolo odierno vedremo come creare i parametri per poter cambiare il colore di background ad un template di Joomla!

Per avere un'idea di cosa sono i parametri, portarsi in amministrazione e premere la voce di menu, in alto, EstensioniTemplateStili.

Estensioni template Joomla!
Estensioni template Joomla!

Premere quest'ultima voce per visualizzare la lista dei templates installati. Si deve entrare in Modifica Stile del template, premendo su uno dei nomi presenti. Per esempio, clicchiamo sul template "Protostar".

Al di sotto del nome dello stile, ci sono 3 tab:

  1. Dettagli
  2. Avanzate
  3. Assegnazione menu

A noi interessa il secondo tab. Avanzate.

Tab Avanzate template Joomla!
Tab Avanzate template Joomla!

Ecco i parametri del template. Possiamo scegliere il colore, colore di sfondo, se le dimensioni devo essere fluide oppure fisse ecc. Per l'articolo in oggetto, facciamo finta che non esista la scelta del colore di sfondo. Ne creeremo un'altra, senza che la nostra vada in conflitto con quella nativa.

Impostare i parametri nel file templateDetails.xml

La prima cosa da fare è quella di scrivere i parametri che vogliamo impostare. Si apra il programma FTP preferito, ci si colleghi alla root nella quale è stato installato Joomla! e si cerchi nella cartella del template in uso il file templateDetails.xml. Una volta portato sul desktop, lo si apra con un editor di testo.

Prima della chiusura del tag </fieldset>, scrivere:

<field name="ColoreBackground" 
type="list" 
default="bianco"  
label="Colore Background" 
description=""  
filter="word" 		
>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="black">Black</option>	
</field>

Ritorniamo tra i parametri del template "Protostar", sempre al tab Avanzate. Possiamo vedere l'aggiunta di una select con le diverse scelte per i colori di sfondo.

Parametro colore background template Joomla!
Parametro colore background template Joomla!

Al momento tali scelte non hanno ancora nessun effetto in quanto mancano le istruzioni da inserire nel file params.ini e nel file index.php.

Compilare il file params.ini

Affinchè tutti i valori impostati nel file templateDetails.xml producano l'effetto desiderato, è necessario creare il file params.ini.

Se tale file esiste, deve trovarsi nella cartella del template in uso, al seguente percorso:

root/templates/Template-In-Uso/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 abbia tutti i permessi in lettura e scrittura appropriati.

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

Creare i files CSS per i colori di background

Giunti a questo punto, dobbiamo creare tanti files .css per quante combinazioni di colori di sfondo desideriamo avere nel pannello di amministrazione, e di conseguenza visibili 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 blue scriveremo:

#page_bg {background: #25304f;}

Salviamo il file con il nome: blue_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 di default nel file params.ini, non ci resta che richiamarli nel file index.php.

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('ColoreBackground'); ?>_bg.css" type="text/css" />

E' il classico link al file .css che richiama il nome del parametro - ColoreBackground scritto nel file params.ini.

Il link al file CSS 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('ColoreBackground'); ?>">

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

Salvare il file index.php ed uplodarlo nella cartella del template in uso. Entrare nell'area di amministrazione e portarsi in EstensioniTemplateStili. Selezionare il template in uso e scegliere uno dei colori disponibili dalla select con etichetta "Colore Background". Effettuare la scelta tra i colori esistenti, salvare ed aggiornare il frontend. Il colore di sfondo cambierà in base a quanto scelto in amministrazione.