Post on 24-Jun-2015
description
1
Personnaliser un site Internet – Joomla! 2.5 – Les templates
Joomla!Les templates
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
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...
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
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
6
Personnaliser un site Internet – Joomla! 2.5 – Les templates
Comment c’est fait ?
3 fichiers minimum : index.php : C'est la page principale de votre site web, c'est
dans index.php que vous définissez la position de vos modules.
template_thumbnail.png : miniature de prévisualisation du template dans la console administrateur, et aussi dans le module sélecteur du template partie visible de votre site. 206 x 150 pixels / format png.
templateDetails.xml : Contient tous les fichiers et dossiers du template, c'est le fichier qui permet d'installer votre template depuis la console d'administration. Définit également des paramêtres accessibles et réglables depuis l’administration
3 dossiers : images : Les images de votre site. css : Le ou les fichiers css de votre site. html : Les fichiers d’affichage de certains composants ou
modules (override)
Mon templateMon template
CSSCSS
imagesimages
index.php
templateDetails.xml
template.css
index.html
Logo.png
index.html
template_preview.png
template_thumbnail.png
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,…)
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.
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>
10
Personnaliser un site Internet – Joomla! 2.5 – Les templates
Les principaux éléments de votre template
Le fichier index.php1. 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
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" />
…
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
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
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 :
Vous pouvez utiliser les
noms que vous souhaitez
left
right
top
bottom
inset
banner
header
footer
newsflash
legals
breadcrumb
…
position-0
position-1
position-2
position-3
position-4
position-5
position-6
position-7
position-8
position-9
position-10
…
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.
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
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.
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’);
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
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
2. 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
21
Personnaliser un site Internet – Joomla! 2.5 – Les templates
Nos formations
Plus d’informations sur http://6ble.com/formations