Come creare layout personalizzati in Joomla 3

I layout sono una funzionalità di Joomla 3 che consente di riutilizzare piccole porzioni di design, utilizzando gli override del template.

In questo tutorial, vedremo come creare layout personalizzati veramente flessibili e riutilizzabili.

Negli esempi in questo tutorial sarà utilizzato Breeze, un template gratuito scaricabile qui.

Passo #1. Creare un override del template

Iniziamo creando un override del template per un articolo. Abbiamo bisogno dell'override prima di creare il layout personalizzato.

Nella tua area di backend di Joomla, vai su Estensioni > Gestione template > Lista Template > Dettagli e file. Ecco come apparirebbe per Breeze:

Adesso creiamo il file di override che andremo ad utilizzare:

1. Fai click su Crea override
2. Fai click su com_content
3. Fai click su article

In questo modo sarà creato un file di override del template che puoi modificare:

1. Fai click su Editor
2. Fai click su html
3. Fai click su com_content
4. Fai click su article

Nel caso in cui non fosse possibile creare override dall'area di backend, puoi farlo tramite FTP.

Passo #2. Creare la cartella dei layout

Adesso creeremo una cartella per salvare i nostri layout personalizzati.

Fai click sul pulsante Gestione cartelle

1. Fai click sulla cartella html
2. Scrivi "layouts" come nome
3. Clicca sul pulsante Crea

Nota: esegui questi passaggi solo se la cartella non esiste già.

Adesso ripeti il procedimento per creare una nuova cartella all'interno di "layouts" con il nome "mylayouts". La struttura dovrebbe essere simile a quella riportata in figura:

Passo #3. Creare un layout Joomla di base

Ora creiamo il file per salvare il nostro layout. Fai click sul pulsante Nuovo file.

1. Seleziona la cartella mylayouts
2. Tipo di file: php
3. Nome del file: hello
4. Fai click su Crea

Questo procedimento creerà un file in html/layouts/mylayouts/hello.php. Apri questo nuovo file nella tab editor e aggiungi il codice seguente:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('JPATH_BASE') or die;
?>

<h3>Hello world!</h3>

Salva le modifiche.

Dalla tab editor, vai su html > com_content > article > default.php e aggiungi il codice seguente intorno alla riga 67 prima delle icone stampa/email:

<?php echo JLayoutHelper::render('mylayouts.hello'); ?>

Nel codice precedente, 'mylayouts.hello' definisce il percorso per mylayouts/hellp.php dalla cartella layouts.

Salva le tue modifiche ed apri un articolo nel frontend per vedere il risultato:

Ovviamente si tratta di un layout d'esempio che visualizza un testo statico. Se desideri aggiungere contenuto dinamico basato sui dati dell'articolo continua con il passo 4.

Passo #4. Creare un layout Joomla dinamico

Creiamo adesso un nuovo layout per visualizzare un'etichetta per gli articoli in evidenza.

Crea un nuovo file PHP chiamato featured dentro la cartella mylayouts con il codice seguente:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('JPATH_BASE') or die;
$item = $displayData['item'];
?>
<?php if($item->featured) : ?>
    <div class="alert alert-success">
        <span class="icon-star"></span> <?php echo JText::_('JFEATURED'); ?>
    </div>

<?php endif; ?>

Attenzione alla riga prima seguente nel codice precedente:

$item = $displayData['item'];

Questa riga è veramente importante, infatti recupera tutte le informazioni sull'articolo come titolo, testo, immagini, ecc. Comtiene il codice seguente:

<?php if($item->featured) : ?>
    <div class="alert alert-success">
        <span class="icon-star"></span> <?php echo JText::_('JFEATURED'); ?>
    </div>

<?php endif; ?>

Il periodo if controlla se l'articolo è stato salvato come "In evidenza" nel database, per visualizzare il testo.

Dalla tab editor vai su html > com_content > article > default.php e aggiungi la seguente riga di codice intorno alla riga 67 rimpiazzando la chiamata al layout hello che avevamo impostato al passo 3:

<?php echo JLayoutHelper::render('mylayouts.featured', array('item' => $this->item)); ?>

Nel codice precedente abbiamo aggiunto qualcosa di nuovo:

array('item' => $this->item)

Questo codice passa le informazioni sull'articolo al file del layout (featured.php).

Salva le tue modifiche ed apri un articolo in evidenza sul frontend per visualizzare il risultato finale. Il testo di notifica sotto il titolo visualizza una stella con la scritta "Featured".

Passo #5. Riutilizzare il tuo layout In evidenza

La ragione per cui i layout sono utili è perché possono essere utilizzati nuovamente. In questo esempio, integreremo i layout con la pagina blog.

Crea un nuovo override del template per il tuo blog:

1. Crea override
2. com_content
3. category

Modifica il file blog_item.php

Aggiungi lo stesso codice per visualizzare il layout "in evidenza" intorno alla riga 28, subito sotto il titolo:

<?php echo JLayoutHelper::render('mylayouts.featured', array('item' => $this->item)); ?>

Salve le modifiche ed apri una pagina del blog per vedere il risultato. Lo stesso testo di notifica è ora visualizzato per i tuoi articoli in evidenza nel blog.

Traduzione dell'articolo "How to create custom layouts in Joomla 3" di JoomlaShack.