Supporto volontario e collaborativo per Joomla!® in italiano

Layout alternativi di Joomla: voci di menu e moduli

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 
Layout alternativi di Joomla
Nel precedente articolo Layout alternativi di Joomla: oltre l'override abbiamo parlato di layout alternativi su singoli articoli e spiegato i concetti base per utilizzarlo. Vediamo ora come applicare questa tecnica anche sulle voci di menu e sui moduli.

Layout alternativo di una voce di menu

Creiamo una voce di menu tipo Articoli > Lista di tutte le categorie in un sito Joomla (versione 3.4 o superiore), con diverse categorie di articoli e alcuni articoli assegnati alle varie categorie.
La pagina di default creata da Joomla è la seguente:

Nel nostro esempio abbiamo utilizzato il template Protostar, ma è possibile applicare questa tecnica in qualsiasi template. Visto che si tratta di un template che fa parte del core di Joomla e visto che, come vedremo più avanti, sarà necessario modificarne anche i file di lingua, consiglio di creare la copia del template, per evitare di perdere le modifiche fatte con gli aggiornamenti di Joomla o del proprio template.

1. Creiamo una copia del template

In Estensioni > Template clicca su "Template" nel menu a sinistra, poi clicca sul link Protostar Dettagli e File. In alto a sinistra clicca sul pulsante Copia template. Come Nuovo nome del template scrivi ad esempio MioProtostar. Questa operazione creerà una nuova cartella template denominata "mioprotostar" e due nuovi file di lingua nella cartella language/en-GB: en-GB.tpl_mioprotostar.ini e en-GB.tpl_mioprotostar.sys.ini
Nella cartella language/it-IT copia i file it-IT.tpl_protostar.ini e it-IT.tpl_protostar.sys.ini e rinominali in it-IT.tpl_mioprotostar.ini e it-IT.tpl_mioprotostar.sys.ini
Imposta come predefinito questo nuovo template.

2. Creiamo il layout alternativo


Per creare il layout alternativo copiamo tutti i file presenti nella cartella components/com_content/views/categories/tmpl/
  • default.php
  • default.xml
  • default_items.php
nella cartella templates/mioprotostar/html/com_content/categories/

Rinominiamoli in:
  • miodefault.php
  • miodefault.xml
  • miodefault_items.php

3. Modifichiamo l'xml per creare un tipo di voce di menu aggiuntivo


Apri il file mydefault.xml e modifica le stringhe di lingua:

COM_CONTENT_CATEGORIES_VIEW_DEFAULT_TITLE
COM_CONTENT_CATEGORIES_VIEW_DEFAULT_OPTION
COM_CONTENT_CATEGORIES_VIEW_DEFAULT_DESC

in

TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_TITLE
TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_OPTION
TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_DESC

in sostanza il formato diventa "TPL_"<nome template>_<componente>_<view>_<nome voce di menu>_<tipo di tag>
Andiamo a vedere cosa ha prodotto questa azione. Crea una nuova voce di menu e nel tab Articoli troverai anche quella da te appena creata TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_TITLE.

Nuovo tipo di voce di menu

Non esistendo la corrispondente definizione lingua nel file lingua del proprio template, vediamo la stringhe non tradotte. Apriamo quindi il file lingua language/it-IT/it-IT.tpl_protostar.sys.ini e inseriamo le seguenti definizioni lingua:

TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_TITLE="Layout personalizzato lista di tutte le categorie"
TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_OPTION="Layout personalizzato Protostar"
TPL_PROTOSTAR_COM_CONTENT_CATEGORIES_VIEW_DEFAULT_DESC="Descrizione del layout"

Nuovo tipo di voce di menu con definizione lingua

4. Personalizziamo il layout creato


Una volta creata la voce di menu possiamo vedere in homepage il risultato. Per ora la pagina visualizzata selezionando come tipo di voce di menu Layout personalizzato lista di tutte le categorie, sarà uguale a quella di default.
Per personalizzare la pagina, possiamo modificare le seguenti righe di codice del file templates/protostar/html/com_content/categories/mydefault_items.php

<h3 class="page-header item-title">
        <a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
        <?php echo $this->escape($item->title); ?></a>
        <?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
          <span class="badge badge-info tip hasTooltip" title="<?php echo JHtml::tooltipText('COM_CONTENT_NUM_ITEMS'); ?>">
            <?php echo $item->numitems; ?>
          </span>
        <?php endif; ?>
        <?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
          <a id="category-btn-<?php echo $item->id;?>" href="#category-<?php echo $item->id;?>" 
            data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right"><span class="icon-plus"></span></a>
        <?php endif;?>
      </h3>

in


<h2 class="page-header item-title">
        <span class="icon-arrow-right-2" style="font-size: 15px; color: #3a87ad""></span>
        <a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
         <?php echo $this->escape($item->title); ?></a>
        <?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
          <span class="badge badge-info tip hasTooltip pull-right" title="<?php echo JHtml::tooltipText('COM_CONTENT_NUM_ITEMS'); ?>">
            <?php echo $item->numitems; ?> articoli
          </span>
        <?php endif; ?>
        <?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
          <a id="category-btn-<?php echo $item->id;?>" href="#category-<?php echo $item->id;?>" 
            data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right"><span class="icon-plus"></span></a>
        <?php endif;?>
      </h2>
Il risultato di questa personalizzazione è il seguente:

Layout alternativo voce di menu

 

Importante è sapere che solo la voce di menu personalizzata avrà questo tipo di layout, mentre le altre visualizzeranno la classica pagina di Joomla che abbiamo visto sopra.

Layout alternativo di un modulo

I moduli di Joomla si possono modificare, oltre che con i css, anche con gli override e i layout alternativi. Proviamo ad es. a creare il layout alternativo del modulo Login di Joomla e togliere i due link Nome utente dimenticato? e Password dimenticata?.
Per creare il layout alternativo di un modulo procediamo come negli altri casi.

1. Creiamo il layout alternativo


Per creare il layout alternativo copiamo tutti i file presenti nella cartella modules/mod_login/tmpl
  • default.php
  • default_logout.php
nella cartella templates/protostar/html/mod_login/

Rinominiamoli ad esempio in:
  • mylogin.php
  • mylogin_logout.php

2. Assegniamo il layout al singolo modulo

Andiamo in Estensioni > Moduli e creiamo un nuovo modulo Login. Nel tab Avanzate troviamo il parametro Layout alternativo. Tra le opzioni troveremo il layout mylogin appena creato.

Parametro Layout alternativo modulo

3. Personalizziamo il layout creato

Apriamo il file templates/protostar/html/mod_login/mylogin.php e cancelliamo dalla riga 105 alla riga 112

 <li>
          <a href="<?php echo JRoute::_('index.php?option=com_users&view=remind&Itemid=' . UsersHelperRoute::getRemindRoute()); ?>">
          <?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
        </li>
        <li>
          <a href="<?php echo JRoute::_('index.php?option=com_users&view=reset&Itemid=' . UsersHelperRoute::getResetRoute()); ?>">
          <?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
        </li>



Layout alternativo modulo LoginSalviamo e vediamo che spariscono i due link indicati dal modulo Login che ha assegnato il nostro layout alternativo.

Importante: i layout e gli override "sostituiscono" i file del core di Joomla. Quando si effettua un aggiornamento di Joomla questi non verranno sovrascritti, ma è opportuno controllare se tra i file dell'aggiornamento ci sono quelli che abbiamo utilizzato per creare i layout alternativi e verificare se le modifiche apportate devono essere riportate anche nei propri file.

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

commentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.6.0 Stabile Italiana
Data di rilascio:12 Luglio 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: