Comment créer un Template Joomla de base ?

Un aperçu sur le Template Joomla

Un Template Joomla est un ensemble de fichiers à l’intérieur du CMS Joomla localisées d’un dossier précis et identifié. Le Template permet de contrôler la façon dont le contenu sera affiché par votre site Joomla. Le fait de mettre en place le Template Joomla ne signifie pas que votre design est finalisé, mais plutôt cela signifie que la conception de base qui vous permet de visualiser votre site est réalisée.

Quoi de plus ? Le Template fonctionne conjointement avec le contenu (enregistré dans les bases de données de votre site web), de manière à générer des pages web qui sont essentielles pour la production d’un site « complet ». Ci-dessous un exemple de Template Joomla avec et sans contenu :

Le Template doit être fait de sorte que la feuille de style en elle-même peut être héritée, et à tout moment le contenu sera injecté dans le Template. Une autre chose à retenir est que les images utilisées avec le contenu ne sont pas inclues dans le Template; par contre l’en-tête fait partie du Template.

L’usage d’un Template offre plusieurs avantages pour le CMS Joomla. Certains de ces avantages sont énumérés ci-dessous :

• L’utilisation d’un Template aide à séparer le contenu et la présentation, ce qui rend facile pour un développeur de faire la différence entre ces deux sections et effectuer des modifications rapidement.
• Travailler sur un nouveau Template permet d’ajouter un nouvel aspect au site, qui peut être appliqué immédiatement. Dans ce cas, vous pouvez apporter des modifications sur le contenu ou sur la conception des éléments existants (comme les graphiques, les couleurs, etc.)
• Le Template avec du CSS assure que la nouvelle information ajoutée, article de blog ou des pages seront compatibles avec d’autres contenus du site.

Étapes pour créer un Template Joomla de base

Donc, nous avons définit ce qui est exactement un Template Joomla et ses avantages, nous allons maintenant présenter les étapes de la création d’un Template simple pour le CMS Joomla:

• Étape 1 : Tout d’ abord, vous devez créer un sous-dossier dans le répertoire « Templates » inclus dans votre installation Joomla. Et puis, nomez le sous-dossier « Demo_Template ». Tous vos fichiers de Template résideront dans ce nouveau sous-dossier.
• Étape 2 : Dans votre nouveau répertoire, créez un fichier index.php. Aussi, créez un autre fichier nommé « templateDetails.xml » dans ce répertoire.
• Étape 3 : Ensuite, créez un autre dossier nommé CSS et dans le dossier enregistrez un nouveau fichier nommé « template.css ». Ce sont les fichiers nécessaires pour que votre site Joomla fonctionne correctement. Rappelez-vous, vous pouvez utiliser un simple éditeur de texte tel que Bloc-notes pour créer tous les nouveaux fichiers. Et puis, stockez ces fichiers sur votre système, et plus tard téléchargez-les dans votre serveur en utilisant un logiciel de transfert FTP tel que Filezilla.

Voici les fichiers nécessaires pour faire fonctionner votre site correctement:

• index.php – Ceci est le fichier principal du Template Joomla qui détermine les positions du module disponible. Aussi, il indique le chemin où votre fichier de style (style.css) est stocké.
• templateDetails.xml – Ce fichier dévoile l’information complète sur votre Template pour le CMS Joomla.
• css / template.css – Le troisième fichier fondamental et le plus important est le style.css de votre Template, ce fichier permet de définir l’allure de votre site.

Après avoir terminé les étapes ci-dessus, changer le Template par défaut de votre site par le nouveau. Maintenant, vous devez vous familiariser avec les fichiers listés ci-dessus, car ils sont essentiels à la création d’un Template Joomla réussi. Ainsi, dans la section suivante, nous allons parler à propos de ces fichiers.

Pas le temps de coder votre template ? Notre agence Joomla peut le créer pour vous

Présentation détaillée des fichiers de base d’un Template Joomla

1) Utilisation du fichier « index.php »

Tout d’abord, nous allons voir comment commencer à travailler avec le fichier « index.php » de votre Template :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language; ?>">
<head><jdoc:include type="head" /></head>

Les lignes de code ci-dessus aident à déterminer le début de la sortie HTML de votre site. Et, la ligne de code suivante intégrera le contenu de la section Header dans votre page:

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

Le contenu Header comprend le titre de la page, les mots-clés, etc. – ces données sont ajoutées à partir de l’administration de votre CMS Joomla. Une fois que la partie Header est travaillée, vous devez ensuite commencer par la partie Body de votre site qui ressemble à ça :

<body>
<jdoc:include type="component">
</jdoc:include>
</body>

L’extrait de code ci-dessus affiche le contenu principal inclus dans une page Web donnée. Après l’ajout de l’en-tête et une partie du corps de votre Template, il suffit de vérifier l’affichage du Template. Pour le faire, connectez-vous à l’administration de votre CMS Joomla. Sur le tableau de bord de l’administration, assurez-vous de remplacer le Template par défaut par le « demo_template » nouvellement créé. Ainsi, votre page principale apparaît comme ci-dessous:

Comme vous pouvez le voir ci-dessus, juste une partie du contenu de vos articles est affichée dépourvu de tout style ou module. Vous pouvez ajouter quelques positions pour des modules dans le nouveau Template. Pour réaliser ce travail, vous devrez modifier votre fichier « index.php » et apporter des modifications sur les lignes de code :

<div id="container">
<header>
<jdoc:include name="top_module" type="modules">
</jdoc:include>
</header>

<div id="left-sidebar">
<jdoc:include name="left_module" type="modules">
</jdoc:include>
</div>

<div id="content-section">
<jdoc:include type="component">
</jdoc:include>
</div>

<div id="right-sidebar">
<jdoc:include name="right_module" type="modules">
</jdoc:include>
</div>

<footer>
<jdoc:include name="footer_module" type="modules">
</jdoc:include>
</footer>
</div>

Ici, ces lignes de code, informent le CMS Joomla sur la position, où il faut ajouter les modules publiés. Dans notre cas, nous avons ajouté quatre positions différentes au Template: top_module, left_module, right_module et footer_module.

Toutes ces positions de module contiennent des informations sur leurs classes et leurs ID dans des balises, comme la balise « container » pour l’ID. Le « container » aide à mettre en place les dimensions fondamentales des pages Web.

Maintenant, y compris le contenu dans les balises, notre fichier final « index.ph » ressemblera comme suit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head><jdoc:include type="head" /></head>
<body>
<div id="container">
<header><jdoc:include type="modules" name="top_module" /></header>
<div id="left-sidebar" ><jdoc:include type="modules" name="left_module" /></div>
<div id="content-section" ><jdoc:include type="component" /></div>
<div id="right-sidebar"><jdoc:include type="modules" name="right_module" /></div>
<footer><jdoc:include type="modules" name="footer_module" /></footer>
</div>
</body>
</html>

2) Utilisation du fichier « templateDetails.xml »

Ensuite, il est temps de faire des changements dans le fichier « templateDetails.xml ». Juste, ouvrez ce fichier et coller les lignes de code ci-dessous dedans:

<?xml version= »1.0″ encoding= »utf-8″?>
<!DOCTYPE install PUBLIC « -//Joomla! 1.5//DTD template 1.0//EN » »http://dev.joomla.org/xml/1.5/template-install.dtd »>

<install version= »1.5″ type= »template »>
<name>demo_template</name>
<creationDate>09/02/2016</creationDate>
<author>Your Name</author>
<authorEmail>[email protected]<;/authorEmail>
<authorUrl>http://www.yoursiteurl.com</authorUrl>
<copyright>ABC</copyright>
<license>ABC TOS</license>
<version>1.0.0</version>
<description>This is a Simple Joomla Template</description>

<files><filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>

<positions><position>left_module</position>
<position>right_module</position>
<position>top_module</position>
<position>footer_module</position></positions>

</install>

Dans cet extrait de code, d’abord nous avons mentionné la version du Template que vous aurez besoin de concevoir. Ensuite, nous avons défini le nom du Template « demo_template » qui est suivi par la date de création. Et puis, simplement indiquez votre nom, e-mail, le nom de domaine du site Joomla, et les informations de copyright.

Aussi, une brève description du Template est ajoutée dans les balises. Ensuite, les noms des trois fichiers les plus essentiels sont spécifiés, tels que: index.php, templateDetails.xml et css / template.css. Enfin, les quatre dernières lignes de code aident à déterminer les positions.

3) Utilisation du fichier « css / template.css »

Bien sûr, vous allez ajouter un peu de style à votre Template pour le rendre suffisamment attractif et pour capter l’attention des visiteurs. Pour le faire, ajoutez le code ci-dessous dans votre fichier index.php juste avant la fermeture de la Balise :

<link rel="stylesheet" href="/<?php_echo_%24this-=>%3Bbaseurl_%3F=>%3B%2Ftemplates%2Fdemo_template%2Fcss%2Ftemplate_css=" type="text/css" />

La ligne de code précédente montre l’emplacement de chargement du fichier de style. Mais, vous devez d’abord faire quelques modifications sur votre fichier css / template.css en utilisant le code suivant :

* { padding: 0; margin: 0;}
img { border: 0;}
body { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.2em; margin: 0; padding: 0; font-size: 16px; color: #0d0d0d; }
a:link, a:visited { text-decoration: underline; color: #F00;}
.float { float: left; }
.clear { clear: both; }
.overall { background-color: #e5e5e5; }
div.center { text-align: center; margin: 0px auto 0 auto; padding: 0; width: 980px;
background: #e5e5e5; }
#container { width:990px; margin: auto; background-color: #e0eef7; border: 1px solid
#e4e4e4; text-align: left; }
header { text-align: center; background-color: #e0eef7; height: 80px; }
#content-section { width: 598px; text-align: left; background-color: #e0eef7; padding: 5px; }
#left-sidebar{ text-align: center; background-color: #e0eef7; width: 170px; border-
right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 5px; }
#right-sidebar { background-color:#e0eef7; text-align: center; width: 170px; border
-left: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 5px; }
footer { background-color:#e0eef7; text-align:center; border-top: 1px solid #e4e4e4; border-
bottom: 1px solid #e4e4e4; padding: 5px; }

Toutes les lignes de code ci-dessus contribueront à donner les différentes parties de votre site un aspect présentable et attirant.

Voila tout ! Les étapes mentionnées ci-dessus vous aideront à construire un Template complet qui ressemblera à ceci:

Maintenant libre à vous d’appliquer à ce template une feuille de style CSS plus avancée pour rendre tout ça plus design !

Questions fréquentes sur la création d’un template Joomla

Qu’est-ce qu’un template Joomla ?

Un template Joomla est l’ensemble des fichiers qui définissent l’apparence et la mise en page d’un site Joomla : structure HTML, feuilles de style CSS, scripts JavaScript, images et positions de modules. Il est séparé du contenu, stocké dans la base de données, ce qui permet de changer complètement le design sans réécrire les articles. Joomla distingue les templates du site public de ceux de l’interface d’administration.

Quels fichiers sont indispensables pour créer un template Joomla ?

Les fichiers indispensables pour créer un template Joomla sont index.php, qui contient la structure de la page et les emplacements de modules, et templateDetails.xml, qui déclare le nom, la version, les fichiers et les positions du template. Depuis Joomla 4, on y ajoute généralement un fichier joomla.asset.json qui déclare les feuilles de style et les scripts gérés par le Web Asset Manager, ainsi qu’un dossier de CSS et une vignette de prévisualisation.

Faut-il créer un template Joomla de zéro ou utiliser un template enfant ?

Créer un template enfant est aujourd’hui la méthode recommandée pour personnaliser l’apparence d’un site Joomla, plutôt que de partir de zéro. Depuis Joomla 4.1, un template enfant hérite des fichiers du template parent, comme Cassiopeia, le template par défaut, et ne contient que les éléments modifiés. Les mises à jour du template parent n’écrasent ainsi pas les personnalisations. Un template entièrement sur mesure reste pertinent pour un design très spécifique.

Qu’est-ce qu’une substitution de template (override) dans Joomla ?

Une substitution de template (template override) dans Joomla est une copie personnalisée de la vue d’un composant, d’un module ou d’une mise en page, placée dans le dossier html du template. Joomla utilise alors cette version à la place du fichier d’origine, ce qui permet de modifier l’affichage des articles ou des menus sans toucher au cœur du CMS. Les overrides se créent facilement depuis le gestionnaire de templates de l’administration.

Comment rendre un template Joomla responsive et rapide ?

Un template Joomla responsive repose sur une mise en page fluide en CSS Grid ou Flexbox, des media queries adaptées aux mobiles et des images redimensionnées avec chargement différé. Cassiopeia, le template par défaut de Joomla, s’appuie sur Bootstrap 5. Pour la vitesse, il faut limiter les scripts, charger les ressources via le Web Asset Manager, activer la compression et le cache, puis contrôler les Core Web Vitals avec PageSpeed Insights.

Joomla, WordPress ou Drupal : quel CMS choisir en 2026 ?

Le choix entre Joomla, WordPress et Drupal en 2026 dépend du projet. WordPress, de loin le CMS le plus utilisé, offre le plus vaste écosystème d’extensions et de prestataires. Drupal convient aux sites complexes et institutionnels aux exigences élevées de sécurité et de gestion des droits. Joomla, au multilinguisme natif et à la gestion fine des accès, reste une option solide mais avec une communauté plus restreinte. Les trois sont libres et activement maintenus.