PHP-Styleswitcher

Auf meiner Tolkien-Website setze ich schon seit längerem einen PHP-Styleswitcher, der auf Sessions aufbaut, ein. Vorgestern hat mir Tyll Zybura eine Lösung zugesendet, die zwar einen ähnlichen Aufbau hat, aber auf Cookies basiert.

Was ein Styleswitcher ist, wie die Codes aussehen etc. wird im Rest des Berichtes erklärt

Was ist ein Styleswitcher?

Styleswitcher sollen dem User bzw. dem Leser ermöglichen eine Website in verschiedenen Darstellungen zu nutzen. Dabei sind viele Möglichkeiten denkbar. Sei es nur die Website in verschiedenen Farben, in veränderter Schriftgröße oder in anderem Layout auszugeben.

Und warum das ganze?

Viele Besucher einer Seite haben auch verschiedene Vorlieben und Bedürfnisse. Der eine mag lieber dunkle Templates und der andere lieber eine etwas größere Schrift und manchmal kann sich der Webmaster nicht für ein Layout entscheiden und präsentiert der Welt seine Website in 6-facher Ausführung :-).

Voraussetzungen

Am besten und am einfachsten ist es wenn die Webpräsenz eine vollständige Trennung der Struktur des Textes (HTML) und des Layouts (CSS) besitzt. Denn dann muß man nur die externe CSS-Datei austauschen. Wenn die Homepage diese Trennung nicht hat, dann wird es schwierig und mühsam.

Welche Techniken kommen zum Einsatz?

Es gibt sehr viele Techniken, die zum Einsatz kommen können. Zum einen wären dies die üblichen Kandidaten (PHP, Java Script, ASP etc.) zum anderen könnte man dies auch “manuell” lösen und einfach die Seite in dem jeweiligen Layout neu erstellen, in z. B. einen Unterordner ablegen und auf der Hauptseite verlinken. Dann könnten die Besucher über den Link zu dem anderen Design gelangen.

Die Probleme bei dieser Lösung ergeben sich mehr oder weniger von alleine. Der Arbeitsaufwand ist riesig, es wird viel mehr Speicherplatz verbraucht und da die Seiten statisch vorliegen und den gleichen Inhalt haben, können die Suchmaschinen einem dies übel nehmen. Da die sog. “Mirrorsites” teilweise als Spam gewertet werden und wenn man Pech hat, fliegt man ganz aus der Suchmaschine raus. Der einzige Vorteil bei dieser Lösung ist, daß man hier nicht auf die Trennung von Inhalt und Layout achten muß.

Daher lieber Inhalt und Layout trennen und auf eine Scriptsprache zurückgreifen.

PHP-Lösungen

Bei PHP sind mir drei verschiedene Ansätze bekannt. Der erste Ansatz ist aus dem Buch “CSS-Praxis” von Kai Laborenz, die zweite Lösung ist der ersten ähnlich und basiert auf Cookies anstatt auf Sessions. Die dritte Lösung stammt von Dr. Web.

Erste Lösung

Von: www.css-praxis.de/scripte.html

Folgender Code sollte ganz am Anfang (vor der Doctype Angabe) der HTML-Datei angebracht werden:

<?php
session_start();
if ( isset($_GET['style']) ) {
$_SESSION['style'] = $_GET['style'];
}
elseif ( !isset($_SESSION['style']) ) {
$_SESSION['style'] = 'default';
}
?>

Weiter unten im Kopfbereich kommt die zweite Angabe:

<style type="text/css">
<!--
@import url("css/<?php echo $_SESSION['style']?>.css");
-->
</style>

oder alternativ:

<link rel="stylesheet" type="text/css" href="css/<?php echo $_SESSION['style']?>.css">

Und auf die Seite wo die verschiedenen Styles ausgelöst werden, kommen folgende Angaben:

<a href="<?php echo $_SERVER['PHP_SELF']?>?style=default">Das Standard-Design</a>
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=style1">Design 1</a>
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=style2">Design 2</a>

Diese Lösung basiert auf den sog. Sessions (Sitzungen). Ganz am Anfang wird die Session gestartet und es wird geprüft ob schon ein Stil ausgesucht wurde. Wenn nicht, dann erscheint die Website im Standardstil. Beim Anklicken des jeweiligen Links wird der Stil ausgetauscht und die Seite erscheint im jeweiligen Design.

Dadurch, daß diese Technik keine Cookies nutzt, wird bei dem nächsten Besuch das Standard-Design erscheinen. Eine Lösung wäre z. B. den jeweiligen Switch-Link als Lesezeichen zu setzen. Somit wird beim nächsten Besuch bzw. beim betätigen des Lesezeichens der jeweilige Style erscheinen.

Einsatz von Cookies

Wie schon oben erwähnt, beim nächsten Besuch hat man wieder das Standarddesign. Will man es aber so gestalten, daß sich der Browser erinnert welches das Lieblingslayout des Besuchers ist, dann muß man auf Cookies zugreifen. Cookies sind kleine Textdateien und dienen dem Browser als eine Art Notizzettel (wann war ich das letzte mal auf diese Seite, Einstellungen etc.). Denn das “HTTP-Protokoll ist vergesslich und kann keine solche Angaben speichern.

Folgender Code sollte ganz am Anfang (vor der Doctype Angabe) der HTML-Datei angebracht werden:


<?php
if(isset($_GET['style'])) {
setcookie("stylekeks", $_GET['style'], time()+3600, "/");
}
elseif(!isset($_GET['style'])) {
if(isset($_COOKIE['stylekeks'])) {
$style = $_COOKIE['stylekeks'];
}
else {
$style = 'perun';
}
}
?>

Weiter unten im Kopfbereich kommt die zweite Angabe:

<style type="text/css">
<!--
@import url("css/<?php echo $style?>.css");
-->
</style>

oder alternativ:

<link rel="stylesheet" type="text/css" href="css/<?php echo $style?>.css">

Und auf die Seite wo die verschiedenen Styles ausgelöst werden, kommen folgende Angaben:

<a href="<?php echo $_SERVER['PHP_SELF']?>?style=default">Das Standard-Design</a>
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=style1">Design 1</a>
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=style2">Design 2</a>

Seit heute setze ich diese Lösung ein. Denn seit dem letzten Serverumzug gab es änderungen im handling mit den Sessions. Das Ergebnis war, daß ich sehr oft auf der Tolkien-Seite unschöne Effekte hatte. Denn die Sessions-ID (eine sehr lange Zeichenkette mit mehr als 30 Zeichen) wurde im Adressfeld des Browser und in der ‘Brotkrümel’-Navigation angezeigt. Zudem hat der W3C-Validator über diesen Effekt immer gemeckert.

Dritte Lösung

Von: www.drweb.de

<?php
if($style=="1") {echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"eins.css\">";}
if($style=="2") {echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"zwei.css\">";}
if($style=="3") {echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"drei.css\">";}
?>

Und auf die Seite wo die verschiedenen Styles ausgelöst werden, kommen dementsprechend folgende Angaben:

<a href="linker.php?style=1">Seite neu formatieren 1</a><br>
<a href="linker.php?style=2">Seite neu formatieren 2</a><br>
<a href="linker.php?style=3">Seite neu formatieren 3</a><br>

Mit dem Betätigen eines Links wird die jeweilige Variable übergeben und dementsprechend die passende CSS-Datei eingesetzt. Über den praktischen Nutzen dieser Lösung kann ich nichts sagen, da ich bis jetzt nur die erste Lösung getestet habe. Der Test dieser Technik auf www.drweb.de sagt nur aus, daß diese Technik funktioniert, aber nicht z. B. wie "beständig" (wie lange hält der Switch an) die Lösung ist.

Andere Techniken

Soweit ich weiß sind Styleswitcher in Java Script und in ASP realisiert. Drei Ansätze zu der Java Script-Lösung gibt es unter folgenden Adressen:

• www.stichpunkt.de
• www.drweb.de
• www.css.fractatulum.net

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• Keine verwandten Beiträge