Créer un thème graphique pour Plume CMS

Dans ce tutoriel, nous n'aborderons pas le détail des fonctions que vous pouvez utiliser dans les gabarits, mais plutôt la composition et la structure d'un thème exploitable par Plume.

Structure d'un répertoire de thème

Tous les thèmes sont rangés dans le dossier /manager/templates/. Vous trouverez ici le détail concernant le dossier de thème par défaut de Plume. Vous verrez qu'il est simple de créer ses propres gabarits basés sur ce thème.

Chaque thème a son propre dossier dont le nom est son identifiant. Le thème par défaut est dans le dossier default.

Dans ce répertoire, vous trouverez :

• une série de fichiers *.php ;
• un fichier desc.xml ;
• un fichier image preview.png ;
• et un dossier /style/.

Les fichiers desc.xml et preview.png

Allez dans l'onglet Sites du Manager et éditez le site. Vous verrez alors un aperçu du thème accompagné de sa description. Cette description est extraite du fichier desc.xml et l'image du fichier preview.png.

Le fichier desc.xml

Ce fichier est de la forme suivante :

<?xml version="1.0" encoding="utf-8" ?>
<theme name="default" version="1.0" active="true">
 <author>Loïc d'Anterroches</author>
 <label>Default theme</label>
 <desc>Default Plume CMS theme</desc>
</theme>

L'élément important de ce fichier est l'attribut name de la balise theme. Notez que le nom ici est default. Il correspond à l'identifiant du thème et est similaire au nom du répertoire dans lequel est stocké ledit thème. Admettons que vous créez un thème bleuciel, vous le placerez alors dans le dossier /manager/templates/bleuciel/ et votre fichier desc.xml ressemblera à ça :

<?xml version="1.0" encoding="utf-8" ?>
<theme name="bleuciel" version="1.3" active="true">
 <author>Votre nom</author>
 <label>BleuCiel</label>
 <desc>Un thème bleu ciel</desc>
</theme>

Vous pouvez attribuer un numéro de version à votre thème grâce à l'attribut version. Dans notre exemple, le thème bleuciel est dans sa version 1.3.

Le fichier preview.png

C'est une simple image de 388x151 pixels au format .png. Laissez faire votre imagination pour produire un bel aperçu de votre thème !

Le répertoire de style

Cette partie est un peu plus complexe à comprendre. C'est pourquoi nous vous proposons l'extrait d'une discussion qui a eu lieu sur IRC (#plume sur irc.freenode.org) et dont les protagonistes sont Loïc (alias titoo) et Monolecte.

<titoo> cool
<titoo> imagine que tu as
<titoo> site1.com et site2.com
<Monolecte> oui
<titoo> 'site1.com/manager/' gère site1.com et site2.com
<Monolecte> oui, j'ai enfin compris ça ;-)
<titoo> ça force les images et la feuille de style du thème de 
site2.com à être sur le domaine de site2.com
<titoo> donc dans 'site2.com/xmedia/'
<Monolecte> ok
<titoo> l'idée c'est d'avoir ce chemin
<titoo> 'site2.com/xmedia/theme/theme-id/'
<titoo> avec à l'intérieur le css et les images du thème 'theme-id'
<Monolecte> ouais, c'est ce que j'ai fini par faire
<titoo> cool
<titoo> donc maintenant, tu changes 'theme_id' pour 'newtheme'
<Monolecte> oui...
<titoo> les gabarits utilisés sont dans '/manager/templates/newtheme'
(ils ne bougent pas)
<Monolecte> oui
<Monolecte> ça, j'avais compris
<titoo> mais comment faire pour avoir le css et les images de 
'newtheme' sur site2.com ?
<Monolecte> bonne question
<titoo> simple, il y a une copie automatique du contenu de 
'/templates/newtheme/style/' vers
<titoo> 'site2.com/xmedia/theme/newtheme/'
<Monolecte> ok!!!!
<titoo> tout simplement
<titoo> :D

À partir de là, si vous voulez accéder au fichier style.css qui est situé dans le répertoire /manager/templates/newtheme/ à l'intérieur de vos fichiers de gabarits, utilisez cette fonction :

<?php pxInfo('filesurl'); ?>theme/newtheme/style.css

Par exemple, pour votre feuille de style:

<link rel="stylesheet" type="text/css" 
href="<?php pxInfo('filesurl'); ?>theme/default/style.css" 
media="screen" />

Bien sûr, vous pouvez remplacer style.css par votre-image.png ou tout autre fichier.

Voilà donc ! Vous pouvez laisser une ligne ou deux sur le wiki pour nous présenter vos thèmes ou bien en discuter sur le forum.