créer un template pour joomla 2.5

1

Personnaliser un site Internet – Joomla! 2.5 – Les templates

Joomla!Les templates

2


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


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


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


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


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


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


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


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>[email protected]</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


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



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



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


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




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




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



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


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


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


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


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


Nos formations

Plus d’informations sur http://6ble.com/formations

créer un template pour joomla 2.5

Business