Filtra la ricerca ...
Frase esatta
Categorie

Come fare un override di un template K2

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Questa sarà la prima parte di una serie di tutorial, li ho dovuti dividere in più sezioni perché le informazioni da scrivere sono molte, altrimenti scriverei un papiro e non un articolo J

Cos’è l’override in Joomla! ?

La prima cosa da sapere è cosa significa fare un override di un layout Joomla!, ma soprattutto come funziona.

L’override è una sovrascrittura di un file originale di un componente, un modulo o un plugin, infatti potremmo per esempio cambiare layout al componente search, al modulo di login e a quanto altro ci passi per la testa.

Ogni estensione possiede un template di default che si trova all’interno della cartella dell’estensione stessa, per esempio nel modulo login nativo di Joomla! il layout è scritto in un file php che si trova in %tua_installazione_joomla%modules/mod_login/tmpl/default.php , editando questo file potremmo modificarne l’aspetto grafico a front end.

mod_login struttura file

Perché è meglio fare sempre l’override ?

Facendo l’override non si modificano i file originali dell’estensione, ma soprattutto in caso di aggiornamenti della stessa, non si perderebbero le modifiche apportare ai file.

Come si fa un override di un estensione Joomla! ?

L’override di un’estensione è molto semplice, nella cartella del template Joomla!, ossia qui :

%tua_installazione_joomla%/templates/%template_in_uso% viene creata (se già non esiste) una sotto cartella chiamata “html” dentro la quale verranno copiati i file del componente per cui vogliamo fare l’override, rispettando la struttura ad albero originale, avremo quindi una path (percorso) di questo tipo :

%tua_installazione_joomla%/templates/%template_in_uso%/html

che nel caso del modulo login di Joomla! sarà

%tua_installazione_joomla%/templates/%template_in_uso%/html/mod_login

esempio overridee quindi al suo interno avremo una cartella “tmpl” con i seguenti file al suo interno:

default.php

default_logout.php

Questi ultimi due file saranno quelli da modificare se vogliamo fare l’override del modulo login.

Come si può notare dall’immagine, in questo caso ci sono più override, è fondamentale rispettare il nome della cartella originale, altrimenti il sistema non interpreta le modifiche e utilizzerà il file originale di layout.

Adesso che sappiamo cos’è, perché e come si fa l’override di un’estensione Joomla!, apriamo il cofano di K2 e vediamo cosa c’è sotto.

La logica dei template K2

K2 è fornito di un template predefinito che si chiama “default”, tale template può essere duplicato N volte rinominandolo con nomi differenti, personalizzandolo a piacimento ed assegnandolo a categorie diverse sulla base delle esigenze del progetto che ci troveremo a sviluppare di volta in volta.

Il template di K2 si trova in :

%vostra_installazione_joomla%/components/com_k2/templates/default

  • al suo interno troviamo i vari file che ne comandano il layout
  • category.php : vista categoria
  • category_item.php : vista articoli di una categoria
  • item.php : vista singolo articolo
  • item_comments_form.php : form inserimento commento
  • item_form.php : form inserimento articolo da fron end
  • latest_item.php :
  • tag.php : vista tag

Il CSS di K2

Qui invece troviamo il file che formatta l’HTML che troveremo all’interno dei file .php elencati sopra

%vostra_installazione_joomla%/components/com_k2/css

  • k2.css : file CSS per la formattazione globale di tutto K2
  • k2.print.css : file CSS per la formattazione dei documenti (quando si preme la funzione stampa articolo)

Come fare l’override di un template K2

Per effettuare l’override di un template K2 è necessario copiare la cartela default ed il relativo contenuto .

La copia si effettua via FTP con un comune client tipo Filezilla. E’ sufficiente copiare i file in locale e poi ricaricarli nella nuova cartella.

Da : %vostra_installazione_joomla%/components/com_k2/templates/

A : %vostra_installazione_joomla%/templates/%template_in_uso%/html/com_k2/templates/

Come fare l’override del CSS di K2

Per il file CSS invece il percorso è diverso, copiare i file

Da : %vostra_installazione_joomla%/components/com_k2/css/*

l’asterisco (*) è un carattere jolly ed in questo caso indica di copiare tutti i file contenuti nella cartella css. Attenzione solo il contenuto della cartella e non la cartella stessa.

A : %vostra_installazione_joomla%/templates/%template_in_uso%/css

Alcuni esempi di override

Con un po’ di dimestichezza con i vari linguaggi di programmazione (negli esempi ho utilizzato CSS3, HTML4, jQuery e PHP) potete sbizzarrirvi con la fantasia e creare dei layout molto carini.

Esempi di override item.php , item_comments_form.php e category_item.php

Come si vede nelle figure ho inserito delle glyph icons utilizzando Font Awesome, avevo scritto un articolo su come utilizzare Font Awesome su Joomla!

Nella terza e quarta immagine ho inserito due pulsanti che richiamano una funzione in jQuery, non fa altro che mostrare e nascondere un div, in questo caso l’ho utilizzata per mostrare o nascondere i commenti ed il relativo form di inserimento.

Originale

articolo k2 con template originale
k2 default template

Modificato

 

override template articolo k2

override k2 form commenti  

k2 commenti a scomparsa
Vista categoria stile blog

k2 vista categoria stile blog 

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

1 commento su “Come fare un override di un template K2”

  1. Non sono un novellino della programmazione html ed uso cms da anni ma avvicinandomi al magico mondo dell’override non avevo capito niente.
    La lettura di questo articolo è stato un faro !
    Grazie per la chiarezza e l’esposizione

    Rispondi
Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.