Creare un template per Joomla! 4 prima parte: i file di base

Data creazione: 08 Aprile 2022
Categoria: Guide
Tempo di lettura: Tempo di lettura:7 min

Come creare template per Joomla! 4, ecco il primo di una serie di articoli che spiegheranno le basi della creazione di template personalizzati per il nostro CMS preferito.

Uno dei punti di forza di tutti i CMS è la possibilità di separare la grafica dai contenuti delle pagine, in modo da poter personalizzare le pagine del sito indipendentemente dai contenuti inseriti.

Joomla! la definizione della grafica avviene tramite i template, dove si possono impostare diversi aspetti visivi, colori, dimensioni dei font, posizioni dei moduli, layout e tanto altro.

Sono disponibili molti template "preconfezionati" sia gratuiti che a pagamento, molti offrono un certo grado di personalizzazione, ma per avere un controllo totale l'unico sistema è di realizzare da zero un template e personalizzarlo.

Oggi voglio spiegarti le basi per creare un template personalizzato per Joomla! 4.

Premessa: per creare un template bisogna avere delle conoscenze di base su Html, Css, e Php,

Cosa ti serve per poter seguire questa guida:

Un' installazione di Joomla! 4 funzionante con installati i dati di esempio (decidi tu se su server di staging o su server locale sul tuo pc)
Un Editor Html, se vuoi utilizzarne uno free ti consiglio Notepad ++

Per questa guida mi baserò su il framework Bootstrap su cui è basato Joomla! 4.

Passo 1: crea una struttura di lavoro

Dovrai realizzare un "contenitore" per il tuo template, per cui come prima cosa sul tuo computere crea una cartella e dalle un nome, se vuoi seguire il mio esempio puoi nominarla Jt04_tmpl.

All'interno di questa cartella dovrai crearne altre 2:

La cartella css conterrà i fogli di stile, js conterrà gli script.

Ora dovrai creare due file, apri il tuo editor html e crea un file vuoto, salvalo con le seguenti diciture:

index.php
templateDetails.xml

A cosa servono questi files:

index.php è il file principale del template, quello che renderizza i contenuti, indica le posizioni dei moduli, integra i fogli di stile e gli script.

templateDetails.xml serve per dare infomrazioni al CMS quando il template viene installato, i tipi di files usati, l'autore, le funzioni avanzate etc.

Questo è lo stretto necessario, la base per creare un template per Joomla! 4.

Passo 2: inserisci i file di Bootstrap

Dovrai reperire i file per integrare Bootstrap nel tuo template, puoi scaricarli dal sito ufficiale, per questa guida sto utilizzando la versione 5.1.3.

Una volta scaricati scompatta la cartelle zippata, entra nella cartella decompressa e troverai altre 2 cartelle, css e js.

Dalla cartella css copia il file bootstrap.min.css ed incollalo nella cartella css del tuo template.

Dalla cartella js copia il file bootstrap.min.js ed incollalo nella cartella js del tuo template.

Passo 3: creaiamo il file xml per il template di Joomla!

Con il tuo editor html april il file templateDetails.xml che sarà ovviamente vuoto, inserisci questo codice:

<?xml version="1.0" encoding="utf-8"?>
<extension version="4.1" type="template" client="site"> 
<name>Jt04 Template</name> 
<creationDate>Aprile 2022</creationDate> 
<author>Nome Cognome</author> 
<authorEmail>il mio indirizzo mail</authorEmail> 
<authorUrl>https://www.nomedominio.xy</authorUrl> 
<copyright>Nome Cognome 2022</copyright> 
<description> Il mio Template personalizzato per Joomla 4</description> 
<files> 
<folder>css</folder>
 <folder>js</folder> 
<filename>index.php</filename> 
<filename>templateDetails.xml</filename> 
</files> 
</extension>

Tramite il templateDetails.xml darai a Joomla una serie di informazioni, ad esempio durante l'intallazioni indicherai che è un template e che è stato realizzato per la versione 4.1 (extension version="4.1" type="template" client="site">).

Indicherai il nome del template (<name>J04 Template</name>) e tutta una serie di informazioni, la data di creazione, il nome del creatore e i suoi riferimenti ed infine la descrizione, non inserisco i tag perchè si capisce bene l'uno di ognuno.

Indicherai, sempre in fase di installazione, i file utilizzati dal template e le cartelle, nella parte compresa tra i tag <files> e </files> troverai il nome dei singoli file (<filename>) e delle cartelle (<folder>).

Per cominciare non serve altro, ovviamente ti sto spiegando la base, mancano alcuni aspetti fondamentali come la posizione dei moduli, ma li vedremo in un altro articolo per non mettere troppa carne sul fuoco.

Passo 4: il file index.php

Con il tuo editor html apri il file che, ripeto, dovrà essere vuoto e incolla questo codice:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.miodominio.com/templates/<?php echo $this->template ?>/css/bootstrap.min.css" type="text/css" />
<script src="https://www.miodominio.com/templates/<?php echo $this->template ?>/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
<jdoc:include type="component" />
</div>
</body>
</html>

Attenzione: nella dichiarazione del foglio di style e dello script, troverai nell'esempio di codice la dicitura "https://www.miodominio.com". Non è il modo giusto per inserire i link alle 2 risorse, putroppo il sistema di esempio di codice di Joomla! inserisce dei caratteri supplementari che non farebbero funzionare correttamente il template nel caso tu facessi copia ed incolla.

Per far funzionare correttamente il tutto, sostituisci

https://www.miodominio.com

con

<?php echo $this->baseurl ?>

nel tuo index.php.

Nel dettaglio che cosa hai impostato:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> è un' istruzione di sicurezza per tentare di limitare l'accesso ai "malintenzionati"

<!DOCTYPE HTML> indica il tipo di documento, html 5 per essere precisi

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > indica la lingua in uso nel sito

<head> inizializza le intestazioni della pagina

<jdoc:include type="head" /> serve per includere le informazioni meta, description, keywords, gli script e i fogli di stile che serovno per il funzionamento del sito)

Nota: in Joomla! 4 meta, style e script possono essere "scorporati", ovvero caricati separatamente in diversi punti della pagina, mettendo ad esempio gli script a fondo pagina, utilizzando:<jdoc:include type="metas" /> per le informazioni meta, <jdoc:include type="styles" /> per i fogli di stile, <jdoc:include type="scripts /> per gli script.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina

<link rel="stylesheet" href="/../css/bootstrap.min.css" type="text/css" /> serve per includere il file css di Bootstrap

<script src="/../templates/<?php echo $this->template ?>/js/bootstrap.min.js"></script> serve per includere il file js di Bootstrap

</head> chiude l'area delle intestazioni

<body> inizializza la parte relativa ai contenuti

<div class="container"> è una classe standard di Bootstrap serve per definire un contenitore

<jdoc:include type="component" /> serve per mostrare i contenuti gestiti dai componenti, ad esempio gli artcoli, le gallerie fotografiche, i form

</div> serve per "chiudere" un elemento html, in questo caso il contenitore

</body> chiude l'area dei contenuti

</html> chiude il documento html.

Arrivato a questo punto, avrai creato i file necessari per un template (molto basico) per Joomla! 4.

Passo 5: installa il template

Ora dovrai comprimere la cartelle del tuo template in formato zip o targ.gz, puoi utilizzare diversi strumenti per farlo, WinZip o Win Rar su Windows ad esempio.

Dopo aver compresso passa all'installazione entrando nel backend di Joomla! 4, ed installalo con la stessa procedura di installazione di plugin e componenti, ovviamente dovrai utilizzare Installa da file - pacchetto compresso.

Se avrai seguito la procedura passo passo l'installazione andrà a buon fine

template joomla installato

Dopo averlo installato passa agli Stili di template del sito e imposta il tuo template come predefinito, ti basta cliccare sull'icona corrispondete.

Ora visualizzando il tuo sito troverai una schermata di questo tipo:

Visualizzazione sito Joomla! 4 con template personalizzato basico

Potrai visualizzare il contenuto degli articoli, ma mancheranno tante altre parti fondamentali, il menù di navigazione, il logo, la sidebar, il footer e tanto altro ancora.

Vedremo come implementare quello che manca nelle prossime guide, ecco quelle scritte fin ora:

Se hai domande scrivile nei commenti!

CMS
Joomla