Comment créer simplement un style-switcher ? Il s'agit de proposer une liste de choix entre différents styles pour une même page HTML. Tout ceci est géré en PHP qui gardera en mémoire (via un cookie) le style choisi pour permettre de l'afficher à chaque chargement de page.
Le principe est le suivant :
- Chaque habillage fera l'objet d'un dossier différent
- Ces dossiers seront regroupés dans un répertoire à la racine du site
- Chaque dossier contient une feuille de style : "style.css" (une pour chaque habillage)
Le script proposé va tout simplement construire l'url appropriée pour chaque feuille de styles et charger la feuille choisie dans la page html.
Le script crée également un cookie pour sauvegarder le choix et permettre le chargement de la feuille de styles correspondante pour chaque page du site.
Le choix des styles se fait par une liste de liens dans les pages html.
La première chose à faire est d'organiser son bac à sable pour se conformer à cette organisation :
- Créer un dossier à la racine du site, par exemple : /styles
- Créer dans ce dossier un répertoire pour chacune des chartes graphiques (en évitant les majuscules, les espaces et les accents ...)
- Copier les feuilles de styles correspondantes dans chaque dossier et leur donner le même nom, par exemple : style.css
Dans notre exemple, les dossiers d'habillage sont au nombre de trois et s'intitulent : defaut, gazon, ocean.
Le document HTML et PHP
Nous allons commencer par étudier le code html permettant la gestion du choix des styles. Il doit être enregistré dans un fichier portant l'extension .php, par exemple : index.php.
Le fichier : index.php
<?php
header('Content-type: text/html; charset=utf-8');
require_once './styles/styleswitcher.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Styleswitcher</title>
<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $url; ?>" />
</head>
<body>
<ul id="styleswitcher">
<li><a href="<?php echo $actuel; ?>?style=defaut">mon style par défaut</a></li>
<li><a href="<?php echo $actuel; ?>?style=gazon">On se met au vert</a></li>
<li><a href="<?php echo $actuel; ?>?style=ocean">On plonge dans l'océan</a></li>
</ul>
</body>
</html>
Adaptation du fichier index.php
Déclaration dans l'en-tête de document.
<?php
header('Content-type: text/html; charset=utf-8');
require_once './styles/styleswitcher.inc.php';
?>
- Cette déclaration php doit se trouver au début du document.
- Modifier éventuellement le charset pour le rendre conforme à vos choix.
- Le code php gérant le styleswitcher va se trouver dans un fichier externe nommé "styleswitcher.inc.php" et placé dans le répertoire '/styles' créé précédemment (cf la partie suivante : le script php). Ces lignes vérifient l'existence de ce script et ne sont pas à modifier si vous conservez cette organisation.
Remarque concernant la déclaration du charset :
Si vous modifiez le charset, n'oubliez pas de reporter la modification dans la déclaration html qui suit :
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
La bonne pratique invite, en effet, à déclarer également le charset via HTTP, chose possible en php.
Pour plus de détails, nous vous proposons de lire cet article.
La liste de liens constituant le styleswitcher
<ul id="styleswitcher">
<li><a href="<?php echo $actuel; ?>?style=defaut">mon style par défaut</a></li>
<li><a href="<?php echo $actuel; ?>?style=gazon">On se met au vert</a></li>
<li><a href="<?php echo $actuel; ?>?style=ocean">On plonge dans l'océan</a></li>
</ul>
Il suffit de remplacer :
- Les valeurs de l'attribut "style" par les noms de répertoires que vous avez choisi (valeur exacte)
- Les libellés (au grè de votre imagination)
Bien entendu, si vous avez créé un répertoire de plus, il faudra rajouter une ligne :
Exemple, si vous avez créé 4 répertoires : style1, style2, style3, style4.
<ul id="styleswitcher">
<li><a href="<?php echo $actuel; ?>?style=style1">mon style par défaut</a></li>
<li><a href="<?php echo $actuel; ?>?style=style2">Mon style 2</a></li>
<li><a href="<?php echo $actuel; ?>?style=style3">Mon style 3</a></li>
<li><a href="<?php echo $actuel; ?>?style=style4">Mon style 4</a></li>
</ul>
Inversement, si vous n'avez que 2 styles : style1 et style2 :
<ul id="styleswitcher">
<li><a href="<?php echo $actuel; ?>?style=style1">mon style par défaut</a></li>
<li><a href="<?php echo $actuel; ?>?style=style2">Mon style 1</a></li>
</ul>
Il semble évident que notre liste contiendra au moins deux styles, dont un sera chargé par défaut. Bon, passons aux choses sérieuses...
Le code PHP
Comme énoncé plus haut, nous allons créer un fichier texte "styleswitcher.inc.php" dans le répertoire /styles et y copier les lignes suivantes :
<?php
function construire_url($dossier)
{
return 'http://www.site.com/styles/' . htmlspecialchars($dossier) . '/style.css';
}
$dossiers = array(
'defaut',
'gazon',
'ocean'
);
$actuel = htmlspecialchars($_SERVER['PHP_SELF']);
$new_style = (isset($_GET['style'])) ? $_GET['style'] : '';
$cookie_style = (isset($_COOKIE['style'])) ? $_COOKIE['style'] : '';
if(in_array($new_style, $dossiers, true))
{
setcookie('style', $new_style, time() + (365 * 24 * 3600), '/');
$url = construire_url($new_style);
}
else if(in_array($cookie_style, $dossiers, true))
{
$url = construire_url($cookie_style);
}
else
{
$url = construire_url($dossiers[0]);
}
?>
Remplacer : www.site.com par votre adresse
Les valeurs de noms de répertoire dans les lignes suivantes :
$dossiers = array(
'defaut',
'gazon',
'ocean'
);
De la même manière que pour la liste de liens, vous rajouterez une ligne si vous avez créé un style de plus :
$dossiers = array(
'style1',
'style2',
'style3',
'style4'
);
ou vous supprimerez une ligne si vous avez un style de moins :
$dossiers = array(
'style1',
'style2'
);
Remarques :
-
N'oubliez pas les ' pour encadrer les noms de répertoires :
'style1' - Une virgule après chaque item, sauf pour le dernier
- Le style chargé par défaut est celui de la première ligne (soit le répertoire "defaut" dans notre exemple ou le répertoire "style1" dans les exemples d'adaptation)
Votre styleswitcher est prêt à fonctionner !
Que fait ce script ?
Dans cette partie, nous vous proposons une explication du script pas à pas.
La fonction "construire_url($dossier)"
Comme son nom l'indique, il s'agit de la fonction qui va construire l'adresse des différentes feuilles de style, soit, dans le cas du style "defaut" : http://votresite.com/styles/defaut/style.css
La valeur du nom de répertoire est contenue dans une variable : $dossier La valeur de chaque dossier est enregistré dans un tableau :
$dossiers = array(
'defaut',
'gazon',
'ocean'
);
L'url est absolue de manière à ce que le styleswitcher fonctionne quelque soit l'endroit où se trouve la page. Si par exemple, la page faisant appel à une nouvelle feuille de style se trouve dans un sous-dossier, l'accès au CSS reste identique.
Dans la ligne : $actuel = htmlspecialchars($_SERVER['PHP_SELF']); on définit une variable avec la variable $_SERVER['PHP_SELF'] qui renvoie l'url de la page courante.
La variable $actuel est lue dans la partie html et s'adapte donc à chaque page du site :
<li><a href="<?php echo $actuel; ?>?style=defaut">mon style par défaut</a></li>
htmlspecialchars est une fonction de sécurité qui échappe les caractères html. Cela permet, par exemple, d'éviter que quelqu'un ne vienne insérer son propre code pour pirater le site.
Les lignes $new_style = (isset($_GET['style'])) ? $_GET['style'] : ''; et $cookie_style = (isset($_COOKIE['style'])) ? $_COOKIE['style'] : ''; quant à elles, initialisent les variables $new_style et $cookie_style en leur affectant respectivement la valeur demandée et celle d'un cookie. Si l'une de ces valeurs n'existe pas, on remplace la valeur manquante par une chaîne vide.
Gestion du cookie afin de conserver le choix du style choisi.
Afin que le style choisi soit conservé pour chaque page du site ou lors d'une visite ultérieure, le script créé un cookie.
if(in_array($new_style, $dossiers, true))
{
setcookie('style', $new_style, time() + (365 * 24 * 3600), '/');
$url = construire_url($new_style);
}
La méthode in_array() permet de vérifier si un élément se trouve dans un tableau, en l'occurrence le tableau $dossiers contenant la valeur de nos répertoires de styles.
La fonction setcookie() permet de créer un cookie afin de conserver le style choisi en mémoire, si le choix d'un style est fait, c'est à dire si un lien est activé.
Le paramètre style est alors transmis via l'url et conservé dans le cookie. La date de péremption du cookie est de un an (sans effacement des cookies dans le navigateur client, bien entendu).
Au chargement d'une page, le script vérifie l'existence et la valeur du cookie.
Si elle est admise, l'url du style stocké est constitué avec la fonction url().
else if(in_array($cookie_style, $dossiers, true))
{
$url = construire_url($cookie_style);
}
Si aucun cookie n'existe, c'est à dire si aucun lien de la liste n'a été activé, l'url est construite avec le style par défaut, soit le premier item du tableau $dossiers.
else
{
$url = construire_url($dossiers[0]);
}
Et voilà ! Le principe est en fait très simple, il suffit de s'initier aux possibilités et à la syntaxe du langage PHP, puis de faire travailler son imagination ...