Override del template: come personalizzare le pagine di Joomla

Home

Gen | 09 04 Domenica

	Override del template: come personalizzare le pagine di Joomla
Autore : ste » Questo articolo è stato letto: 141812 volte »

Guide - Joomla 1.5

Template override Joomla è un CMS che offre molte possibilità di personalizzazione. In particolare il template permette di cambiare la grafica e il layout dell'intero sito, rendendolo diverso e unico rispetto ad altri realizzati con Joomla. Il template costituisce dunque la struttura esterna che rende possibile la visualizzazione dei moduli e dei componenti, ma non solo, consente anche di cambiare il layout dei componenti predefiniti di Joomla. Vediamo di seguito come.

Può capitare di aver bisogno ad es. di una pagina di contatti diversa rispetto a quella del componente Contatti integrato in Joomla e un webmaster con una buona dimestichezza con il php e l'html non avrebbe difficoltà a intervenire nei file del core di Joomla per adattare il componente alle proprie esigenze.

Questa pratica ha però dei risvolti negativi per il webmaster, che è costretto a ricordarsi quali file ha modificato per non sovrascriverli quando esce un nuovo aggiornamento di Joomla e a capire quali modifiche sono state fatte ai quei file per poterli aggiornare. Una grande perdita di tempo che si può evitare applicando un override di Joomla attraverso il template.

Cos'è l'override

L'override è una delle più grandi novità introdotte dalla versione 1.5 di Joomla. In sostanza è la sovrascrizione del layout dei moduli e dei componenti standard di Joomla attraverso il template.

Come funziona

L'override si esegue inserendo degli appositi file nella cartella html del proprio template.
La struttura dev'essere la seguente:

NOME_TEMPLATE/html/NOME_ESTENSIONE/NOME_VISUALIZZAZIONE/NOME_FILE.php

Se ad es. desiderate cambiare la visualizzazione degli articoli (gestiti dal componente com_content di Joomla) copiate il file default.php presente nel vostro sito percorrendo via ftp questo percorso

components/com_content/views/article/tmpl/default.php

all'interno della cartella del vostro template

NOME_TEMPLATE/html/com_content/article/default.php

Una volta copiato il file, potrete effettuare le modifiche al nuovo file e questo sovrascriverà il layout predefinito del componente.
Allo stesso modo, se volete cambiare il layout del modulo di Login (mod_login), copiate il file

modules/mod_login/tmpl/default.php

all'interno della cartella del vostro template

NOME_TEMPLATE/html/mod_login/default.php

Anche in questo caso, una volta copiato il file potrete cominciare a modificarlo.
Nel prossimo paragrafo verrà trattato un esempio pratico di modifica ad un file di override.

Inserire la mappa di Google nei contatti di Joomla

Come esempio di applicazione dell'override, proveremo ad inserire una mappa di Google all'interno della pagina dei Contatti, intervento che può essere utile a molti.
La pagina che cercheremo di cambiare è quella dei Contatti predefinita, come quella visibile su http://demo15.joomla.it
Applicheremo l'override utilizzando il template rhuk_milkyway (template predefinito di Joomla quando effettuiamo un'installazione da zero).

Prima di tutto, all'interno della cartella rhuk_milkyway/html create la cartella com_contact e all'interno di questa la cartella contact, in modo da ottenere questo percorso

templates/rhuk_milkyway/html/com_contact/contact

NB: ogni volta che create una nuova cartella ricordate di inserire al suo interno un file index.html contenente il seguente codice

<html><body bgcolor="#FFFFFF"></body></html>

di modo che la cartella non sia navigabile dal web.

Ora copiate i seguenti 3 file del core di Joomla

components/com_contact/views/contact/tmpl/default.php
components/com_contact/views/contact/tmpl/default_address.php
components/com_contact/views/contact/tmpl/default_form.php

all'interno della cartella templates/rhuk_milkyway/html/com_contact/contact

Questi sono i tre file che permettono di vedere una pagina di contatti in Joomla. Vediamo a cosa servono singolarmente:

default.php : struttura generale della pagina di contatti
default_address.php : contiene il codice che permette di visualizzare l'indirizzo e le informazioni sul contatto
default_form.php : contiene il codice che permette di visualizzare il modulo per l'invio di una mail al contatto

Se ricaricate la pagina dei contatti, per ora non vedrete alcun cambiamento.

Aprite ora il file templates/rhuk_milkyway/html/com_contact/contact/default.php con un editor testuale o con un programma per la modifica di file .php
La struttura del file si presenta abbastanza semplice. Alla riga 51 troviamo il codice che permette di visualizzare l'immagine associata al contatto, se presente:

<?php if ( $this->contact->image && $this->contact->params->get( 'show_image' ) ) : ?>
<div style="float: right;">
<?php echo JHTML::_('image', '/images/stories' . '/'.$this->contact->image, JText::_( 'Contact' ), array('align' => 'middle')); ?>
</div>
<?php endif; ?>

Dopo questo codice potete provare a inserire il codice che fornisce Google Maps quando si effettua la ricerca di una località o di un indirizzo preciso.

Copiate il codice presente nel campo 'Incolla HTML da incorporare nel sito web' e incollatelo nella pagina default.php sotto al codice soprariportato.
Si tratta sostanzialmente di un iframe che permette di visualizzare la mappa di Google. Ricordate di cambiare le dimensioni dell'iframe con dimensioni più ridotte, ad es.

<iframe width="300" height="200"...

Salvate il file e caricatelo via ftp sempre nella cartella templates/rhuk_milkyway/html/com_contact/contact sovrascrivendo quello esistente. Ricaricando la pagina dei contatti, otterrete un risultato come questo:

Mappa di Google nei contatti

A fianco alla mappa appare l'immagine del contatto, che si può togliere modificando i parametri del contatto da Componenti > Contatti > Contatti > Nome del contatto selezionando nel parametro Immagine Contatto "Seleziona immagine" invece dell'immagine attuale.

NB: Come l'immagine, potete decidere se visualizzare o meno molti altre voci, quindi prima di intervenire via codice è opportuno capire se basta impostare correttamente i parametri del contatto per modificare la pagina.

Sempre nel file default.php, potete anche inserire del testo sopra all'area relativa agli indirizzi (via, città, provincia, ecc...), inserendolo direttamente sopra alla stringa di codice:

<?php echo $this->loadTemplate('address'); ?>

Ad es. in questo modo:

<b>Qui possiamo inserire del testo aggiuntivo</b>
<?php echo $this->loadTemplate('address'); ?>

ecco il risultato:

Google Maps nei contatti di Joomla

Se poi desiderate cambiare anche il layout del modulo, modificate il file templates/rhuk_milkyway/html/com_contact/contact/default_form.php

E' possibile ad es. modificare le righe 33-34-35 inserendo il corsivo in questo modo

<i><label for="contact_name">
<?php echo JText::_( 'Enter your name' );?>:
</label></i>

Ecco il risultato:

Personalizzazione del modulo Contatti di Joomla

Come potete vedere le possibilità sono infinite, sta solo alla fantasia del webmaster modificare a proprio piacimento questi file.

Se poi le modifiche apportate non sono più di vostro gradimento e desiderate tornare al layout standard di Joomla, è sufficiente eliminare la cartella templates/rhuk_milkyway/html/com_contact con tutti i file in essa presenti et voilà... tornerà tutto come mamma l'ha fatto :)

Un template che effettua molti override è Beez, uno dei template predefiniti di Joomla. Nella cartella html di Beez potete trovare molti file che sovrascrivono quelli del core togliendo tutte le tabelle e trasformandole in div.
Copiando e incollando l'intera cartella html di Beez nel vostro template, potete applicare all'istante tutte gli override forniti da questo ottimo template.

Fonti:
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Link utili:
http://docs.joomla.org/Understanding_Output_Overrides
http://dinishi.com/hashani/ghop/Issue_59/Getting_Started_with_Template_Overrides_v2.tar.gz

Scritto da ste

Commenta questo articolo sul forum