# 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](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/) fornisce una buona infarinatura sui fogli di stile. Per creare un template Joomla, bisogna conoscere anche i principali [comandi CSS](https://www.ionos.it/digitalguide/siti-web/web-design/trucchi-css-che-dovreste-assolutamente-conoscere/).

## 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.

[![Immagine: Struttura delle cartelle Joomla nell’area cliente IONOS](https://www.ionos.it/digitalguide/fileadmin/_processed_/d/7/csm_ionos-folder-structure-template_37f944bf7f.webp "Struttura delle cartelle Joomla nell’area cliente IONOS")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ionos-folder-structure-template.png) 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](https://github.com/coolcat-creations/hello "Repository in Git del 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
<?xml version="1.0" encoding="utf-8"?>

<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>
```

#### index.php

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

```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>
<div class="hash d-none" hidden>hash_716db744cf657df1e417f4a47f7b63f1cf7e7be0</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</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.

```css
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%;
}
```

[![Immagine: La nuova directory creata appositamente per il template Joomla](https://www.ionos.it/digitalguide/fileadmin/_processed_/0/a/csm_joomla-template-folder-structure_0e42d041e9.webp "La nuova directory creata appositamente per il template Joomla")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-folder-structure.png) 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” &gt; “Installa” &gt; “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](https://www.ionos.it/digitalguide/hosting/cms/installare-template-joomla/).

[![Immagine: Screenshot del back end di Joomla](https://www.ionos.it/digitalguide/fileadmin/_processed_/2/6/csm_joomla-install-discover-template_761606a63d.webp "Screenshot del back end di Joomla")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-discover-template.png) Nel back end di Joomla puoi installare in pochi clic il template che hai creato. [![Immagine: Menu “Estensioni” &gt; “Gestione” del back end Joomla](https://www.ionos.it/digitalguide/fileadmin/_processed_/6/3/csm_joomla-install-custom-template_9636556712.webp "Menu “Estensioni” &gt; “Gestione” del back end Joomla") Applicando il segno di spunta vicino al nome del tuo template fai partire l’installazione. ](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-custom-template.png)### 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” &gt; “Template” &gt; “Stile template sito”** Cliccando sulla stellina a destra del nome del template lo imposti come standard.

[![Immagine: Menu “Template” &gt; “Stile template sito” del back end Joomla](https://www.ionos.it/digitalguide/fileadmin/_processed_/8/0/csm_joomla-template-default_2d51966179.webp "Menu “Template” &gt; “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. ](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-default.png)### 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 il**foglio di stile CSS**basta digitare questa riga di codice all’inizio del file*index.php*.

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

### 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 file*index.php* sostituisci il commento &lt;!–Informazioni header--&gt; con la seguente riga di codice:

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

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:

[![Immagine: Template Joomla di IONOS completo](https://www.ionos.it/digitalguide/fileadmin/_processed_/e/4/csm_joomla-test-template-frontend_d2b8152f80.webp "Template Joomla di IONOS completo")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-test-template-frontend.png) 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” &gt; “Nuovo”.

[![Immagine: Nel back end di Joomla puoi creare nuove voci di menu in pochi clic.](https://www.ionos.it/digitalguide/fileadmin/_processed_/9/0/csm_joomla-create-menus_a3934d2e7c.webp "Nel back end di Joomla puoi creare nuove voci di menu in pochi clic.")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-create-menus.png) Screenshot delle voci di menu create. Vai a **“Sistema” &gt; “Estensioni” &gt; “Moduli”** e seleziona il menu appena creato. Nelle impostazioni avanzate puoi impostare il tag modulo. Seleziona l’opzione “nav”.

[![Immagine: Seleziona il tag “nav” per visualizzare il tuo menu.](https://www.ionos.it/digitalguide/fileadmin/_processed_/3/0/csm_joomla-set-module-tag-nav_5a380b5906.webp "Seleziona il tag “nav” per visualizzare il tuo menu.")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-set-module-tag-nav.png) 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:

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

Consiglio Non hai ancora un sito web? Con l’[hosting Joomla di IONOS](https://www.ionos.it/hosting/hosting-joomla "Hosting Joomla di IONOS") puoi creare il tuo [sito web Joomla](https://www.ionos.it/digitalguide/siti-web/creare-siti/creare-un-sito-web-con-joomla/). Inoltre, con IONOS puoi [registrare il tuo dominio](https://www.ionos.it/dominio/registra-dominio "Registrare un dominio con IONOS") a un prezzo conveniente.


This is a markdown version of: [https://www.ionos.it/digitalguide/hosting/cms/creare-template-joomla/](https://www.ionos.it/digitalguide/hosting/cms/creare-template-joomla/) for AI/LLM consumption.