Proposer différentes CSS au choix dans un site wordpress

Fermé

marie_lve Messages postés 4 Date d'inscription vendredi 20 mai 2016 Statut Membre Dernière intervention 21 mai 2016 - Modifié par marie_lve le 20/05/2016 à 22:09
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 21 mai 2016 à 10:09

Bonjour,

J’ai une petite question que je n’arrive pas à résoudre pour un site.

Il s'agit d'un blog wordpress, j'ai fait mon thème à la main.

En pied de page, on peut choisir sa css.
Or, quand on clique sur les différents choix, la css se charge nickel, mais quand on change de page (pour aller sur un article ou sur une autre page) on revient à la CSS initiale.
Comment faire? Je vous joins ce que j'ai inséré dans mon header et dans mon footer pour vous donner une idée :

header :

<?php

if( isset($_GET['style']) ){
$stylesheet_name = $_GET['style'];
}elseif( isset($_COOKIE['feuilleStyle']) ){
$stylesheet_name = $_COOKIE['feuilleStyle'];
}else{
$stylesheet_name = 'simple';
}

$stylesheet_name = preg_replace('#[^a-zA-Z0-9_-]#', '', $stylesheet_name);

unset($_COOKIE['feuilleStyle']);
setcookie( 'feuilleStyle', $stylesheet, time() + (86400 * 30), '/' );

?>
<!DOCTYPE html>
<html <?php language_attributes();?>>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>
<?php bloginfo('name');?>
<?php _e('|');?>
<?php bloginfo('description');?>
</title>

<link href="<?php echo get_stylesheet_uri(); ?>" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" media="screen" title="Style de l'utilisateur" href="<?php echo get_stylesheet_directory_uri() . '/' . $stylesheet_name; ?>.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

footer :

<ul class="differents-styles">
<li><a href="<?php echo esc_url( add_query_arg( 'style', 'bleu' ) );?>">Bleu</a></li>
<li><a href="<?php echo esc_url( add_query_arg( 'style', 'blanc' ) );?>">Blanc</a></li>
<li><a href="<?php echo esc_url( add_query_arg( 'style', 'rouge' ) );?>">Rouge</a></li>
<li><a href="<?php echo esc_url( add_query_arg( 'style', 'vert' ) );?>">Vert</a></li>
</ul>

Encore une fois un grand merci pour votre aide.

A voir également:

Proposer différentes CSS au choix dans un site wordpress
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Liste déroulante de choix excel - Guide
Quel site remplace coco - Accueil - Réseaux sociaux
Site pour vendre des objets d'occasion - Guide

1 réponse

Réponse 1 / 1

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
21 mai 2016 à 08:00

Si j'ai bien compris, tu veux que le visiteur puisse choisir les css de son choix et les garder tout le temps de la visite ?
dans ce cas, il faut utiliser une session start en php sinon a chaque changement de page, c'est comme si tu revenais au choix

personnellement je vois pas trop l'intérêt, 90% des visiteurs ne vont même pas voir qu'ils peuvent changer de css et parmi les 10% restants combien vont l'utiliser ?

Amha, tu ferais aussi bien d'affecter une image de fond différente ( voir des css différentes) selon la catégorie d'articles sans laisser le visiteur choisir ainsi tu créerais des ambiances différentes en adéquation avec la thématique des articles

marie_lve Messages postés 4 Date d'inscription vendredi 20 mai 2016 Statut Membre Dernière intervention 21 mai 2016
21 mai 2016 à 09:42

Bonjour elgazar et un grand merci pour ta réponse.
Tu as tout à fait raison. Plus tard, j'affecterai chaque css à une catégorie différente, c'est une excellente idée. Merci.
En fait, pour le besoin d'un exam, il faut que je montre que je sais laisser le choix aux lecteurs de choisir une css différente.

Je dois donc trouver une solution rapidement à mon problème. J'ajoute que je n'ai que des rudiments théoriques de Php.

Tu me dis de faire une session start. Est-ce à dire que je dois insérer un truc comme ça dans chacun de mes template? Et comment l'adapter dans mon cas précis? Je suis un peu perdue... Un grand merci pour ton aide encore une fois !

<?php
// On démarre la session (ceci est indispensable dans toutes les pages de notre section membre)
session_start ();

// On récupère nos variables de session
if (isset($_SESSION['login']) && isset($_SESSION['pwd'])) {

// On teste pour voir si nos variables ont bien été enregistrées
echo '<html>';
echo '<head>';
echo '<title>Page de notre section membre</title>';
echo '</head>';

echo '<body>';
echo 'Votre login est '.$_SESSION['login'].' et votre mot de passe est '.$_SESSION['pwd'].'.';
echo '<br />';

// On affiche un lien pour fermer notre session
echo '<a href="./logout.php">Déconnection</a>';
}
else {
echo 'Les variables ne sont pas déclarées.';
}
?>

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325 > marie_lve Messages postés 4 Date d'inscription vendredi 20 mai 2016 Statut Membre Dernière intervention 21 mai 2016
Modifié par elgazar le 21/05/2016 à 10:11

plutôt un truc dans ce style, j'ai mis deux pages pour que tu vois le résultat si tu veux tester

le code de la page index.php



<?php
session_start();
if (isset($_POST["style1"])) $_SESSION['css']="style1";
else if (isset($_POST["style2"])) $_SESSION['css']="style2";
if (!isset($_SESSION['css'])) $_SESSION['css']="style1"; // default value
print "<!DOCTYPE html>\n";
?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'].'.css';?>">
</head>
<body>
<div>
<a href="index2.php"> seconde page</a>
</div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<button type="submit" name="style1">Style 1</button>
<button type="submit" name="style2">Style 2</button>
</form>
</body>
</html>

le code de la page index2.php

<?php
session_start();
if (isset($_POST["style1"])) $_SESSION['css']="style1";
else if (isset($_POST["style2"])) $_SESSION['css']="style2";
if (!isset($_SESSION['css'])) $_SESSION['css']="style1"; // default value
print "<!DOCTYPE html>\n";
?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'].'.css';?>">
</head>
<body>
<div>
<a href="index.php"> premiere page</a>
</div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<button type="submit" name="style1">Style 1</button>
<button type="submit" name="style2">Style 2</button>
</form>
</body>
</html>

et les codes css hypersimples (puisque j'inverse seulement les couleurs du fond et de la police

site1.css
body
{
    background-color: black; 
    color: white;
}

site2.css
body
{
    background-color: white; 
    color: black; 
}

Discussions similaires

C'est quoi le site qui remplace coco chat

SITES MARCHANDS NON SECURISES

Coco chat connexion sur mobile, le tchat est fermé ?