Comment créer un Template Joomla de base ?

Dernière mise à jour le 16 Déc 2021
ffe144b59c409587b4c9211fb31afdfe_L
Dans ce tutoriel, nous allons présenter les étapes à suivre pour créer un Template Joomla basique. Mais, avant de montrer comment construire un Template Joomla, nous allons d’abord comprendre l’utilité d’utiliser un template. Le fait de mettre en place le Template Joomla ne signifie pas que votre design est terminé, mais plutôt cela signifie que la structure de base qui vous permet de visualiser votre site est réalisée.

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 :

tt2.jpg

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.

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:

tt6.jpg

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:

tt12.jpg

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

    Téléchargement du module

    Laissez-nous votre prénom et votre adresse de courriel pour vous envoyer le module par courriel:


      Pssssst Attendez...

      Laissez nous votre meilleure adresse email et vous recevrez le premier nos prochaines publications...


        Recevoir chaque semaine notre publication en avant première.

        Rejoignez nos 153 845 fidèles lecteurs et restez informés concernant le domaine du développement web, en étant le premier à recevoir notre publication chaque semaine.