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") . " 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!