Supporto volontario e collaborativo per Joomla!® in italiano

Override del template: come personalizzare le pagine di Joomla

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Template overrideJoomla è 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.
Google Maps

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

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.5.1 Stabile Italiana
Data di rilascio: 05 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: