Créer un template pour Joomla 2.5
Télécharger en tant que PPT, PDF4 j'aime18,051 vues
Ce document explique comment personnaliser un site internet en utilisant Joomla! 2.5 et ses templates. Il détaille la structure des templates, les fichiers nécessaires, les outils requis pour l'adaptation, ainsi que des conseils pour l'installation et la gestion des erreurs communes. Des ressources utiles et des exemples pratiques sont également fournis.
Créer un template pour Joomla 2.5
- 1. Personnaliser un site Internet – Joomla! 2.5 – Les templates Joomla! Les templates 1
- 2. Personnaliser un site Internet – Joomla! 2.5 – Les templates Adresses utiles APPRENDRE LE HTML http://www.creation-du-web.com/honolulu http://www.siteduzero.com http://fr.html.net LES FEUILLES DE STYLES http://www.yoyodesign.org http://zonecss.free.fr http://www.alsacreations.com 2
- 3. Personnaliser un site Internet – Joomla! 2.5 – Les templates Un template, c’est quoi ? Un template est un ensemble de règles mettant en forme le contenu (l’information). Il n’y a pas de contenu dans un template... 3
- 4. Personnaliser un site Internet – Joomla! 2.5 – Les templates Un template, ça sert à quoi ? Ca sert à séparer le FOND de la FORME Le fond c'est tous les fichiers que composent Joomla (le noyau). La forme c'est votre template codé en html + css. Le système de template de joomla est très utile : le designer ne touche pas au code php et le programmeur ne touche pas au html. Vous allez sans doute modifier l'interface de votre site, les couleurs, les formes … Il sera beaucoup plus facile de modifier le template que le PHP 4
- 5. Personnaliser un site Internet – Joomla! 2.5 – Les templates Où trouver des templates ? http://www.rockettheme.com http://www.joomlart.com http://www.yootheme.com http://www.siteground.com http://www.joomlafrance.org http://www.joomlademos.de 5
- 6. Personnaliser un site Internet – Joomla! 2.5 – Les templates Comment c’est fait ? Mon template Mon template 3 fichiers minimum : index.php : C'est la page principale de votre site web, c'est index.php dans index.php que vous définissez la position de vos modules. templateDetails.xml template_thumbnail.png : miniature de prévisualisation du template dans la console administrateur, et aussi dans le template_preview.png module sélecteur du template partie visible de votre site. 206 x 150 pixels / format png. template_thumbnail.png templateDetails.xml : Contient tous les fichiers et dossiers du template, c'est le fichier qui permet d'installer votre CSS CSS template depuis la console d'administration. Définit également des paramêtres accessibles et réglables depuis template.css l’administration index.html 3 dossiers : images : Les images de votre site. images images css : Le ou les fichiers css de votre site. html : Les fichiers d’affichage de certains composants ou Logo.png modules (override) index.html 6
- 7. Personnaliser un site Internet – Joomla! 2.5 – Les templates Comment adapter un template ? Les outils : Un éditeur de HTML (Dreamweaver, NVU,…) ou un éditeur de texte (Notepad++, …) Un éditeur d’images (Photoshop, Photofiltre, The Gimp,…) Plusieurs navigateurs (Firefox, Internet Explorer,…) Firefox et des extensions (WebDeveloper, Firebug,…) Un serveur local (EasyPHP, Wamp, Xamp,…) 7
- 8. Personnaliser un site Internet – Joomla! 2.5 – Les templates Exemple Méthode : 1. Créez un dossier dans le dossier templates de votre site : appelez le "mon_template " 2. Créez un dossier CSS 3. Créez un dossier image 4. Un fichier templateDetails.xml : enregistrez le à la racine de votre template. 5. Un fichier index.php que vous enregistrez à la racine de votre template. 6. Un fichier template.css que vous enregistrez dans le dossier CSS. 8
- 9. Personnaliser un site Internet – Joomla! 2.5 – Les templates Le fichier d’installation Le fichier templateDetails.xml <?xml version="1.0" encoding="utf-8"?> : Indique que c'est un fichier xml avec un encodage utf-8 <extension version="2.5" type="template" client="site"> : indique à joomla que c'est un template <name>mon_template</name> : indique le nom du template. Ne pas mettre d'espace. Lors de l'installation du template, le dossier sera crée avec le nom du template. <creationDate>avril 2012</creationDate> <author>Moi</author> <authorEmail>moi@monsite.fr</authorEmail> <authorUrl>http://www.monsite.fr</authorUrl> <copyright>Copyright (C) joomla.buldozer.fr</copyright> <license>GNU General Public License version 2 ou superieure</license> <version>1.0</version> <description>Template joomla 2.5</description> <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>gauche</position> <position>droite</position> </positions> 9
- 10. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template Le fichier index.php 1. Joomla s'assure qu’on n’accède pas au fichier directement <?php defined('_JEXEC') or die;?> 2. Doctype <!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> Voir http://www.pompage.net/pompe/doctype 10
- 11. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template Le fichier index.php 3. Déclare l'encodage de la page <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> 3. Permet d'afficher aux moteur de recherche le titre et meta de votre site <jdoc:include type="head" /> <title>Welcome to the Frontpage</title> <meta name="description" content="Joomla! -the dynamic portal engine and content management system" /> <metaname="generator" content="Joomla! 2.5 -Open Source Content Management" /> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <metaname="keywords" content="joomla, Joomla" /> … 11
- 12. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template Le fichier index.php 6. Déclaration du CSS et son emplacement Les CSS système : <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css » type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> Le CSS du template : <link rel="stylesheet" href="<?php echo$this->baseurl ?>/templates/<?php echo $this- >template ?>/css/template.css" type="text/css" /> <?php echo $this->baseurl ?> url de base du site <?php echo $this->template ?> nom du template 7. </head> : On ferme la commande head 8. <body> : On ouvre body, la partie central de la page 12
- 13. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla! modules <jdoc:include type="modules" name="LOCATION" style="OPTION" /> Exemple : <jdoc:include type="modules" name="position-1" style="xhtml" /> Les différentes options des modules sont définies dans templates/system/html/modules.php Attention ! La syntaxe est à respecter strictement 13
- 14. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla! modules <jdoc:include type="modules" name="LOCATION" style="OPTION" /> Joomla utilise 2 façons de nommer les emplacements pour vos modules, en voici quelques uns les plus utilisés : left position-0 right position-1 Vous pouvez utiliser les top position-2 noms que vous souhaitez bottom position-3 inset position-4 banner position-5 header position-6 footer position-7 newsflash position-8 legals position-9 breadcrumb position-10 … … 14
- 15. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla! modules <jdoc:include type="modules" name="LOCATION" style="OPTION" /> table : <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params- >get('moduleclass_sfx'); ?>"> <?php if ($module->showtitle!= 0) : ?> <tr> <th valign="top«> <?php echo $module->title; ?></th></tr> <?php endif; ?> <tr> <td><?php echo $module->content; ?></td> </tr> </table> horz: table horizontale Xhtml : <div class="moduletable<?phpecho $params->get('moduleclass_sfx'); ?>"> <?php if ($module->showtitle!= 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> rounded: 4 div imbriqués none : affichage brut du contenu. 15
- 16. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla! contenu de votre site <jdoc:include type="component" style="xhtml" /> Cette ligne indique que l'on va afficher le texte (component) dans le bloc principal 16
- 17. Personnaliser un site Internet – Joomla! 2.5 – Les templates Exemple Le fichier d’aperçu : 1. Faites une capture d'écran de votre template 2. Ouvrez votre capture dans votre logiciel d'image 3. Réduisez celle-ci en 640 x 350 pixels 4. Enregistrez-sous template_preview.png à la racine du template. 5. Réduisez celle-ci en 206 x 150 pixels 6. Enregistrez-sous template_thumbnail.png à la racine du template. 17
- 18. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les paramètres Le fichier templateDetails.xml <params> <param name="template_width" type="list" default="fluid" label="Template Width" description="Width style of the template"> <option value="fluid">Fluid with maximum and minimum</option> <option value="medium">Medium</option> <option value="small">Small</option> </param> </params> Détermine différents réglages du template depuis l’admin. Utilisation dans l’index.php : $this->params->get(‘template_width’); 18
- 19. Personnaliser un site Internet – Joomla! 2.5 – Les templates Installer le template dans le site 1. Créez une archive .zip contenant tous les fichiers du template 2. Dans votre Joomla!, allez dans Extensions > Gestion des extensions 3. Installez votre template comme n’importe quelle extension 19
- 20. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les raisons pour lesquelles ça ne pourrait pas fonctionner 1. Le template refuse de s’installer, une erreur s’affiche dans l’administration = Le fichier XML comporte des erreurs Vérifiez la syntaxe : toutes les balises ouvertes doivent être fermées Les informations obligatoires du template sont mal renseignées dans les premières lignes du fichier Des noms de fichiers / répertoires sont écrits alors qu’ils n’existent pas 1. Le template s’est bien installé mais des erreurs d’affichage apparaissent dans le site Des positions de modules / composant manquent La syntaxe des positions est fausse Les classes css ne sont pas correctes Les chemins vers les fichiers css et/ou images ne sont pas corrects 20
- 21. Personnaliser un site Internet – Joomla! 2.5 – Les templates Nos formations Plus d’informations sur http://6ble.com/formations 21