Joomla! - Personalizzare il Template: Aggiungere posizioni

google-plus Scritto da . Postato in Joomla!

I file principali di un template

Il CMS Joomla! gestisce la pagina attraverso un modello definito da un insieme di file all'interno della cartella del Template in uso. Se si usano template free di solito le posizioni in cui è suddiviso il modello sono definite nel file index.php.

Può essere come nel caso di templates più complessi anche se gratuiti (esempio Bedava) che index.php richiami altri file contenuti in un altra cartella che può prendere il nome di blocks o simili. Dentro questa folder, vi saranno file con nomi tipo header.php, footer.php o simili che contengono il codice che descrive in maniera specifica una porzione della pagina finale. Quest'ultima è composta a partire dai file "blocchi" generalmente nel file index.php che comunque resta la pagina principale del Template.

I temi di yoo theme, invece, dentro la cartella layouts, contengono il file layout.php che descrive le posizioni e appunto il layout della pagina base del template.  

Complessità a parte, il principio rimane lo stesso: Uno o più file PHP contenuti nella cartella templates/vostro-template (index.php, layout.php, header.php, footer.php...), delineano la struttura di tutte le pagine del vostro sito.

Per semplificare la spiegazione del concetto legato all'aggiunta di posizioni a un template, che è a tutti gli effetti una personalizzazione avanzata, prenderò a modello un template free Joomla 3.x molto semplice per struttura e che appunto, affida il suo layout principale all'unico file index.php. Il template grauito per Joomla 3 in questione si chiama JF Taman e viene distribuito da JoomFreak solo e unicamente in cambio di una sponsorizzazione su un social network e/o piccola donazione. Per il lavoro svolto, se la meriterebbero.

Tenendo in conto che è gratuito, il template JF Taman è davvero ottimo: se lo installate, vi renderete conto che ha grandi potenzialità ma anche diverse pecche. La peggiore di tutte? Scarseggia di posizioni dove piazzare i nostri moduli!

Come ovviare?

Aggiungere nuove posizioni

La struttura di un sito fatto con Joomla! dipende fortemente dal template, in quanto questi, non solo gli detta la grafica (colori, sfondi etc) ma anche tutta una serie di informazioni come collegamento e bottoni con link ai social network, codice google analytics e atro ancora.  Cosa più importante detta attraverso le posizioni come verranno distribuiti dentro lo spazio concesso dal browser i blocchi (moduli) che pubblicheremo e renderemmo visibili nelle varie pagine del nostro sito/blog.

Le posizioni possono infatti essere considerate aree o zone nei quali inserire uno o più moduli. Se la posizione è popolata da più moduli contemporaneamente, si può deciderne l'ordine e la modalità di visualizzazione (verticale o orizzontale).

Potrebbe interessarvi questa lettura:

Joomla! - Anteprima posizioni moduli

Premesso cosa sono le posizioni e capito il loro funzionamento, vediamo più da vicino il loro legame con i moduli:

Gestione moduli

Elenca i moduli già creati, pubblicati e sospesi nel sito in uso. A ognuno di essi è assegnata una posizione nel tema - pena la non visualizzazione.

Se infatti si apre da backend Estensioni > Moduli e apriamo un modulo qualunque tra quelli in elenco, sulla destra (joomla 3.x), apparirà il menu a tenda o dropdown menu "Posizione" dal quale sarà selezionabile ogni "position" disponibile tra i vari template installati sul sito Joomla.

jf taman-module-positions

Come già accennato, ogni tema è unico e ha posizioni diverse per nome e per numero rispetto agli altri. Non vi sono regole precise. I nomi sono decisi dal costruttore. Alcune denominazioni sono simili, ma possono non corrispondondere in termini di ubicazione nel layout.

In altre parole, cambiando template predefinito molto spesso i moduli pubblicati non vengono visualizzati, oppure mostrati in aree diverse rispetto a quelle del tema precedente.

In questa guida, prenderò a modello JF Taman e vi aggiungerò una posizione nella porzione che sta tra l'header e il main container: la nuova posizione si chiamerà top_content.

Si presuppone che si stia lavorando su un sito Joomla 3.x già caricato su server e con precaricato Il template free joomla 3.x JF Taman di JoomFreak.com.

Per ragioni di sicurezza, prima di iniziare, raccomando di copiare il template come già spiegato in questo articolo:

Joomla! - Come fare una copia del template

Ciò che viene spiegato qui infatti per quanto utile, se non fatto con la dovuta dovizia, può rendere il template inutilizzabile.

Modifica del file templateDetails.xml

Questa modifica serve per avere nel pannello di ogni modulo, nel menu dropdown "Posizione", la nostra nuova posizione in elenco e selezionabile.

  1. Da Backend, andate su Estensioni > Template > Lista template > Jf_taman Dettagli e File
  2. Dall'editor, aprite il file templateDetails.xml e scorrete il file fino alla riga 38.
  3. Tra i tag <positions> del file XML aggiungete la riga in rosso:
<positions>
    <position>callto</position>
    <position>social</position>
    <position>mainmenu</position>
    <position>search</position>
    <position>logo</position>
    <position>slideshow</position>
    <position>right</position>
    <position>bottom</position>
    <position>bottom-content</position>
    <position>contact</position>
    <position>footer</position>
    <position>showcase</position>
    <position>debug</position>
    <position>top_content</position>
</positions>
  1. Cliccate su Salva.

Il nome scelto per la nuova posizione deve essere univoco e non dev'essere già presente nell'elenco delle posizioni già esistenti.

Le posizioni elencate, sono quelle messe a disposizione dal template. Questo ci indica quali posizioni sono disponibili, ma non la loro ubicazione. L'aggiunta di una riga nel file templateDetails.xml non sortisce effetti senza la successiva modifica.

Modifica del file index.php

Questa è certamente la modifica più importante ai fini dell'aggiunta di una posizione:

  1. Da Backend, sempre su Estensioni > Template > Lista template > Jf_taman Dettagli e File
  2. Dall'editor aprite il file index.php. Questo è il cuore del template: il codice HTML e PHP che ne disegna l'aspetto.

Nidificati in istruzioni di confronto che verificano la presenza o meno di moduli assegnati alle varie posizioni, vi sono le istruzioni racchiuse nei tag <jdoc:include type="modules" name="name-position" style="xhtml" />. Queste clausole dettano a joomla di inserire in quell'area tutti i moduli al quale è associata la posizione "name-position" se e solo se esistono moduli assegnati a quella posizione:

    <?php if ($this->countModules('name-position')) : ?>
        <div id="miodiv">
            <jdoc:include type="modules" name="name-position" style="xhtml" />
        </div>
    <?php endif; ?>

Individuiamo ora il posto che vogliamo fare precedere dalla nuova area moduli o posizione.

  1. Nel caso specifico, si trova alla riga 367.
  2. Spostiamo con il tasto invio la riga verso il basso creandoci quindi tra la 366 e la 367 due o tre righe di spazio e incolliamo tra di loro il seguente codice:
    <?php if($this->countModules('top-content')) : ?>
    <div id="jf-top-content" class="jf-grid-12">
        <div class="jf-block">
            <jdoc:include type="modules" name="top-content" style="xhtml" />
        </div>
    </div>
    <?php endif; ?>
  1. Cliccate su Salva

Come si può notare, applico alla posizione lo stesso nome (top-content) prima scritto nel file templateDetails.xml. Al div contenitore della nuova area moduli, applico la classe CSS jf-grid-12. La classe è già esistente e appartiene al template. In quanto responsive, questa classe, sfrutta tutta la larghezza del main container (di solito espressa in dodicesimi). Se si vuole limitarne la larghezza, visionare il file index.php alla ricerca di altre classi CSS con nome jf-grid-XX (XX è il numero) e sperimentarne la funzionalità a frontend fino a ottenere effetto desiderato.

In alternativa, potete sempre attraverso il file custom.css creare una classe CSS ad hoc per dettare i dettagli di visualizzazione di questa posizione.
Ma fate attenzione è una cosa da utenti esperti. Raccomando sempre di copiare il template prima di fare modifiche così importanti.

Una volta fatta questa modifica, la nuova posizione è pronta ad essere utilizzata, andate in Estensioni > Moduli e inserite all'interno della nuova posizione un modulo a vostro gradimento, non dimenticandovi di pubblicarlo e assegnarlo alla pagina che andrete a visualizzare come demo.

uso-nuova-posizione

Una volta cliccato su Salva, resta solo da sperimentarne il funzionamento a frontend. Se non funziona come dovrebbe, tornate sui vostri passi e cercate di apportare le modifiche necessarie.

Buona personalizzazione!

Potrebbero interessarvi queste letture dedicate alla personalizzazione dei template:

Joomla! - Personalizzare il Template: CSS
Joomla! - Personalizzare il Template: Width
Joomla! - Personalizzare il Template: Override

Se hai gradito l'articolo, condividilo, basta un click:

Commenti   

Antonio
0 #1 Antonio 2016-02-26 21:15
Ciao, sto utilizzanto un template di YOO THEME, ma ho difficoltà nell'aggiungere una posizione al modulo. In prtica mi fermo al primo passaggio xkp il mio INDEX.PHP e praticamente vuoto. Dove mette le posizioni dei moduli? grazie Saluti Antonio I.
Citazione

Aggiungi commento

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):