Supporto volontario e collaborativo per Joomla!® in italiano

Layout alternativi di Joomla: oltre l'override

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Layout alternativi di Joomla
L'override del template di Joomla è uno strumento ben noto tra gli sviluppatori web, in quanto consente di personalizzare le pagine di articoli, categorie e componenti utilizzando il proprio template, senza intaccare il core di Joomla. Questa buona pratica consente di non perdere le modifiche fatte a seguito di un aggiornamento del core di Joomla. Tuttavia forse non tutti sanno che esiste uno strumento avanzato di override, che consente maggiore elasticità nello sviluppo del proprio sito web: il layout alternativo.

Prima di tutto, se non ne hai mai sentito parlare di override, leggi questo articolo che ti spiegherà la tecnica di base: Override del template: come personalizzare le pagine di Joomla

L''override del template agisce a livello globale nel sito, in quanto se facciamo l'override ad es. della pagina che consente di visualizzare i singoli articoli, esso agirà su tutte le pagine di questo tipo presenti nel sito, quindi tutti gli articoli avranno la stessa struttura e aspetto. Il layout alternativo invece consente di creare più override di uno stesso tipo di pagina e applicarli da amministrazione di Joomla, secondo le proprie esigenze.

I layout alternativi si possono utilizzare con:
  • Moduli
  • Plugin
  • Componenti
  • Categorie
  • Voci di menu

Layout alternativo di un articolo

Iniziamo creando un layout alternativo per la pagina di un singolo articolo. Nei nostri esempi utilizzeremo il template Protostar presente di default in Joomla 3, ma è possibile applicare questa tecnica in qualsiasi template.
Vediamo prima di tutto come si presenta un articolo utilizzando il template Protostar:

Singolo articolo di Joomla

1. Creiamo il layout alternativo


Per creare il layout alternativo procediamo in modo simile all'override, ovvero copiamo i due file presenti nella cartella components/com_content/views/article/tmpl/
  • default.php
  • default_links.php
nella cartella templates/protostar/html/com_content/article/
Se facessimo un semplice override del template, lasceremmo i file con il loro nome originale. Per fare il layout alternativo invece dobbiamo rinominarli, nel nostro caso in questo modo:
  • mioarticolo.php
  • mioarticolo_links.php

Fai attenzione a non inserire underscores nel nome del file principale (mioarticolo.php). Questo ti consentirà di avere dei layout complessi che includono file multipli. Il file principale dev'essere senza underscores e qualsiasi file che verrà chiamato da questo file iniziale invece avrà degli underscores nel nome (ad es. mioarticolo_links.php)

2. Assegniamo il layout al singolo articolo

Una volta creato il layout alternativo, andiamo ad assegnarlo al singolo articolo. Da amministrazione quindi modifichiamo un articolo e nel tab Opzioni troveremo in fondo il parametro Layout alternativo
Tra i layout disponibili troveremo, sotto al titolo --Dal protostar template-- mioarticolo. Il layout ha quindi preso il nome dal nome del file mioarticolo.php
Selezioniamolo

Layout alternativo articolo

Salviamo l'articolo. Ora se andiamo a vedere l'articolo in frontend, non cambierà aspetto, perchè non abbiamo ancora effettuato alcuna modifica al codice.

3. Personalizziamo il layout creato


Modifichiamo il file templates/protostar/html/com_content/article/mioarticolo.php
Possiamo ad es. inserire queste due righe di codice alla riga 85
    <i class="icon-quote icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: left;"></i>
    <div class="alert alert-error" style=" float:right; width:150px; margin: 0 10px;">Qui si può inserire un blocco di testo che appare in tutti gli articoli che hanno impostato questo layout</div>
In questo caso ho utilizzato qualche esempio di Bootstrap, ecco il risultato:

Layout alternativo singolo articolo



Tutti gli articoli che hanno questo layout alternativo assegnato avranno questo aspetto. Ovviamente è un semplice esempio, tu ti potrai sbizzarrire in altri tipi di personalizzazione ;)

Nel prossimo articolo parleremo di Layout alternativo di una voce di menu e Layout alternativo di un modulo.


PS: in fase di stesura dell'articolo ho utilizzato la versione di Joomla 3.4.8 Per le versioni successive la stringa di lingua "Dal protostar template" verrà corretta e diventerà "Dal template protostar".


Fonte: https://docs.joomla.org/Layout_Overrides_in_Joomla



commentaCommenta questo articolo sul forum

Calendario articoli

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: