Supporto volontario e collaborativo per Joomla!® in italiano

Guide Joomla! 3

Impara ad utilizzare Joomla come un professionista

I Template / Come usarli

Manuale riadattato a Joomla!3, tratto dalla traduzione del libro Joomla! 2.5 - Beginner's Guide

Il template è uno delle parti più importanti di un sito. Fornisce l’aspetto, il design. Motiva nuovi visitatori a rimanere sul tuo sito ed esplorarlo. Visitatori regolari e utenti apprezzano un sito ben fatto con un design bello e utile. Pensa ad altri prodotti, per esempio. Una macchina ha bisogno di un buon motore e delle gomme, ma una delle più importanti ragioni per comprarla è spesso il design. Anche se non sempre il design è il motivo principale, è sempre l’impulso che completa l’idea d’acquisto, e potrebbe essere il motivo per cui un acquirente la consideri una ragione tangibile. Se il design è ben fatto, le persone si aspettano che anche il resto sia ben fatto.

Queste automobili sono fatte per diversi gruppi di target. Sono un esempio di un diverso approccio del design.

Il web design è come un lavoro fatto a mano. Avere abilità tecniche come HTML, CSS, JavaScript, PHP, fotoritocco di immagini e molte altre è perentorio.

Un buon template non è soltanto colori e grafica. Anche la forma e il posizionamento del contenuto sono importanti. Il sito deve essere facile da usare e affidabile. Proprio questa sfida ricorda nuovamente le due auto.

Il web design è ancora una professione giovane. Un web designer spesso ha a che fare con bassa larghezza di banda, incompatibilità di browser, editori di contenuti inesperti e altre persone coinvolte nel processo di creazione di un 'buon' sito. La creazione di un sito Joomla! è sempre un processo in cui chiunque viene coinvolto impara molto. :-)

Lavorare con i Template

Per essere in grado di lavorare con i template, non solo si hanno bisogno di buone competenze di progettazione, ma anche una conoscenza di HTML e CSS.

C'è un’interminabile discussione tra sviluppatori e progettisti su ‘come fare la cosa giusta’. I progettisti dipendono dagli sviluppatori perchè hanno bisogno di marcatura HTML con possibilità di aggiungere classi CSS. Anche gli sviluppatori dipendono dai progettisti perchè senza un template ben progettato il miglior componente sarà difficile da usare.

Joomla! ha costruito una soluzione per entrambe le esigenze!

Anche nel template Beez esiste una versione XHTML e HTML5 con l’adeguata marcatura HTML e classi CSS sono creati con i cosiddetti Overrides. Overrides significa che un progettista può ignorare l’estensione di output HTML che lo sviluppatore produce, senza cambiare il codice sorgente originale.

Tuttavia anche per il semplice webmaster che vuole soltanto cambiare l’intestazione grafica, i colori, la larghezza e alcune altre opzioni, Joomla! è la perfetta soluzione.

Joomla! e i template

Joomla! è noto per la sua qualità e semplicità. In Joomla! una singola pagina viene generata dall’output HTML di un componente, diversi moduli ed il template. Ciascuna pagina è accessibile da un unico URL. Prendiamo la prima pagina per esempio. Il componente content produce l’output HTML per gli articoli al centro (Figura 1). I blocchi vicino agli articoli sono moduli. Puoi combinare l’output HTML di un componente con l’output HTML di un qualsiasi numero di moduli. I moduli esistenti possono essere riutilizzati anche in altre pagine.




Posizioni modulo

Ogni template fornisce delle cosiddette posizioni modulo. Per vedere queste posizioni attiva l'Anteprima Posizioni Modulo (Estensioni > Template > Opzioni), vedi Figura 2.



Dopo di che, cliccando sull'apposita iconcina presente a fianco dei nomi dei template potrai visualizzare le posizioni modulo del sito usando il parametro tp=1 (http://localhost/index.php?tp=1). Vedrai evidenziate le posizioni modulo e i loro nomi. In Estensioni > Moduli puoi assegnare ai moduli le varie posizioni disponibili.


Joomla! di base è dotato di due template lato sito e due template lato amministratore. Puoi vedere un’anteprima in Estensioni > Template > menu sulla sinistra Template.

Stili

In Estensioni > Template > Stili vediamo l'elenco degli stili disponibili e la stellina gialla ci indica qual'è lo stile predefinito lato sito e quale lo stile predefinito lato amministratore.

Per cambiare le impostazioni dello stile di un template clicca sul nome del template, ad es. protostar. In Avanzate sono presenti i parametri dello stile del template e possono essere modificati a proprio piacimento. In alcuni template la configurazione è molto più articolata e complessa.

In Assegnazione menu, possiamo assegnare questo stile a determinate pagine del sito.

Potrai creare ulteriori stili di uno stesso template duplicandoli. In Estensioni > Template > Stili seleziona il template e poi clicca sul pulsante Duplica. In questo modo apparirà un nuovo stile nell'elenco (protostar - Default (2)). Si possono quindi modificare le impostazioni di questo nuovo stile, ad es. lo sfondo, e poi in Assegnazione menu, possiamo assegnare questo stile a determinate pagine del sito.

Perciò se vuoi uno sfondo verde sul sito, quando le persone cliccano sulla voce di menu A, per esempio, ed uno sfondo blu quando cliccano sulla voce di menu B, puoi assegnare gli stili corrispondenti.

Personalizzazione del template

Benvenuti nel mondo dell’HTML e del CSS! Suppongo che tu conosca queste due abbreviazioni. In caso contrario, dai un’occhiata a wikipedia HyperText Markup Language (HTML) e Cascading Styles Sheets (CSS).

In Joomla! è possibile modificare tutto il CSS da Gestione template. Vai in Estensioni > Template > Template e clicca sul link Protostar Dettagli e File. Qui, sarai in grado di apportare cambiamenti ai file del template.

I file CSS modificabili sono i file che si trovano nella cartella css. Cliccate sul nome collegato al file CSS e si aprirà il file, modificabile utilizzando l’editor CodeMirror. In aggiunta ai file CSS, è possibile modificare anche i tre file del template principale:

  • la pagina principale index.php
  • la pagina di errore error.php, che si apre quando si verifica un errore durante l'apertura di un sito Joomla!
  • la pagina di stampa component.php, responsabile per l’output della visualizzazione per la stampa.

I file per l'override sono situati nella cartella html.

Le modifiche che fatte qui cambieranno i file originali del template. Questo è da tenere a mente in caso di aggiornamenti, poichè gli aggiornamenti sovrascrivono i files e si rischia di perdere le modifiche fatte.

Per ovviare a questo problema si può effettuare una copia del template.

Guide Per approfondire leggi anche: Creare una copia del template Joomla! e gli override dei CSS

Override

Avete già creato uno stile, cambiando i file CSS e la pagina principale del vostro template, e siete ancora insoddisfatti da questo risultato? :-) Allora questo è il momento ideale per discutere di override. In Joomla! ci sono due tipi di override: override template e layout alternativi.

Override del template

Supponiamo di modificare il layout della pagina dei risultati di ricerca. Un componente come il componente di ricerca ha un layout template predefinito, memorizzato nel file components/com_search/views/search/tmpl/default.php. Questo file permette di vedere l’aspetto della pagina di ricerca. Aggiungi alcune parole al file, salvalo e vedrai immediatamente il risultato! Per esempio, aggiungi

<strong>Ho cambiato qualcosa :-) </strong>

nella linea 13 e vedi cosa succede.

Il risultato è buono, ma non è positivo perché hai appena cambiato il codice sorgente di Joomla! e con il prossimo aggiornamento di Joomla! le modifiche andranno perse!

Una migliore alternativa è utilizzare l'override del template. Copia il file default.php modificato nella cartella del template templates/[template_name]/html/com_search/search e rimuovi le modifiche al file originale di Joomla. Il risultato sulla pagina è la stessa, ma dietro le quinte, hai sostituito il file originale .../default.php con il contenuto del tuo layout preferito senza cambiare il codice sorgente di Joomla - ben fatto!

Guide Per approfondire leggi anche: Override del template: come personalizzare le pagine di Joomla

Layout alternativi

Avrai già visto il campo Layout Alternativo nel modulo di modifica di articoli, moduli e categorie.

Perchè abbiamo bisogno di layout alternativi? Immagina che un template venga fornito con tre layout alternativi per un articolo. A volte è un normale articolo, a volte potrebbe essere un prodotto, altre volte ancora una pagina di un libro. Dovrai soltanto scegliere quale layout usare. Questa è una grande funzionalità di Joomla.

La tecnica è la stessa di quella dell'override del template. Devi creare una cartella con lo stesso nome del componente o modulo e una sottocartella per la vista, ma ci sono due differenze:

  • il nome del file deve essere diverso da default.php , che è già stato utilizzato per l'override del template.
  • il layout alternativo è, naturalmente, non selezionabile automaticamente.

Con questa tecnica si possono creare anche tipi di voce di menu alternativi.

Guide Per approfondire leggi anche: Joomla! 3:Template/Layout alternativi


Guide Per approfondire leggi anche:





CommentaCommenta questa guida sul forum