Your SlideShare is downloading. ×
Créer un template pour Joomla 2.5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Créer un template pour Joomla 2.5

16,244
views

Published on

Les règles et méthodes pour créer un template sur Joomla 2.5

Les règles et méthodes pour créer un template sur Joomla 2.5

Published in: Business

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,244
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
219
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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  cest tous les fichiers que composent Joomla (le noyau).  La forme  cest 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 linterface 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 : Cest la page principale de votre site web, cest 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, cest le fichier qui permet dinstaller votre CSS CSS template depuis la console dadministration. 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 cest un fichier xml avec un encodage utf-8  <extension version="2.5" type="template" client="site"> : indique à joomla que cest un template  <name>mon_template</name> : indique le nom du template. Ne pas mettre despace. Lors de linstallation 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 sassure 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 lencodage de la page <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> 3. Permet dafficher 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 lon 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 dimage 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