vanpie
Comment permettre aux visiteurs de mettre le look du site à son goût ? Une question intéressante à la quelle je vais vous répondre et vous expliquer faire. Tout d'abord, ce procédé s'appelle un CSS switcher ou encore en français un commutateur de feuilles de style.
Pour pouvoir utiliser ce tutoriel, il vous faut: un site hébergé sur un serveur acceptant le PHP et le site doit avoir une architecture sur laquelle on peut facilement changer les styles. Par exemple sur le mien, je ne me suis pas cassé la tête: je change simplement les couleurs. On peut faire beaucoup plus comme sur CSS Zen Garden, c'est la même architecture avec des centaines de designs différents.
La méthode que je vais vous expliquer ne passe rien dans les urls, celles-ci sont parfois déjà trop chargées pour s'y retrouver. En effet, on peut faire passer d'autres variables telles que les langues, les catégories, ... dans les urls. Donc voici une méthode qui utilise les $_POST et les cookies, elle se découpe en 3 parties:
1 - Le formulaireCopiez-collez le code suivant à l'emplacement où vous désirez sur votre site, il va chercher les données stockées dans le tableau css. On ne met rien dans action=" ", il rechargera la page avec la nouvelle feuille de style.
<form action="" method="post">
<fieldset>
<legend>Choisissez votre couleur de page
<select name="style" style="width: 80px">
<?php
//Récupère toutes les valeurs dans le tableaux css
foreach($css as $key => $value) {
if($key !== $style_favori) {
echo ' <option value="'.$key.'">'.$value.''."\n";
}
//Si la key est égale au style choisis, on le sélectionne
else {
echo ' <option value="'.$style_favori.'" selected="selected">'.$css[$style_favori].''."\n";
}
}
?>
</select>
<input type="submit" value="Changer" />
</fieldset>
</form>
Copiez-collez ces lignes avant le Doctype, elles contiennent le tableau css et la récupération du style favori via le $_POST ou via le cookie. Elles doivent imérativement être exécutées avant le reste de la page. N'oubliez pas de remplacez les éléments du tableau avec vos propres feuilles de style.
<?php
//Tableaux des noms des feuilles de style
$css = array(
'bleu' => 'Bleu', // 'bleu' correspond à la feuille de style bleu.css et 'Bleu' c'est ce qui sera affiché dans le select
'jaune' => 'Jaune',
'rose' => 'Rose',
'vert' => 'Vert'
);
//Récupère dans l'url et teste si le style récupéré existe dans le tableau ci-dessus
if(isset($_POST['style']) && array_key_exists($_POST['style'], $css)) {
$style_favori = $_POST['style'];
}
//Sinon, on regarde le style enregistré dans le cookie
elseif(isset($_COOKIE['style_favori'])) {
$style_favori = $_COOKIE['style_favori'];
}
//Autrement on définit le style par défaut
else {
$style_favori = 'jaune';
}
//Si le style est défini et qu'il existe dans le tableau
if(isset($_POST['style']) && array_key_exists($_POST['style'], $css)) {
//on vide le cookie
setcookie('style_favori', '', time() + 63115200,"/");
//on créée un cookie avec le style voulu
setcookie('style_favori', $_POST['style'], time() + 63115200,"/");
}
?>
Copiez-collez ce code dans l'entête de votre page (entre les balises head), et changez le nom de domaine et éventuellement le répertoire contenant vos feuilles de style. J'ai pris l'habitude de mettre mes feuilles de style avec mes images pour une question de facilité en cas d'appel d'images d'arrière plan,...
<?php
//Affichage de la feuille de style chosie
echo '<link rel="stylesheet" type="text/css" href="http://monsite.com/images/'.$style_favori.'.css" media="screen" title="'.$css[$style_favori].'" />'."\n";
//Affichage des feuilles de style alternatives
foreach($css as $key => $value) {
if($key !== $style_favori) {
echo ' <link rel="alternate stylesheet" type="text/css" href="http://monsite.com/images/'.$key.'.css" media="screen" title="'.$value.'" />'."\n";
}
}
?>
Un commentaire, quelque chose quei ne fonctionne pas chez vous ? N'hésitez pas à me le demander.