DotAddict.org

Objectif : livrer un thème offrant depuis le configurateur du thème le choix d'une déclinaison possible entre plusieurs CSS (ici des palettes de couleurs différentes ainsi que d'autres images décoratives).

Ingrédients nécessaires :

• Un fichier _config.php
• Un fichier _public.php
• Des feuilles de style CSS

Fichier _config.php

<?php
// Protection contre la lecture du fichier en dehors de l'admin
if (!defined('DC_CONTEXT_ADMIN')) { return; }
// Initialisation : 
$walou_style = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

// Traitement à l'enregistrement :
if (!empty($_POST))
{
        $core->blog->settings->setNameSpace('walouwalou');
        if (!empty($_POST['walou_style']) && in_array($_POST['walou_style'],$walou_style))
        {
                $core->blog->settings->walou_style = $_POST['walou_style'];
                $core->blog->settings->put('walou_style',
                                        $core->blog->settings->walou_style,
                                        'string',
                                        'Walou-walou theme style',true
                                        );
        }
        $core->blog->triggerBlog();
         echo '<p class="message">'.__('Theme configuration has been successfully updated.').'</p>';
}

// Affichage d'un menu déroulant proposant le choix de la déclinaison : 
echo '<fieldset><legend>Style</legend>'.
'<p class="field"><label>'.__('Style:').' '.
form::combo('walou_style',$walou_style,$core->blog->settings->walou_style).
'</p>'.
'</fieldset>';
?>

Ce fichier se décompose en 3 parties : une phase d'initialisation, une phase de traitement et une phase d'affichage.

Initialisation :
Durant la phase d'initialisation, on déclare la variable $walou_style qui est de type tableau. Prenons l'exemple dans ce tableau de __('Monochrome') => 'grey', :

• Monochrome est ce que l'on verra affiché dans la Configuration du thème dans le panneau d'administration.
• grey est l'identifiant que j'ai choisi pour identifier la feuille de style (j'y reviens après).

Traitement :
Après clic sur le bouton enregistrer (aka !empty($_POST)) :

• On enregistre la valeur envoyée par le formulaire ici defaut, grey, gold ou pastel dans un paramètre du blog nommé walou_style (attention c'est sans le $).
• On invalide le cache des templates grâce à $core->blog->triggerBlog();. Cela permet d'activer le changement de déclinaison immédiatement côté public.
• On affiche un joli message comme quoi la configuration a été mise à jour avec un echo.

Affichage :
Pour l'affichage, on utilise la fonction form::combo de Clearbricks (la trousse à outils géniale incluse avec Dotclear) pour proposer un menu déroulant, ou combobox c'est selon, des déclinaisons disponibles.

form::combo prend 3 arguments :

1. la variable attachée à la boîte qui se récupère après le clic dans $_POST['walou_style']
2. le contenu de la boite : ici notre tableau $walou_style.
3. une valeur présélectionnée : la valeur que l'on a enregistrée dans le paramètre de blog walou_style^[1].

fichier _public.php

<?php
// Protection contre la lecture du fichier en dehors de dotclear
if (!defined('DC_RC_PATH')) { return; }

// Ajout d'un behavior en base
$core->addBehavior('publicHeadContent','walou_publicHeadContent');

// Fonction d'ajout automatique d'une feuille de style
function walou_publicHeadContent($core)
{

        // Initialisation des variables
        $style = $core->blog->settings->walou_style;
        $url = $core->blog->settings->themes_url.'/'.$core->blog->settings->theme;

        //Test de comparaison 
        if (!preg_match('/^default|pastel|grey|gold$/',$style)) {
                $style = 'default';
        }
     
        //Écriture en sortie
        echo '<style type="text/css">'."\n".
                "@import url(".$url."/"."walou-".$style.".css);\n".
                "</style>\n";
}
?>

Ce fichier permet d'ajouter une feuille de style grâce au behavior publicHeadContent normalement présent dans le fichier head.html de notre thème.

Ici ce n'est pas très compliqué, on compare la valeur stockée dans le paramètre de notre blog walou_style aux mots retenus default, pastel, grey ou gold. Si pour quelque raison que ce soit on ne trouve rien, on choisit de retenir la valeur default.

Notre echo en fin de fichier nous retourne alors un joli :

(...)
<style type="text/css">
@import url(/blog/themes/walouwalou/walou-default.css);
</style>
</head>

Voilà pour le côté mécanique, il suffit maintenant d'écrire nos règles CSS spécifiques dans chacun des fichiers : walou-default.css, walou-grey.css, walou-gold.css et walou-pastel.css.

A vous de jouer :-)