Je propose ici un tutoriel dans lequel vous apprendrez à mettre en place un style-switcher sur votre site. Je ne l'ai pas conçu moi-même, il s'agit du sélecteur de style proposé par Chris Clark dans l'article anglophone Build a PHP Switcher (13 octobre 2002). L'avantage de ce tutoriel, c'est qu'il explique ce style-switcher en français. ^^ Il ne s'agit pas d'une traduction de l'article.
J'explique tous les codes. Les personnes qui ne connaissent rien au PHP pourront donc tout de même comprendre un peu.
La lecture des explications n'est pas forcément nécessaire pour comprendre la manière de mettre en place le sélecteur sur votre site, mais je ne supporte pas de voir des lignes de code sans savoir « comment elles marchent ».
Je prends ici l'exemple d'un site (www.mon-site.net) ayant toutes ses feuilles de style hébergées à la racine, avec la syntaxe de nom suivante : nomdustyle.css.
Ce sélecteur se base sur un cookie qui stocke le choix de style. Cela signifie que ce sélecteur ne peut pas fonctionner chez les internautes qui refusent les cookies. C'est l'un des rares inconvénients de ce sélecteur (un autre étant qu'il requiert un hébergement sur lequel le PHP est activé).
Dans cette sous-partie, nous allons voir le code du fichier qui crée ce cookie ou qui le modifie pour « écraser » un choix précédent. Ce code est l'unique contenu du fichier selecteur-style.php hébergé à la racine du site.
Notes d'information
Le code du fichier selecteur-style.php
<?php
if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL)
{$nouveau = $_POST['nouveau'];}
elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL)
{$nouveau = $_GET['nouveau'];}
setcookie ('sousdomainenomdomaine_stylecss', //nom du cookie
$nouveau, //valeur du cookie
time() + 31536000, //durée de vie (31 536 000 secondes = une année)
'/', //répertoire de validité par rapport à la racine
'sousdomaine.nom.domaine', //nom de domaine COMPLET dont sous-domaine
'0'); // 0 = pas sécurisé
header ("Location: ".$_SERVER['HTTP_REFERER']); // retour à la page précédente
?>
Ce code comporte deux instructions PHP : setcookie et header. Chacune se termine par un point-virgule.
Elles sont précédées de deux conditions. Si vous ne savez pas ce qu'est une structure conditionnelle en PHP, cela ne servirait pas à grand-chose que je vous explique ces quatre lignes, en l'état actuel de vos connaissances en PHP et de la lecture de ce tuto. En effet, ces deux conditions sont directement en lien avec la troisième sous-partie de ce tutoriel.
Ne modifiez pas ces 4 lignes de conditions, sous peine de ne pas voir votre style-switcher fonctionner du tout. Pour ne pas vous laisser sur votre faim d'explications, je vous indique juste que ces 4 lignes permettent de récupérer le choix du style.
Explications du code du fichier selecteur-style.php
L'instruction setcookie contient 6 arguments qui déterminent les conditions de validité du cookie.
sousdomainenomdomaine_stylecss est le nom du cookie ; vous pouvez lui donner le nom que vous voulez, mais celui-ci ne doit pas contenir de caractères spéciaux tels des accents, trémas ou cédilles. En revanche, l'usage des underscores (_) est fréquent.
$nouveau est notre variable, sa valeur (l'information) est le nom du style choisi.
Le troisième argument, c'est la date d'expiration ; il y a plusieurs façons de la configurer :
time()+XXXX où XXXX est une durée en secondes ;
time()+(A*B*C*D) où A*B*C*D est un produit (*) dont le résultat est une durée exprimée en secondes. Exemple : 60*60*24*30 = 60 secondes multipliées par 60 minutes multipliées par 24 heures multipliées par 30 jours = environ un mois de durée de vie. Si vous utilisez time() +, cela veut dire que la date d'expiration est définie comme étant l'instant présent auquel on ajoute une durée de temps (XXXX ou (A*B*C*D)). La date d'expiration est donc définie par rapport à l'instant présent, on ne fait que donner une durée de vie au cookie.
'/' est le chemin pour lequel le cookie est valide, à partir de la racine. La mention '/' indique que le cookie est valable (on dit aussi valide) pour tous les répertoires du sous-domaine. Sinon, on peut renseigner par exemple '/admin/'.
'sousdomaine.nom.domaine' est le sous-domaine de validité du cookie. Un cookie n'est valide que pour un et un seul sous-domaine donné. Dans le cas contraire, n'importe quel site (identifié par son sous-domaine) pourrait modifier des cookies créés par d'autres sites. Il ne faut pas indiquer de répertoire du site pour cet argument, il faut indiquer la racine sans le slash (/) final.
'0' ou '1' indique si le cookie est transmis uniquement si la ligne est sécurisée ('1') ou non ('0'). Cet argument n'est pas obligatoire ; il vaut '0' par défaut.
Il ne faut en aucun cas changer l'ordre des arguments dans ces lignes de code. La structure est la même pour tous les cookies.
L'instruction header ("Location: ".$_SERVER['HTTP_REFERER']); indique qu'une fois le formulaire envoyé vers le fichier selecteur-style.php, celui-ci traite les informations qu'il a reçues (le nom du style via la variable $nouveau), puis effectue une redirection vers la page depuis laquelle a été envoyé le choix du style. En fait, l'internaute ne verra pas cette page selecteur-style.php, elle sert uniquement à écrire le cookie.
Pour pallier ce problème, une solution simple existe : créer sur votre site une page dédiée au changement de style, à l'instar du Site du Zéro. Il suffit d'inclure le code de selecteur-style.php dans une page page-de-changement-de-style.php avant le moindre code XHTML, en ayant remplacé header ("Location: ".$_SERVER['HTTP_REFERER']); par header ("Location: http://www.mon-site.net/page-de-changement-de-style.php");.
Conclusion de cette première sous-partie
Voici le code pour la création d'un cookie qui durera un an, sans les commentaires (c'est plus lisible).
sousdomainenomdomaine_stylecss est le nom du cookie que vous venez tout juste de créer et de configurer, grâce au fichier selecteur-style.php. Il apparaît dans ce code comme une variable appelée $sousdomainenomdomaine_stylecss car c'est ici (dans ce code PHP) une variable ; mais il ne faut pas la confondre avec notre variable qui s'appelle $nouveau.
Attention à ne pas vous emmêler les pinceaux avec les variables :
$sousdomainenomdomaine_stylecss est le nom d'une « nouvelle » variable, oui, mais je viens de dire que nous n'allons pas nous en occuper.
sousdomainenomdomaine_stylecss est le nom du cookie qui stocke le choix du style CSS de l'internaute. Vis-à-vis du cookie, ce choix représente sa valeur.
$nouveau est le nom de notre variable. Sa valeur est l'information portée par le cookie. Voici quelques exemples de valeurs pour le nom de fichier CSS nomdustyle.css : impressions, mobile, defaut, gros-caracteres, fond-noir. Ainsi notre variable $nouveau peut prendre l'une de ces valeurs, ou une autre (selon la nomination de vos fichiers CSS). En effet, le style n'est pas toujours le même, puisqu'on peut le changer avec le sélecteur. La valeur stockée dans le cookie peut donc changer, elle est variable et représentée par la variable $nouveau.
valeur-par-defaut est une valeur par défaut pour notre variable $nouveau. En effet, si le cookie n'est pas encore défini (ce qui est le cas lorsqu'un internaute visite pour la première fois le site), il n'a pas encore de valeur. Il en faut pourtant une. Cette valeur est donc un des styles, par exemple celui par défaut. Vous devez donc indiquer par exemple base ou pardefaut ou default. Ce style doit être parfaitement lisible et pratique, pour ne pas obliger l'internaute à en changer.
Conclusion de cette deuxième sous-partie : la nouvelle ligne de code
Voici le code XHTML en entier, pour la partie <head> de vos pages :
Si vous avez tout compris jusqu'à maintenant, c'est très bien :D et vous allez pouvoir laisser en partie reposer vos cerveaux, la partie suivante (la troisième) est la dernière et la plus facile ! Vous y découvrirez comment permettre aux visiteurs de choisir leur style.
Dans le cas contraire :( , la première chose serait de vous plonger sérieusement dans un cours de PHP. En ayant des bases, vous comprendrez plus facilement, plus vite et mieux.
Nous allons tout de suite nous placer du côté de l'internaute et voir comment changer le style CSS depuis une page Web. Il y a deux méthodes : le formulaire et les liens.
Méthode A : le menu déroulant
Le code pour la liste déroulante
<form method="post" action="http://www.mon-site.net/selecteur-style.php">
<p>
<label for="selectiondustyle">Choisissez le style qui vous plaît et appuyez sur le bouton : </label>
<select name="nouveau" id="selectiondustyle">
<option value="defaut">style normal (par défaut)</option>
<option value="gros-caracteres">gros caractères</option>
<option value="fond-noir">fond noir (fort contraste)</option>
<option value="impressions">aperçu avant impression</option>
<option value="mobile">version petits écrans</option>
</select>
<input type="submit" value="Choisir ce style" title="valider le choix de style" />
</p>
</form>
Explications du code du formulaire
action="http://www.mon-site.net/selecteur-style.php" indique vers quelle page va être envoyée l'information du formulaire. Cette information n'est autre que le choix du style, qui est une valeur d'une variable.
for="selectiondustyle" et id="selectiondustyle" indiquent l'étiquette appliquée à la balise <select>. En cliquant sur la phrase « Choisissez le style qui vous plaît et appuyez sur le bouton : » ou la liste « non déroulée », la liste va être « activée », on pourra la parcourir avec le clavier ! :D
On retrouve notre variable avec la mention name="nouveau" dans la balise <select>
Ces personnes doivent remplacer dans le code précédent
valeur est une de nos valeurs pour « $nouveau » (impressions, mobile, defaut, gros-caracteres, fond-noir, opera). Ici, j'ai écrit « valeur » pour indiquer que c'est une valeur de notre variable, mais j'aurais très bien pu écrire à la place nouveau=defaut, comme exemple.
Vous pouvez bien sûr mettre une image à la place du texte du lien. Cette méthode est particulièrement adaptée à un faible nombre de styles CSS différents. Si vous en avez plus que cela, il peut être intéressant de proposer le choix du style via une liste déroulante, car une suite de liens comme celle qui précède peut être « encombrante » ou « lourde » dans la page.
Conclusion de cette troisième sous-partie
Voici les codes en entier, pour la partie <body> de vos pages :
Méthode du formulaire
<form method="post" action="http://www.mon-site.net/selecteur-style.php">
<p>
<label for="selectiondustyle">Choisissez le style qui vous plaît et appuyez sur le bouton : </label>
<select name="nouveau" id="selectiondustyle">
<option value="defaut">style normal (par défaut)</option>
<option value="gros-caracteres">gros caractères</option>
<option value="fond-noir">fond noir (fort contraste)</option>
<option value="impressions">aperçu avant impression</option>
<option value="mobile">version petits écrans</option>
</select>
<input type="submit" value="Choisir ce style" title="valider le choix de style" />
</p>
</form>
Méthode des liens
<a href="http://www.mon-site.net/selecteur-style.php?nouveau=valeur">Choisir le style « valeur »</a>
Celui de Paul SOWDEN ; site www.A List Apart.com (en anglais). Voir un exemple d'utilisation de ce sélecteur sur le site Batraciens.net : Changement de skins CSS.
Un sélecteur rétrocompatible par Daniel Ludwin sur le site www.A List Apart.com (en anglais).
