Come creare template Joomla: una guida

Per modificare l’aspetto del tuo sito web con Joomla, puoi usare i cosiddetti template front end. Se desideri una personalizzazione ancora maggiore, puoi creare tu stesso un template Joomla.

Creare Template Joomla: requisiti

Personalizzare l’aspetto del tuo sito web Joomla non è complicato. Infatti, per creare un template personalizzato sono necessari solo tre elementi:

  • Installazione di Joomla, versione minima 3.9: hai bisogno di una versione aggiornata del CMS. Tutte le versioni di Joomla 3.9.x a partire dal 2018 sono adatte per creare template personalizzati. -Conoscenza di base di HTML e PHP: per seguire questa guida è necessaria una conoscenza di base dei linguaggi HTML e PHP. -Conoscenza di CSS: i CSS (fogli di stile) sono necessari per elaborare il design del sito web. Il nostro tutorial su CSS fornisce una buona infarinatura sui fogli di stile. Per creare un template Joomla, bisogna conoscere anche i principali comandi CSS.

Creare un template Joomla: una guida

Se i requisiti illustrati qui sopra risultano soddisfatti, allora puoi cominciare a creare il tuo template. Ti basterà accedere al sito Joomla e seguire i passaggi della nostra guida.

Primo passaggio: definire la struttura delle cartelle

Il primo passaggio consiste nella creazione della struttura delle cartelle del template. Questa operazione richiede solo pochi clic. Vai alla cartella “templates” situata nella directory di installazione di Joomla. Qui trovi l’elenco di tutti i tuoi template. Ora, crea una nuova cartella e assegnale un nome. Ad esempio, possiamo creare una cartella denominata “test” che successivamente ospiterà il tuo template.

Struttura delle cartelle Joomla nell’area cliente IONOS
Per il tuo template Joomla devi creare una nuova cartella nella directory dei file.

Per completare la struttura delle cartelle devi creare tutti i file necessari per il template. Il codice si basa su un template di esempio:

templateDetails.xml

Prima di tutto, è necessario creare il file che consentirà l’installazione del template in Joomla, ovvero il file manifesto templateDetails.xml. In questo file vengono definite tutte le informazioni principali relative al template, ad esempio il nome o l’autore del template stesso.

Per comprendere le righe di codice del file, non sono necessarie competenze avanzate nell’uso di Extended Markup Language (XML). I tag più importanti del file XML sono i seguenti:

  • <name>: nome del template
  • <creationDate>: data di creazione del template
  • <author>: autore o autrice del template, ovvero il tuo nome
  • <authorEmail>: indirizzo e-mail dell’autore, ovvero il tuo indirizzo e-mail
  • <authorUrl>: URL del tuo sito web
  • <copyright>: titolare del copyright del template
  • <license>: informazioni sulla licenza
  • <version>: versione attuale del template
  • <description>: descrizione del template
  • <files>: tutti i file che devono essere installati con il template
  • <positions>: posizione dei moduli presenti nel template
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
<name>test</name>
<version>1.0</version>
<creationDate>19.10.2022</creationDate>
<author>Utente X</author>
<description>Template di prova Joomla di IONOS</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<folder>css</folder>
</files>
<positions>
<position>menu</position>
<position>aside</position>
<position>footer</position>
</positions>
</extension>
xml

index.php

Nel file index.php definiamo il layout principale del sito web. Per iniziare è sufficiente creare una semplice struttura HTML:

<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!—Informazioni header-->
</head>
<body>
<div id="navbar">
              <nav>
<ul>
<li><a href="#">Categoria 1</a></li>
<li><a href="#">Categoria 2</a></li>
<li><a href="#">Categoria 3</a></li>
<li><a href="#">Categoria 4</a></li>
</ul>
              </nav>
          </div>
          <div id="content">
<h1 id="heading">Template di prova</h1>
<img class="image" src="https://picsum.photos/900/500" alt="Image"/>
<p>Puoi creare un template Joomla in pochi passaggi. Segui la guida di IONOS.
</p>
          </div>
         
          
        <footer id="copyright">
          <div id="footercontent">
<p>Copyright by IONOS</p>
          </div>
</footer>
</body>
</html>
html

Cartella css e template.css

Successivamente dovrai creare una cartella denominata “css” e salvarvi tutti i file che andranno a definire l’aspetto del template. In questa cartella sarà possibile creare direttamente il file template.css e scrivere il codice che definirà il layout del template.

body {
font-family: “Arial", serif;
color: black;
line-height: 150%;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #003399;
}

#navbar li {
  float: left;
}

#navbar li a {
  display: block;
  font-size: 26px;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
}

#navbar li a:hover {
  background-color: white;
  color: #003399;
}

#heading {
  font-size: 48px;
  color:  #003399;
  text-shadow: 0 0 5px #000099;
}

#footercontent {
  float: right;
  padding-right: 10%;
}
css
La nuova directory creata appositamente per il template Joomla
Nella directory creata per il template è possibile creare vari file di configurazione.

Secondo passaggio: installare il template

Ora puoi installare il template appena creato. Nel back end di Joomla clicca su “Sistema” > “Installa” > “Verifica” Qui trovi una lista che dovrebbe contenere il tuo template. Cliccando sul riquadro a sinistra del nome del template, puoi installare il template Joomla.

Screenshot del back end di Joomla
Nel back end di Joomla puoi installare in pochi clic il template che hai creato.
Menu “Estensioni” > “Gestione” del back end Joomla
Applicando il segno di spunta vicino al nome del tuo template fai partire l’installazione.

Terzo passaggio: attivare il template

Dopo che l’installazione del tuo template si è conclusa non ti resta che attivarlo. Puoi svolgere anche questa operazione direttamente nel back end di Joomla. Vai a “Sistema” > “Template” > “Stile template sito” Cliccando sulla stellina a destra del nome del template lo imposti come standard.

Menu “Template” > “Stile template sito” del back end Joomla
Clicca sulla stella a destra del template per impostarlo come template standard per il tuo sito web Joomla.

Quarto passaggio: collegare il template a Joomla

Collegare il template a Joomla è fondamentale per garantire il corretto funzionamento del sito web con il nuovo layout. Questo collegamento richiede una modifica al file index.php. Per collegare ilfoglio di stile CSSbasta digitare questa riga di codice all’inizio del fileindex.php.

<?php defined('_JEXEC') or die;
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>
php

Quinto passaggio: caricare i dati dell’header

Successivamente occorre incorporare i dati dell’header nel file index.php. Anche in questo caso puoi usare il linguaggio PHP. Nel fileindex.php sostituisci il commento con la seguente riga di codice:

<jdoc:include type="head" />
html

Questa operazione consente al CMS di importare i dati dell’header direttamente nel file index.php.

Successivamente potrai visualizzare il modello nella versione di anteprima del sito web Joomla:

Template Joomla di IONOS completo
Il template Joomla di IONOS completo.

Sesto passaggio: collegare i moduli

Per concludere, non ti resta che inserire i tuoi contenuti Joomla nel template. Per farlo puoi creare nuove voci di menu sempre dal back end del tuo sito web, facendo clic su “Menu” > “Nuovo”.

Nel back end di Joomla puoi creare nuove voci di menu in pochi clic.
Screenshot delle voci di menu create.

Vai a “Sistema” > “Estensioni” > “Moduli” e seleziona il menu appena creato. Nelle impostazioni avanzate puoi impostare il tag modulo. Seleziona l’opzione “nav”.

Seleziona il tag “nav” per visualizzare il tuo menu.
Tag modulo nelle impostazioni avanzate del modulo.

Ora nel file index.php sostituisci il tag “nav” con la seguente riga di codice per modificare il template:

<jdoc:include type="modules" name="menu" style="xhtml" />
html
Consiglio

Non hai ancora un sito web? Con l’hosting Joomla di IONOS puoi creare il tuo sito web Joomla. Inoltre, con IONOS puoi registrare il tuo dominio a un prezzo conveniente.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.