Da hat man nun drei verschiedene Layouts für seine Webseite gebastelt, hat in alle drei viel Zeit & Mühe gesteckt, und dann kann man sich partout nicht entscheiden: welches soll denn nun verwendet werden?
Dank PHP müssen nun keine Entwürfe in die Mülltonne fliegen – man verwendet einfach einen sogenannten Styleswitcher, sodass der Besucher selbst entscheiden kann, mit welchem der verschiedenen zur Verfügung gestellten Layouts er die Seite denn nun betrachten möchte.

Übrigens kann so ein Styleswitcher nicht nur ein nettes Feature sein, um verschiedene Layouts präsentieren zu können, sondern er kann auch ganz konkret zur Barrierefreiheit einer Seite beitragen. So könnte man zum Beispiel extra für Besucher mit Beeinträchtigungen des Sehvermögens ein Layout mit starken Kontrasten sowie größeren Symbolen und einer größeren Schrift bereitstellen.

wie funktioniert’s?

In Kurzform: das Ganze realisieren wir, indem zunächst – logisch – mindestens zwei verschiedene Stylesheets erstellt werden. Dann bauen wir auf der Webseite einen Link ein, über den das Layout gewechselt werden kann. Damit der Browser des Benutzers sich diese Entscheidung merkt und auch beim nächsten Besuch wieder den ausgewählten Style verwendet, speichern wir ein Cookie auf dem Rechner des Besuchers.

Voraussetzungen

Voraussetzung Nr. 1 ist, dass ihr Layout und Inhalt getrennt habt – sprich, dass ihr sämtliche Formatierungen über ein externes (!) Stylesheet vornehmt und nicht im HTML (wie etwa durch das font-Tag).

Voraussetzung Nr. 2 ist, dass bei euch PHP läuft.
Man kann den Styleswitcher zwar auch über JavaScript realisieren, aber damit sperrt ihr all jene Benutzer aus, die JS deaktiviert haben. Hier folgt nun also ein Tutorial, wie ihr das Ganze serverseitig über PHP umsetzen könnt. :-)

Wichtig: Credits gehen an yablo.de, dessen Anleitung mir beim Schreiben dieses Tutorials geholfen hat!

die Stylesheets

… werden ganz gewöhnlich erstellt und abgepeichert, beispielsweise unter den Namen style1.css und style2.css.

die einzelnen Header-Dateien

Wir brauchen nun so viele Header-Dateien, wie wir Layouts haben.
Sinnvollerweise nennen wir die Header-Datei für den ersten Style header1.php, die für den zweiten Style header2.php und so weiter. Hier werden nun die einzelnen Stylesheets verlinkt, wobei das Stylesheet, das zum jeweiligen Layout gehört – bei header1.php also style1.css – mit dem Attribut rel=”stylesheet” versehen werden, während die anderen Styles das Attribut rel=”alternate stylesheet” sowie ein title-Tag verpasst bekommen.

<link rel="stylesheet" type="text/css" media="screen" href="style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="style2.css" title="zweiter Style" />

Wenn der User nun, wie bei unserem Styleswticher, ein anderes Layout auswählt, wird der bevorzugte Style (in diesem Falle: style1.css) durch den alternativen (style2.css) überschrieben.

Im Grunde genommen wären wir jetzt fertig – der User klickt, und schon wechselt der Style.
Aaaber… das Leben eines Webdesigners wäre nicht so schön, wie es ist, gäbe es nicht den Internet Explorer. :-) Der kommt damit nämlich nicht so ganz klar. Also erweitern wir diesen bis jetzt wirklich einfachen Code und erhalten dadurch obendrein die Möglichkeit, dass der ausgewählte Style auch beim Besucher gespeichert wird, sodass er beim nächsten Besuch der Seite automatisch wieder gesetzt wird.

Wir merken uns also, dass wir jetzt die style1.css, style2.css, die header1.php sowie header2.php haben und basteln fröhlich weiter. :-)

die switch_header.php

Jetzt erstellen wir eine Datei namens switch_header.php, welche die einzelnen durchnummerierten Headerdateien verwaltet:


<?php
$styledatei = "header";
$styledatei .= $style;
$styledatei .= ".php";
include $styledatei;
?>

jetzt gibt’s Kekse – die cookie.php

Als nächstes kommt die cookie.php an die Reihe, die dafür sorgt, dass die Stylewahl des Benutzers auf seinem Rechner hinterlegt und für künftige Besuche bereitgestellt wird.

<?php
$gesamtestyles = 2;
$standardstyle = 1;
if (isset($_REQUEST['neuerstyle'])) {
$neuerstyle = (int)$_REQUEST['neuerstyle'];
if ( ($neuerstyle<1) OR ($neuerstyle>$gesamtestyles) ) $neuerstyle = $standardstyle;
} elseif (isset($_REQUEST['style'])) {
$neuerstyle = (int)$style;
if ( ($style<1) OR ($style>$gesamtestyles) ) $neuerstyle = $standardstyle;
} else $neuerstyle = $standardstyle;
$style = $neuerstyle;
setcookie ('style', "", time() - 3600);
setcookie ('style', $neuerstyle, time()+(86400*365),'/');
setcookie ('style', $neuerstyle, time()+(86400*365),'/','.deinedomain.de/');
$style = $neuerstyle;
?>

Die Zahl der insgesamt verfügbaren Styles musst du in der zweiten Zeile noch anpassen, ebenso wie die Adresse deiner Webseite ganz unten im Quelltext.

index.php

So. Deine Indexseite – also die Seite, die du bisher schon hattest – musst du nun mit der cookie.php und den Styles verbinden. Dazu notierst du ganz oben – als allererstes, noch vor der Doctye-Angabe:
<?php include('cookie.php'); ?>
Die Stylesheets hast du ja in den einzelnen Headerdateien eingebunden, die wiederum durch die switch_header.php aufgerufen werden – folglich muss nun nur noch die switch_header.php eingebunden werden. Dies nimmst du innerhalb des head-Tags vor.
<?php include('switch_header.php'); ?>

aufrufen

Die verschiedenen Styles können nun wie folgt aufgerufen werden:

http://deinedomain.de/index.php?neuerstyle=1

http://deinedomain.de/index.php?neuerstyle=2

Hierzu bietet es sich an, ein Dropdown-Menue einzubauen oder aber – bei wenigen Styles – ganz normale Links.