Comment réaliser un template en toute simplicité pour joomla 1.0 ?  Ce tutoriel est destiné aux débutants, ayant un minimum de connaissance en html/xhtml, css et en outil de création de pages web (dreamweaver, nvu... ou éditeur classique de codes) Rentrons dans le vif du sujet.
Un dossier de template joomla version 1.0.X possède l'arborescence suivante:
-Nom_template: dossier principal du template contenant les divers fichiers du template
.css: le dossier contenant le fichier css
*fichier template_css.css (nom donné au fichier css en accord avec "l'appellation" faite dans le fichier index; peut donc être renommé autrement si bien sûr on en tient compte au niveau de l'appel)
.images: le dossier contenant les images du template
* insérer ici toutes les images utilisée dans le fichier prncipal index.php
.index.php: le fichier index.php
.templateDetails.xml: le fichier xml de description du template (fichier qui permet au moteur de joomla d'identifier le dossier zipé comme étant un fichier template)
.template_thumbnail.png: l'image illustrative du template; en général cette image est une miniature de la page principale (index.php) de votre template. Mais vous pouvez aussi insérer une autre image.
Voilà vous avez l'arborescence du template du cms joomla version 1.0.x.
Nous n'allons pas ici détailler ou expliquer comment créer une page web. Cela nous prendrait beaucoup plus de temps. Nous supposons alors que vous avez déjà réalisé une page web; que ce soit en programmant dans un éditeur de texte, ou encore en utilisant un logiciel wysiwyg (comme l'open source nvu ou encore le très connu dreamweaver). Nous n'allons pas non plus être strict sur le point de vue de conception de sites web accessibles (voir par exemple cet article qui explique assez simplement certains aspects de l'accessibilité)
Pour commencer, créez les différents dossiers ci-dessus cités.
Attaquez ensuite la création du fichier principal: index.php
Recopiez dans votre editeur de texte ou votre logiciel wysiwyg cette partie de codes:
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!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">
<head>
<meta name="author" content="votre_nom"/>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; " />
<?php include ("includes/metadata.php"); // include keywords, and such
if (0) {
include ("editor/editor.php");
initEditor();
}
?>
<link href="/templates/nlletribune/css/template_css.css"
rel="stylesheet" type="text/css"/>
<body>
</body>
</html>
Ce code permet (pour ceux qui ne s'en sont pas rendus compte) de fixer la version du fichier xml, de faire appel au fichier css (ligne <link href="/..../css"/>). A cette étape vous pouvez réaliser votre page web (à votre guise tout en placant les images dans le dossier images). Notons toutefois qu' en utilisant des divisions (au lieu des tableaux) vous devrez faire attention au positionnement de certains modules réalisés avec des tableaux. En effet l'on constate certaines fois une désorganisation du template avec tel ou tel module (lire ici rubrique: le xhtml et les cms)
Une fois votre page réalisée, il s'agira de créer les différentes positons du site: qui a déjà eu affaire à joomla a sûrement du positionner divers modules. Ce positionnement est pour les différentes versions de joomla du à l'insertion d'une ligne de code identifiable par le moteur du cms;
Il existe deux lignes de codes principales pour joomla 1.0: la ligne de codes de positionnement de modules, et la ligne de code de positionnement de contenu; Bien évidemment vous pourrez à l'aide de certains plugins et modules positionner un module dans le champ de positionnement de contenus et vice-versa. ceci n'étant pas encore l'objet de notre tuto, identifions les différentes lignes qui nous intéressent:
- exemple de ligne de codes de positionnement de module: : cette ligne vous permet d'identifier dans votre template la position "right"; vous aurez alors à cet endroit tous les modules publiés dans cette position. Pour les autres positions, vous aurez juste à changer la valeur (right) en la nouvelle valeur. S'il est vrai qu'il est possible de créer de nouvelles positions hormis celles que proposent le cms, nous vous conseillons toutefois d'utiliser d'abord les différentes positions de base (cf administration joomla). Normalement ces différentes positions devraient largement suffir.
- la ligne de code de positionnement de contenu: : Ce code insérer dans une partie de votre template, fera afficher le contenu dans cette partie.
Prenez l'exemple de cette page d'un site réalisé avec le cms joomla: http://www.lanouvelletribune.info/content/view/3260/55/ La ligne de positionnement de contenu a été insérée dans la partie gauche ou s'affiche le texte, les images et les vidéos.
(Cliquez ici pour découvrir une autre astuce pour positionner facilement les lignes de code si vous utilisez dreamweaver)
Voilà si vous aviez déjà réalisé votre modèle, vous avez fini votre page; enregistrez la sous le nom de: index.php
Concernant le fichier css, nous n'allons pas vous donner des cours de css, mais plutôt vous fournir un exemple de fichier que vous pouvez utiliser en toute simplicité, et modifier par la suite si vous avez des connaissances en css. Ouvrez la partie administration de votre site, faites: sites>gestion des templates>templates du site . Sélectionnez un template au hasard et cliquer sur css, vous pourrez copier le contenu et le coller dans votre fichier css.
Pour ceux qui ne s'y connaissent pas, le fichier css permet de choisr par exemple, la police du site, la couleur des titres du texte, des modules; bref, le ficheir css est celui qui permet de définir la mise en page du site.Pour vous aider à modifier ce fichier utilisez les instructions situées ici.
Utilisez pour votre fichier xml cet exemple de fichier tout en modifiant les noms de vos images et les données vous concernant (comme votre nom, celui de votre template!!!)
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
<name>rhuk_solarflare_ii</name>
<creationDate>10/20/05</creationDate>
<author>rhuk</author>
<copyright>GNU/GPL</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.rockettheme.com</authorUrl>
<version>2.2</version>
<description>SolarFlare II is a simple and stylish template. The clean
design of this template makes it very lightweight and fast. This is a
significatn upgrade for the original SolarFlare template in that is has a
completely revised layout that uses an alternate box model hack that makes i t
easier to modify. Also a table has been introduced in the main content area tha t
better constricts layout causing less problems with 'problematic' components. Ne w
headers and menu elements give this template a 'fresher' look.</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/advertisement.png</filename>
<filename>images/arrow.png</filename>
<filename>images/button_bg.png</filename>
<filename>images/contenthead.png</filename>
<filename>images/indent1.png</filename>
<filename>images/indent2.png</filename>
<filename>images/indent3.png</filename>
<filename>images/indent4.png</filename>
<filename>images/header_short.jpg</filename>
<filename>images/menu_bg.png</filename>
<filename>images/powered_by.png</filename>
<filename>images/spacer.png</filename>
<filename>images/subhead_bg.png</filename>
<filename>images/title_back.png</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
Insérez à cette étape votre image dans l'arborescence du dossier du template.
COMMENT ZIPPER LE TEMPLATE
Pour tester notre boulot, il faut zipper le tout (plus simple que de copier le dossier pour moi, et en plus, cela me permet d'être sur de ne rien avoir loupé : s'il manque quelque chose, l'installation sera refusée).
Faites attention en zippant de ne pas zipper votre dossier « montemplate » mais de zipper le contenu : rentrez dans le dossier, sélectionnez tous les fichiers, et zippez (je ne vais pas vous apprendre à zipper, si vous avez suivi ce tutoriel jusqu'au bout, vous avez vraisemblablement les
connaissances pour zipper tout(e) seul(e) !) .
Votre template est ainsi réalisé. Si vous avez rencontré des problèmes vous pouvez poser vos questions en utlisant le formulaire de la rubrique contact.
Concernant Joomla 1.5.X
La création de templates pour joomla 1.5 s'avère plus complexe. Toutefois, nous avons trouvé une astuce pouvant permettre aux débutants de s'en sortir. Voilà la méthode à suivre: Si vous disposez d'un template pour joomla 1.0, remplacez les lignes de codes de positionnement de modules dans le fichier index.php par ceux de joomla 1.5: <jdoc:include type="modules" name="top"/> la valeur "name" étant le nom de la position; et la ligne de code de positionnement de contenu par celle de joomla 1.5: <jdoc:include type="component" />.
Connectez-vous ensuite dans la partie administration de votre site. Allez dans la rubrique gestionnaire des plugins: Extensions>Gestionnaire des plugins. Activez le plugin System - Legacy (ce mode vous permet d'utiliser les modules de la version 1.0 avec la version 1.5) . Allez ensuite dans la rubrique installation et installez en toute simplicité votre template.
Nous tenons toutefois à vous dire que l'activation du plugin legacy reviendrait à utiliser un moteur ferrari dans une peugeot 306!!!! Ce n'est évidemment pas vraiment utile mais cette astuce peut faire gagner beaucoup de temps aux novices; Vous avez donc le choix entre la création intégrale du template ou l'utilisation de cette astuce.
N'hésitez pas à nous poser vos questions en nous contactant (voir rubrique contact du site)
({jpageviews 00 none}) | 
