Comment créer un template Joomla 1.5?

Une question récurrente que beaucoup de personnes se posent lorsqu'elles débutent sous Joomla, est de savoir comment créer un template. Certes il existe un nombre considérable de templates gratuits, mais ceux-ci ne sont pas toujours adaptés à nos besoins et parfois peuvent même être problématiques d'un point de vue légal/ obligation.

Cet article a pour objectif de vous initier sommairement et simplement à la création de templates sous Joomla.

Introduction aux templates

La création de templates sous joomla est très simple mais il faut savoir par où commencer. Si nous regardons les templates déja existants force est de constater que pour chacun d'entre eux, souvent le webmaster y a apporté sa touche personnelle (un template est fait pour ça), et le code n'est pas toujours évident à saisir.

De quels fichiers avons nous besoin pour créer un template pour Joomla 1.5.?

Les trois fichiers les plus importants pour créer un template seront le fichier templates sont index.php,templateDetails.xml et template_thumbnail.jpg bien que ce dernier soit facultatif (il sert à afficher une vignette du template dans l'interface d'administration).

Le fichier template templateDetails.xml

Voici un exemple de ce fichier

<install version="1.5" type="template">
<name>nomdutemplae</name>
<version>numero de version</version>
<creationDate>05.02.2009</creationDate>
<author>votrenom</author>
<copyright>votrecopyright</copyright>
<authorEmail> Cette adresse email est protégée contre les robots des spammeurs, vous devez activer Javascript pour la voir. </authorEmail>
<authorUrl>http://www.votresite.com</authorUrl>
<version>0.1</version>
<description>Template du site monsite </description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/style.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>footer</position>
<position>top</position>
<position>user1</position>
<position>navbas</position>
</positions>
params>
<param name="titre" type="text" default="texte par defaut"
label="texte" description="Titre du site"></param>
</params>
</install>

Ce fichier est assez simple à comprendre, mais quelques points méritent d'être éclaircis.

<install version="1.5" type="template"> : permet de specifier de dire à joomla qu'il s'agit d'un template.

de <name> a </description> : Les informations du template.
<files> Permet de spécifier les fichiers requis pour le template.

<positions> : Très important, vous permet de definir les positions actives. Nous y reviendrons par la suite dans la creation du template en détail, mais pour résumer, un template Joomla! st découpé en zones, appelées positions. Pour pouvoir être utilisées, ces dernières doivent être déclarées dans ce fichier.

<params> : Optionnel, il permet de pouvoir definir des parametres que l'ont pourra modifier dans l'interface d'administration du template. le type est l'element de formulaire, dons notre cas un champ de type text.

Création du template joomla

Créez un modèle de site simple avec par exemple un div à gauche, un div central, et un div à droite, cela nous servira de base. Joignez y votre feuille de style et appelez-le index.php.

Rajoutez ceci au début de votre fichier index.php :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

ceci chargera les données propres à joomla et évitera un accès direct au template sans passer par joomla.

Modifiez le chemin de votre feuille de style par

<link href="/templates/<?php echo $this->template; ?>/css/style.css" rel="stylesheet" type="text/css" /> (on suppose que votre feuille de style s'appelle style.css).
Cela permettra de retrouver le chemin de la feuille de style.

Les balises de metadonnées : juste après le <head>, supprimer les balises eventuelles de titre, de description, de keywords et placez y la ligne suivante :
<jdoc:include type="head" />

Si vous regardez de nouveau dans le fichier xml de details du template, vous verrez qu'on a cree les positions (zones suivantes) :
<position>left</position>
<position>right</position>
<position>footer</position>
<position>top</position>
<position>user1</position>
<position>navbas</position>

Sous joomla, pour afficher une zone (définie dans le fichier xml), il suffit de faire
<jdoc:include type="modules" name="left" style="xhtml" /> ou <jdoc:include type="modules" name="nomdelazone" style="html" />. La différence entre les deux styles (html ou xhtml) de situe dans le fait que lorsque xhtml, les titres du bloc seront affichées sous forme d'une balise html h3 (dont vus pourrez redefinir l'aspect dans votre feuille de style).

Donc dans votre fichier index.php que vous avez créé auparavant, dans votre div de droite, ajoutez :
<jdoc:include type="modules" name="right" style="xhtml" />

Pour le div de gauche:
<jdoc:include type="modules" name="left" style="xhtml" />

Rien ne vous empeche de mettre dans les divs autant de balises html et de contenu que vous voulez, mais gardez à l'esprit que tout ce que vous ajouterez au fichier index.php autre que les elements de type jdoc (donc joomla!) seront répétéssur toutes les pages de votre template).

Le bloc, central, là ou se situe votre contenu, nécessite une commande spéciale : placez ceci dans le div central de votre fichier index.php
<jdoc:include type="component" style="xhtml"/>

pour les footer, le top, user1,navbas, si vous avez créé des positions pour, placez y le code suivant (identique à left ou right, seul le nom de la position change mais qui doit être présent dans le fichier xml)

<jdoc:include type="modules" name="nomdelaposition" style="xhtml" />

A noter que si vous avez defini des positions dans votre fichier xml que vous n'utilisez pas, elles ne seront pas utilisées, veiller donc à ne pas les assigner a un module par exemple. Joomla ne l'afficherais pas.

téléchargez le dossier contenant votre template, dans le répertoire template de votre installation, allez dans le gestionnaire de templates, activez le. Vous avez créé votre premier template, basique certes, mais qui fonctionne. N'oubliez pas d'y placer la vignette dans le dossier du template pour avoir une miniature dans le panneau du gestionnaire de template.

Créer un template réellement opérationnel.

Vous venez de créer un template, mais celui-ci n'est vraiment pas terrible.. Pourquoi? Tous les éléments et composants de joomla font appel à des styles css que vous n'avez pas définis. Bref l'affichage fonctionne, mais n'est pas du tout mis en forme.

Vous pouvez trouver la liste de (presque) tous les styles css définis pour joomla 1.5 à cette adresse : http://www.joomcss.com/joomla-15-css-guide/

Récupérer les parametres : Vous avez du remarquer que dans kle fichier xml, nous avons defini un parametre. Pour le recuperer en php (rien ne vous empeche de placer du code php dans votre template) :

$valeur=$this->params->get('nomduparametre');