Creare override dei layout in Joomla 3.x

Joomla consente di riprogettare quasi qualsiasi aspetto del sito. In questo breve tutorial parleremo degli override dei layout.

Gli override dei layout sono più limitati e specifici rispetto agli override del template. Gli override dei layout consentono di personalizzare piccole porzioni di un design, per esempio: le icone social, i titoli degli articoli ed i tags.

I layout del core sono localizzati nella cartella denominata /layouts/. Si tratta di una funzionalità presente in Joomla 3.x.

Per questi esempi utilizzeremo il template Protostar di Joomla 3.

Come eseguire l'override del layout dei tag

Personalizziamo l'output HTML per i tag che, per impostazione predefinita, vengono rappresentati come nell'immagine sotto:

Eccome come utilizziamo un override del layout per cambiare il colore di questi tag:

• copia il file tags.php da: /layouts/joomla/content/
• incolla il file tags.php nella cartella: /templates/protostar/html/layouts/joomla/content/
• alla riga 22 di tags.php, aggiungi queste classi al tag <a>: btn btn-primary (lascia uno spazio vuoto dopo questa stringa). La riga di codice risulterà essere:

<a href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($tag->tag_id . '-' . $tag->alias)) ?>" class="btn btn-primary <?php echo $link_class; ?>">

I tag appariranno ora in questo modo:

Come eseguire l'override del layout delle icone di Joomla

Le icone per stampare ed inviare via mail un articolo nelle pagine Blog categoria vengono rappresentate come nell'immagine sotto:

Ecco come utilizzare un override del layout per cambiare il design di queste icone:

• Copia il file icons.php da: /layouts/joomla/content/
• Incolla il file icons.php nella cartella: /templates/protostar/html/layouts/joomla/content/
• Nel file icons.php, cancella il codice dalla riga 16 fino alla fine. Rimpiazza il codice eliminato con il seguente:

<div class="icons pull-right">
<?php if (empty($displayData['print'])) : ?>
    <?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
            <?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
            <ul>
                <?php if ($displayData['params']->get('show_print_icon')) : ?>
                    <li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($displayData['params']->get('show_email_icon')) : ?>
                    <li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($canEdit) : ?>
                    <li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
            </ul>
    <?php endif; ?>
<?php else : ?>
    <div class="pull-right">
        <?php echo JHtml::_('icon.print_screen', $displayData['item'], $displayData['params']); ?>
    </div>

<?php endif; ?> </div>

Se vai sul sito, il risultato sarà simile al seguente:

È importante tenere a mente che, nel template Protostar, ciò funzionerà solo per gli articoli nel layout Categoria Blog. Per utilizzare lo stesso override del layout nella vista articolo completo, dovrai eseguire un override del componente e sostituire il codice che visualizza le icone con la sintassi che richiama il layout.

• copia il file default.php dalla cartella /components/com_content/views/article/tmpl/
• incolla il file default.php nella cartella /templates/protostar/html/com_content/article/
• Modifica il file default.php, eliminando il codice dalla riga 68 alle riga 82, sostituendolo con il codice seguente:

<?php echo JLayoutHelper::render('joomla.content.icons', array('params' => $params, 'item' => $this->item, 'print' => false)); ?>

È possibile applicare un override a tantissimi altri layout nella cartella /layouts/joomla/ ed a quelli forniti dagli sviluppatori di estensioni di terze parti.