Pour modifier l’apparence de votre site Web, vous pouvez utiliser des templates dans le frontend. Avec le CMS Joomla, il est possible de créer ses propres templates pour pouvoir les per­son­na­li­ser selon ses envies. Découvrez comment procéder dans la suite de cet article.

Créer un template Joomla : les prérequis

Per­son­na­li­ser votre site Web avec Joomla n’est pas bien compliqué. En effet, vous n’avez besoin que de trois éléments pour créer votre propre template Joomla :

  • Ins­tal­la­tion Joomla, version minimale 3.9 : il vous faut une version actuelle du CMS. Toutes les versions à partir de la version 2018 de Joomla 3.9.x con­vien­nent à la création de vos propres templates.
  • Con­nais­sances de base en HTML et PHP : pour pouvoir suivre les ins­truc­tions, vous avez besoin de con­nais­sances de base en HTML et PHP.
  • Con­nais­sances CSS : pour la con­cep­tion de sites Web, CSS est né­ces­saire. Notre tutoriel CSS vous donne une bonne in­tro­duc­tion aux feuilles de style en cascade. Vous devez également maîtriser les prin­ci­pales commandes CSS si vous souhaitez créer un template Joomla.

Créer un template Joomla étape par étape

Si vous rem­plis­sez les con­di­tions ci-dessus, vous pouvez commencer à créer votre propre template ! Pour ce faire, connectez-vous à votre site Joomla et suivez ensuite nos ins­truc­tions étape par étape.

Étape 1 : créer une structure de dossiers

Dans un premier temps, vous devez créer la structure de dossiers requise pour votre template. Cela se fait en quelques clics seulement. Pour ce faire, naviguez d’abord dans le dossier « templates » que vous trouverez dans le dossier d’ins­tal­la­tion Joomla. Tous vos templates y sont ré­per­to­riés. Créez un nouveau dossier et nommez-le. Dans cet exemple, nous créons un dossier nommé « test », où le template sera ensuite placé.

Image: Structure des dossiers Joomla dans votre tableau de bord IONOS
Pour votre template Joomla, vous devez créer un nouveau dossier.

Pour compléter la structure des dossiers, il faut créer tous les fichiers né­ces­saires pour le template. Le code s’oriente pour cela sur un template d’exemple :

tem­pla­te­De­tails.xml

Vous devez d’abord créer le fichier qui vous permet d’installer un template dans Joomla : le fichier manifest tem­pla­te­De­tails.xml. Dans ce fichier, vous dé­fi­nis­sez toutes les in­for­ma­tions de base con­cer­nant votre template. Il s’agit par exemple du nom de votre template ou de son auteur.

Vous n’avez pas besoin d’être un pro­fes­sion­nel de l’Ex­ten­sible Markup Language (XML) pour com­prendre les lignes de code du fichier. Les balises les plus im­por­tantes du fichier XML sont les suivantes :

  • <name> : nom du template
  • <creationDate> : date de création du template
  • <author> : auteur du template, c’est-à-dire votre nom
  • <authorEmail> : adresse email de l’auteur, donc la votre
  • <authorUrl> : URL de votre site Web
  • <copyright> : détenteur des droits d’auteur du template
  • <license> : in­for­ma­tions sur la licence
  • <version> : version actuelle du template
  • <description> : des­crip­tion du template
  • <files> : tous les fichiers à installer avec le template
  • <positions> : positions des modules utilisés dans le 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>Musteruser</author>
<description>IONOS Joomla Test Template</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

Le fichier index.php est l’endroit où est définie la maquette de base de l’ensemble de votre site Web. Dans un premier temps, il suffit d’utiliser un simple squelette HTML :

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!—Données de l’en-tête-->
</head>
<body>
<div id="navbar">
          <nav>
<ul>
<li><a href="#">Catégorie 1</a></li>
<li><a href="#">Catégorie 2</a></li>
<li><a href="#">Catégorie 3</a></li>
<li><a href="#">Catégorie 4</a></li>
</ul>
          </nav>
      </div>
      <div id="content">
<h1 id="heading">Test-Template</h1>
<img class="image" src="https://picsum.photos/900/500" alt="Image"/>
<p>Vous pouvez créer un template Joomla en quelques étapes seulement. Suivez simplement les instructions étape par étape de IONOS.
</p>
      </div>
     
      
    <footer id="copyright">
      <div id="footercontent">
<p>Copyright by IONOS</p>
      </div>
</footer>
</body>
</html>
html

dossier css et template.css

Créez ensuite un dossier appelé « css » qui con­tien­dra tous les fichiers qui auront une im­por­tance pour le design de votre template. Dans ce dossier, vous créez di­rec­te­ment le fichier template.css, dans lequel vous pouvez spécifier par code la mise en page que vous souhaitez.

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
Image: La nouvelle structure de dossiers créée pour le template Joomla
Dans le dossier que vous avez créé pour votre template, vous pouvez main­te­nant créer dif­fé­rents fichiers de con­fi­gu­ra­tion.

Étape 2 : installer le template

La deuxième étape consiste à installer le template que vous venez de créer. Pour ce faire, allez dans le backend de Joomla sous « Système > Installer > Vérifier ». Dans l’aperçu qui s’y trouve, vous devriez trouver votre template sous le nom que vous avez choisi. En cliquant sur la case à gauche du nom de votre template, vous pouvez installer le template Joomla.

Image: Aperçu du backend Joomla
Dans le backend Joomla, vous pouvez installer le template que vous avez créé en quelques clics seulement.
Image: Menu Extension > Vérifier du backend Joomla
En cochant la case à côté du nom de votre template, vous commencez l’ins­tal­la­tion.

Étape 3 : activer le template

Une fois l’ins­tal­la­tion de votre template terminée, il ne vous reste plus qu’à l’activer. Cela se fait également en quelques clics dans le backend Joomla. Rendez-vous sur « Système > Templates > Styles des templates du site ». En cliquant sur le bouton étoile à droite du nom de votre template, vous le dé­fi­nis­sez comme template par défaut pour votre site.

Image: Menu Templates > Styles des templates du site du backend Joomla
Cliquez sur l’icône en forme d’étoile à droite de votre template pour le con­fi­gu­rer comme template par défaut pour votre site Joomla.

Étape 4 : connecter le template à Joomla

Il est important de connecter votre template à Joomla pour que l’affichage de votre site Web dans son nouveau template fonc­tionne cor­rec­te­ment. Pour cela, vous devez éditer le fichier index.php. Pour intégrer votrefeuille de style CSS, intégrez la ligne de code suivante tout en haut de votre fichierindex.php :

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

Étape 5 : insérer les données d’en-tête

Dans l’étape suivante, vous devez intégrer les in­for­ma­tions de l’en-tête dans votre fichier index.php. Pour cela, vous pouvez également utiliser PHP. Dans le fichier index.php, remplacez sim­ple­ment le com­men­taire <!-Données de l’en-tête–> dans votre en-tête par la ligne de code suivante :

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

De cette manière, vous demandez au CMS d’entrer les in­for­ma­tions d’en-tête per­ti­nentes dans votre fichier index.php.

Vous pouvez ensuite afficher votre template dans la version de test de votre site Joomla :

Image: Le template de test IONOS Joomla finalisé
Voici comment se présente le template de test IONOS Joomla finalisé.

Étape 6 : relier les modules

La dernière étape concerne l’édition de votre contenu Joomla dans votre template. Vous pouvez créer plusieurs nouveaux éléments de menu en cliquant sur « Menu > Nouveau » dans le backend de votre site.

Image: Backend Joomla : créer un menu
Vous pouvez créer un menu en quelques clics seulement.

Naviguez main­te­nant vers « Système > Ex­ten­sions > Side Modules » et sé­lec­tion­nez le menu que vous venez de créer. Dans les pa­ra­mètres avancés, vous pouvez définir la balise du module. Sé­lec­tion­nez l’option « nav ».

Image: Balise dans les paramètres avancés du module
Sé­lec­tion­nez la balise « nav » pour afficher votre menu.

Main­te­nant, dans votre index.php, remplacez la balise « nav » par la ligne de code suivante afin de modifier votre template en con­sé­quence :

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

Vous n’avez pas encore votre propre site Web ? Avec l’hé­ber­ge­ment Joomla de IONOS, il est facile de créer votre propre site Web Joomla. De plus, IONOS vous permet d’en­re­gis­trer le nom de domaine de votre choix à un prix avan­ta­geux !

Aller au menu principal