Im Zuge des Relaunches mit WordPress hatte ich mir dringend vorgenommen den Styleswitcher zu überarbeiten. Das war nämlich überhaupt nicht optimal gelöst, 3 Dateien waren dafür nötig die verschiedenen Möglichkeiten abzudecken. Dies ist nun alles in einer geregelt worden. Ich stelle dies nun als Tutorial hier zur Verfügung, allerdings nur in einer vereinfachten Form, nur eine CSS ist zum Austausch vorgesehen. Es wird keiner wirklich so wie ich mit separater Schriftgrößen‑ und Layoutänderung brauchen.
Fangen wir an, als erstes benötigen wir verschiedene CSS-Dateien die im Themeordner abgelegt werden, ich habe im Beispiel meine Namen verwendet morgen.css, abend.css und blank.css, eine styles.css sollte dort schon liegen. Was da drin zu stehen hat ist hier nicht Thema.
Nun geht’s ans PHP, wir legen eine switcher.php im Themeordner ab, mit folgendem Inhalt:
<?php
if (isset($_GET["set"])) {
$cookie_name = "site-style";
$lifetime = time()+60*60*24*30;
$cookie_domain = "olaf-bosch.de";
$set = $_GET["set"];
if ($set == "abend" || $set == "morgen" || $set == "blank" || $set == "style") {
setcookie($cookie_name, $set, $lifetime, "/", $cookie_domain, 0 );
header ("Location: http://olaf-bosch.de/wp-content/themes/obosch/switcher.php");
exit;
} else {
echo "<h1>Mach dich vom Acker, du Hacker !!!!</h1>";
exit;
}
} else {
if (isset($_COOKIE["site-style"])) {
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") plavix generic. " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Cache-Control: private");
header("Pragma: no-cache");
header("Content-Type: text/html; charset=UTF-8");
header("Vary: Accept");
if ($_SERVER["HTTP_REFERER"]) {
$url = $_SERVER["HTTP_REFERER"];
header ("Location: $url");
exit;
} else {
header ("Location: http://olaf-bosch.de/");
exit;
}
} else {
header ("Location: http://olaf-bosch.de/experimentelles/kein-cookie/");
exit;
}
}
?>
Was macht nun dies Teil? Wenn es mit dem Parameter ?set=abend aufgerufen wird, versucht es einen Cookie mit einer Lebensdauer von 30 Tagen abzulegen. Es wird geprüft ob nicht etwa ein Spassvogel versucht Unfug anzustellen, wenn ja dann wird er sanft auf sein Vergehen hingewiesen. Sollte die Angabe korrekt sein wird der Browser dazu aufgefordert die switcher.php erneut zu laden, dann allerdings ohne den Parameter. Nun wird geprüft ob es gelungen ist den Cookie abzulegen, ist der Keks nun vorhanden und zusätzlich auch noch ein Referer wird die URL aus dem Referer aufgerufen. Dabei werden sinnigerweise Header gesetzt die einen echten Reload erzwingen, sonst könnte es dazu kommen, dass die Seite aus dem Cache geladen wird und die Änderungen nicht übernommen werden. Ohne Referer wird an die Startseite verwiesen. Ist es nicht gelungen den Cookie zu finden wird eine Hinweisseite angezeigt.
Anzupassen wären hier alle Pfade (4) und in Zeile 7 die Namen der CSS-Dateien, sind es bei euch nur 2 dann sehe diese Zeile etwa so aus:
if ($set == "NAME" || $set == "style") {
Nun müssen wir WordPress mitteilen auch noch diese Daten zu benutzen, dazu öffnen wir die header.php aus dem Themeordner. Ziemlich weit oben suchen wir die Stelle wo die style.css eingebunden ist. Das sieht meist so aus:
<?php bloginfo('stylesheet_url'); ?>
In die Zeile davor ergänzen wir:
<?php
if (isset($_COOKIE["site-style"])){
$site_style = htmlspecialchars(stripslashes($_COOKIE['site-style']));
$site_style = $site_style.".css";
} else {
$site_style = "style.css";
}
?>
Dieser Schnippsel prüft nun bei jedem Seitenaufruf auf den Cookie, ist er vorhanden nimmt er dessen Inhalt und erzeugt daraus den Namen der gewünschten CSS, im Beispiel von oben dann abend.css. Auch Cookies können manipuliert werden deshalb behandeln wir ihn speziell. Ist der Cookie nicht da bleibt alles wie gehabt und die styles.css wird verwendet.
Nun gehen wir wieder in die Zeile die wir vorher gefunden haben und ersetzen das Teilchen mit dem:
<?php bloginfo('template_url'); ?>/<?php echo $site_style; ?>
Die gesamte Zeile müsste dann ungefähr so aussehen, kann ich hier leider nicht genau angeben, weil es da verschiedene Möglichkeiten gibt:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/<?php echo $site_style; ?>" type="text/css" media="screen,projection" />
Damit funktioniert das ganze erst einmal, wer möchte kann jetzt erst mal testen ob es geht indem er die URL von switcher.php manuell aufruft und die verschiedenen Parameter von Hand setzt. Verlief der Test zufriedenstellend gehen wir an die sidebar.php, dort müssen nun die Links für den Styleswitcher eingefügt werden, bei mir ungefähr so:
<ul id="switch">
<li><a href="<?php bloginfo('template_url'); ?>/switcher.php?set=abend">abend</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/switcher.php?set=morgen">morgen</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/switcher.php?set=blank">ohne</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/switcher.php?set=style">standard</a></li>
</ul>
Wobei natürlich eure Namen für die CSS bei set= einzusetzen wären und die Anzahl der Links auf die gewünschten CSS anzupassen.
Viel Spass beim nachbauen, happy switching…
Am 7. Februar 2009 um 18:47 Uhr schrieb toni:
hi, das war hilfreich, doch habe ich es entweder nicht richtig hinbekommen, denn irgendwie scheint er jetzt nurnoch aus dem cache zu laden. erst wenn ich den browser neu starte, sehe ich den neuen stylsheet bzw die veränderung. wenn ich nun aber mein css veränder, lädt er das nichtmehr, sondern nur die alte version… woran kann das liegen? oder liegt das am firefox? scheint bei anderen seiten nicht der fall zu sein. lg
Am 19. Februar 2009 um 11:13 Uhr schrieb Klaus:
Habe deinen Styleswitcher bei mir für den Wechsel der Schriftgröße eingebaut – und es funktioniert! Super!
Vielen Dank!
Am 21. Juni 2012 um 10:44 Uhr schrieb Janine87:
Vielen Dank für den Stylewitcher habe ihn auch gerade genauso wie Klaus für den Wchsel der Schriftgröße eingebaut und es läuft direkt ohne weitere Probleme, vielen dank nochmals!
Am 30. August 2012 um 09:25 Uhr schrieb Jan:
Vielen dank, werde ich gleich mal ausprobieren.
Eine Frage ist mir noch beim lesen gekommen:
Ich wuerde gerne eine von vier Zufallsfarben fuer den Hintergrund laden lassen bei jedem Besuch, aber nicht bei jedem Seitenladen. Faellt mir gerade keine Loesung ein.
UND
Man soll die moeglichkeit haben eine der 4 Farben auch manuell auswaehlen zu koennen.
Hast du da eventuell einen Tip fuer mich?
Danke vielmals!
Am 30. August 2012 um 12:26 Uhr schrieb Olaf:
Hi Jan,
wenn du die Farben in den vorhandenen CSS setzen kannst dann brauchst du nur in der header.php statt dem obigen folgenden Code verwenden:
< ?php if (isset($_COOKIE["site-style"])){ $site_style = htmlspecialchars(stripslashes($_COOKIE['site-style'])); $site_style = $site_style.".css"; } else { $styles = array("abend", "morgen", "blank", "style"); $rand_style = array_rand($styles, 2); $site_style = $styles[$rand_style[0]].".css"; $cookie_name = "site-style"; $lifetime = time()+60*60*24*30; $cookie_domain = "olaf-bosch.de"; setcookie($cookie_name, $styles[$rand_style[0]], $lifetime, "/", $cookie_domain, 0 ); } ?>Ist kein Cookie vorhanden verwende einen zufälligen und setze diesen in den Cookie, frei übersetzt 😉 Achtung, nicht getestet!!!
Am 31. August 2012 um 10:00 Uhr schrieb jan:
dankesehr! hat nicht auf anhieb funktioniert. Die zufallssache per array wollte irgendwie nicht, habs jetzt nicht so elegant geloest aber funkt. und das ganze darf nicht in den head Bereich, sondern muss vor jeglichem html stehen, ansonsten gibts nen fehler ala „cannot modify header…“
danke vielmals!
Am 31. August 2012 um 10:01 Uhr schrieb jan:
if (isset($_COOKIE["site-style"])){ $site_style = htmlspecialchars(stripslashes($_COOKIE['site-style'])); $site_style = $site_style.".css"; } else { $set = rand(1,4); if ( $set == "1") { $set = "blau"; } if ( $set == "2") { $set = "rot"; } if ( $set == "3") { $set = "gruen"; } if ( $set == "4") { $set = "grau"; } $site_style = $set.".css"; $cookie_name = "site-style"; $lifetime = time()+60*60; $cookie_domain = "DOMAIN.com"; setcookie($cookie_name, $set, $lifetime, "/", $cookie_domain, 0 ); }Am 31. August 2012 um 12:27 Uhr schrieb Olaf:
Jo, dadurch das wir hier den Cookie setzen müssen wir das ganz oben in die header.php einsetzen, klar sonst Fehler. Mein Fehler mit dem Array wird so behoben:
array_rand($styles, 1); zu array_rand($styles, 2);
Am 6. Oktober 2012 um 20:57 Uhr schrieb andrej:
hallo und danke für das tutorial!
funktioniert bei mir soweit ganz gut. ich kann die jeweiligen styles auswählen. ich habe zu testzwecken einfach mal die vorhandene style.css 5 mal kopiert und in meinen theme-ordner eingefügt und umbenannt. und zwar nach dem schema, 1.css, 2.css, usw.
merkwürdigerweise laesst sich nun die seite nur mit der original-datei (style.css) ordnungsgemäß laden. bei den anderen sieht die seite aus, als ob irgendwas nicht nachgeladen wird. und das, obwohl es sich, wie gesagt, um identische inhalte handelt. woran kann dies liegen?
Am 6. Oktober 2012 um 22:23 Uhr schrieb andrej:
Ok, hat sich erledigt. Jetzt läufts – ich schätze mal, da wollte Freund Cache nicht so mitspielen.
Ich bin begeistert und freu mich schon darauf, die Styles anzupassen.
Am 29. Juni 2014 um 04:31 Uhr schrieb Internetagentur Browserwerk | Gerrit:
Coole Sache. So lassen sich barrierefrei Webseiten sehr gut mit WP bauen, danke für´s Teilen.