Les règles et méthodes pour créer un template sur 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