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 :
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:
Voici les fichiers nécessaires pour faire fonctionner votre site correctement:
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.
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>
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.
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 !
ExcellentBasée sur 22 avispierre lenfantAurone est un agence web comme on n'en fait plus ! Très réactive, d'une grande souplesse dans le travail et toujours à la pointe de la technologie, vous pouvez compter sur de vrais pros pour tous vos projets web !Sami Yassine TurkiJ'ai eu un plaisir à travailler, en tant que secrétaire général de l'association Lina Ben Mhenni, avec l'agence AURONE qui a assuré avec beaucoup de professionnalisme le développement de notre site web.Gwladys LavergneRéactifs, attentifs, et très compétents nous sommes ravies de travailler avec Aurone qui sait parfaitement répondre à nos attentes que ce soit en terme de design graphique ou bien dans leurs compétences techniques ! Je recommande vivement leur accompagnement !Perrine AmalAurone est une entreprise humaine, réactive et efficace. Travaux réalisés rapidement et avec célérité. Je recommande vivement et espère poursuivre cette collaboration à l'avenir.Stephanie WillmanNous travaillons avec Aurone dans le cadre de notre travail depuis 2016 et en sommes ravies. Au début nous avons commencer à solliciter leurs services pour un projet en Tunisie, et la qualité de leur travail a fait que nous sollicitons Aurone même pour des services dans d'autres pays. L'équipe est dynamique, créative, réactive et enthousiaste. Ils ont toujours bien compris nos besoins pour nos diverses et complexes présences web, et font de leur mieux pour y répondre. Plateformes web, ateliers de formation sur les plateformes, vidéos tutoriels, et conception graphique de divers produits ne sont que quelques uns des excellentes services fournies par Aurone. La qualité technique des prestations web sont top et nous recevons toujours de bons conseils que ce soit au niveau technique que graphique. Nous les recommandons fortement.Raphaël GianassoPour vos projets e-commerce et marketing digital, les collaborateurs d'Aurone font preuve d'écoute, d'expérience, de disponibilité et de réactivité. Une équipe sur laquelle on peut compter et pour laquelle la satisfaction du client est primordialeSamuel DechometsJ'ai trouvé chez Aurone tout ce que l'on peut attendre d'une bonne agence web : qualité, réactivité, souplesse, pertinence... Bravo et merciKarim DjebbarL'ensemble de notre réseau a travaillé pendant plusieurs années avec l'agence Aurone. Quelques réglages ont été nécessaires au début de notre partenariat à l'époque. La qualité a rapidement été au rendez-vous. Les équipes ont travaillé de façon très professionnelle, et adaptée aux exigences de la clientèle française avec qui nous les avons rapidement mis en relation. Beaucoup d'agilité de la part de son fondateur. Merci pour ces belles années !
27 Avenue Taieb Mhiri
Immeuble Yasmina, bureau 17
2080 Ariana, Tunis, Tunisie
+216 22 774 450
Centre d'affaires TODA 2
Rue du Rhin Napoléon
67100 Strasbourg, France
+33 9 80 80 10 18
Rue du Port Franc, 2A
1003 Lausanne
Suisse
Avenue Mutsaard, 41
1020 Bruxelles
Belgique
+32 2 588 07 54