Avoir plusieurs designs

Qui n'a jamais eu envie d'avoir plusieurs designs pour son site? C'est possible grâce au PHP et aux cookies!


La création des fichiers CSS


En premier lieu, vous devez mettre tous les styles de vos pages dans un seul fichier CSS. Vous aurez un fichier CSS pour chaque design.

: vous ne pourrez pas changer beaucoup d'éléments votre site sauf la position du texte, les couleurs, l'écriture,... vous ne pourrez en aucun cas afficher une image à la place d'une autre (sauf en arrière-plan).

Lorsque vous aurez créé vos fichiers CSS, vous aurez fait le plus simple et surtout le plus long. Le problème qui se pose maintenant est que chaque visiteur doit pouvoir utiliser un design qui lui plait et ne pas le remettre à chaque fois qu'il vient sur le site.

Comment faire?

Pour enregistrer le choix de design; vous allez utiliser un cookie qui gardera en mémoire le design du visiteur. Lorsque il vient sur le site, on regarde s'il a déjà un cookie avec son design et on affiche ses préférences.

Bon, codons cela, ce n'est pas très difficile. Si vous ne savez plus comment utiliser les cookies, rendez-vous sur cette page. C'est parti!

<?php
if(isset($_COOKIE['design'])){//si le cookie existe
        if($_COOKIE['design']=="base"){
        /*on regarde si c'est le design de base et on le stocke dans une variable*/
        $css = "base.css";
        }
        else{/*sinon on récupère le contenu du cookie et le prend comme nom de fichier CSS en lui ajoutant le .css*/
        $css = $_COOKIE['design'].'.css';
        }
}
else{//si le cookie n'existe pas, on en crée un
$duree_vie = time()+365*24*3600;
//durée de vie d'un an
setcookie('design', 'base', $duree_vie);
//cookie de base
}
?>
<html><head><title>mon tit</title>
<?php/*on affiche le design que le visiteur a choisi en affichant la variable $css.*/
echo'<link rel="stylesheet" type="text/css" href="'.$css.'" />';
?>

Lorsque le visiteur arrivera, c'est le design qu'il a choisi qui s'affichera.

Choisir son design


Maintenant que votre visiteur peut afficher son design, il serait bien qu'il puisse le choisir. Nous allons donc créer la page choix_design.php. Nous allons afficher les différents designs qui existent dans cette page ainsi qu'un lien à côté d'un formulaire qui enverra le design choisi. Un script créera alors un cookie qui portera le nom du fichier CSS (sans le .css) pour lequel a opté le visiteur. Pour cette page, je vous conseille de faire des captures d'écran des différents designs et de les afficher en miniature pour que l'on puisse se faire une idée de tous les designs. Sinon, il suffit de faire un lien qui enverra le nom du fichier CSS choisi à cette même page qui créera un cookie design.

Mais comment faire passer une variable avec un lien? Normalement, un lien envoie vers un page et c'est tout.

Pour envoyer une information par un lien, il suffit de mettre un point d'interrogation après l'URL, le nom de la variable et sa valeur. Voici un exemple de lien avec une variable nommée site et qui contiendra le mot web:

<a href="ma_page.php?site=web">ma page</a>

Pour PHP, ça revient au même que d'écrire $site = "web";. Vous pourrez donc récupérer le choix du design par un simple lien.
C'est parti, voici le code!

<?php
$lien = $_GET['design'];
if($lien!=""){/*si on a déjà choisi un design*/
$duree_vie = time()+365*24*3600;//1 an
setcookie('design', $lien, $duree_vie);
//on crée le cookie et on le redirige vers l\index
header('Location:index.php');
}
else{/*si le visiteur n a pas encore choisi de design, on affiche le formulaire de choix*/
?><html><head><title>Changement de desing</title>
<link rel="stylesheet" type="text/css" href="base.css" />
<meta name="robots" content="noidex" />
<!--Il ne sert à rien d\indexer cette page; elle ne vous apportera aucun visiteurs!-->
<!--Vous pouvez bien entendu mettre le code choix de design pour afficher le design préféré du visiteur sur cette
page.  Ce code se placera avant tout.-->
</head><body>
<div align="center"><h3>Changer de design</h3></div><br /><br />
<a href="images/design1.jpg"><img src="images/design_mini1.jpg" alt="design1" /></a>
<a href="choix_design.php?design=design1">Choisir ce design</a><br /><br />
<a href="images/design2.jpg"><img src="images/design_mini2.jpg" alt="design2" /></a>
<a href="choix_design.php?design=design2">Choisir ce design</a>
....
</body></html><?php
}
?>

Grâce à ce formulaire, le visiteur pourra choisir entre le design 1 (design1.css) et le design 2 (design2.css). Il ne tient qu'à vous de modifier cette page comme vous le souhaitez. Pour ajouter un desing, il vous suffit de configurer la page choix_design.php.


Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3968 secondes.
Retour en haut de la page
Imprimer cette page