./ YaBlo

Tutorial: PHP-Styleswitcher

Vornweg: Der PHP-Styleswitcher basiert auf dem Code von How do you make a website skinnable?. Ich hab’ dabei nur einige kleine Änderungen durchgeführt, damit das Script bei mir lauffähig wird.

Der Styleswitcher funktioniert per PHP und speichert beim User ein Cookie mit einer Lebensdauer von einem Jahr. Aktiviertes Javascript beim Besucher ist nicht nötig. Ich setze voraus, dass PHP auf dem Server installiert ist und ausserdem, dass man mindestens zwei verschiedene CSS-Styles hat, zwischen den man wechseln möchte. Mit diesem Switcher kann man jedoch auch ohne einen Wechsel der CSS-Dateien das Layout wechseln; wie erklär’ ich aber erst am Ende.

Als erstes läd man sich die Datei herunter und entpackt diese. Diese beinhaltet eine cookie.php und eine header.php. Dazu später mehr.

1. headerfiles – header(stylenummer).php

Angenommen man möchte zwischen 3 Styles wählen können, dann muss man 3 Dateien anlegen: header1.php, header2.php und header3.php. In diesen headerfiles stehen nun die zu wählenden CSS-Dateien. Z.B. könnte in der header1.php folgendes stehen:

<link rel="stylesheet" type="text/css" href="/link/zu/blau.css" title="Blau" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/rot.css" title="Rot" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/gelb.css" title="Gelb" media="screen" />

Der Link zur CSS-Datei muss von der index.php aus gesehen werden und nicht von dem jeweiligen headerfile. Die Angaben der zwei anderen alternativen CSS-Dateien macht insofern Sinn, dass im Opera und im Mozilla/Firefox die Styles auch im Browser gewechselt werden können ohne eine Cookie zu speichern (somit allerdings auch nur für die Zeit der Sitzung). Die header2.php müsste demnach etwa so aussehen:

<link rel="stylesheet" type="text/css"  href="/link/zu/rot.css" title="Rot" media="screen" />
<link rel="alternate stylesheet" type="text/css"  href="/link/zu/blau.css" title="Blau" media="screen" />
<link rel="alternate stylesheet" type="text/css"  href="/link/zu/gelb.css" title="Gelb" media="screen" />

2. header.php

Diese headerfiles (header1.php, header2.php usw.) speichert man am besten zusammen mit der heruntergeladenen header.php in einem Verzeichnis ab, muss man aber nicht.

<?php

$stylefile = "/verzeichnis/mit/der/header"; 
$stylefile .= $style;
$stylefile .= ".php";
//hier wird eine header(stylenummer).php angegeben
//also zum Beispiel /verzeichnis/mit/der/header1.php
//das Verzeichnis ist relativ zur header.php

include $stylefile;
//und hier wird dann die jeweilige headerNr.php 
//automatisch eingefügt

?>

Die header.php ist dafür da, die verschiedenen headerfiles an die Seite zu übermitteln. Ein headerfile hiesse z.B. header1.php für den Style Nr.1 und header2.php für den Style Nr.2. Am besten man legt die header.php mit den headerfiles, also header(stylnummer).php, in ein und dasselbe Verzeichnis. Dann würde die erste Zeile oben nur lauten:

$stylefile = "header";

3. cookie.php

Die cookie.php speichert man am besten im Hauptverzeichnis der Webseite, also dort, wo die index.php liegt.
Der Inhalt:

 <?php

$total_styles = 3;
//die Anzahl der vorhandenen Styles
$default_style = 1;
//der Standartstyle, wenn die Seite zum ersten mal besucht wird

if (isset($_REQUEST['newstyle'])) { 
  $newstyle=(int)$_REQUEST['newstyle'];
  if ( ($newstyle<1) OR ($newstyle>$total_styles) )
    $newstyle=$default_style;
} elseif (isset($_REQUEST['style'])) {
  $newstyle=(int)$style;
  if ( ($style<1) OR ($style>$total_styles) )
    $newstyle=$default_style;
  } else $newstyle=$default_style;
//hier wird ein evtl. gesetztes Cookie
//ausgelesen und ueberprueft,
//ob einer und wenn, welcher Style gewaehlt wurde 

$style=$newstyle;
setcookie ('style', "", time() - 3600);
setcookie('style',$newstyle,time()+(86400*365),'/');
setcookie('style', $newstyle,time()+(86400*365),'/','.www.deineseite.de');
$style=$newstyle;
//ein Cookie namens "style" mit einer Lebensdauer von
//einem Jahr und dem gewaehlten Style wird gesetzt

?>

In dieser Datei muss die Anzahl der vorhanden und zu wechselnden Styles, sowie der Standartstyle eingestellt werden. Der Standartstyle ist jener welcher, den der Besucher sieht, wenn er das erste mal die Seite besucht oder seine Cookies gelöscht hat. Ebenso sollte in der Datei auch die Domain (www.deineseite.de) eingetragen werden, von der das Cookie stammt.

4. index.php

Wie bindet man das alles nun in die Seite ein?
Ganz einfach:
als erstes noch vor der DOCTYPE-Angabe also in die allererste Zeile wird die cookie.php includiert mit:

<?php include('cookie.php'); ?>

Diese muss deswegen in die erste Zeile, weil das sonst mit den Cookies nicht klappt.
Die header.php muss aber auch noch irgendwo hin. Diese fügt man einfach da ein, wo sonst die Angabe für die CSS-Datei war (weil dort wird es ja auch wieder durch die header.php reingeschrieben):

<?php include('/link/zur/header.php'); ?>

Um zwischen den Styles nun zu switchen, fügt man solche Links auf der Seite ein:

<a href="index.php?newstyle=1">verdammt cooler Style</a><br />
<a href="index.php?newstyle=2">boa, noch geilerer Style</a><br />
<a href="index.php?newstyle=3">Isch krieg 'ne Krise, best style ever seen on this world</a>

Fertig.

5. Beispiel

Hier auf yablo.de sieht das ganze so aus.
Meine Datein in der Verzeichnisstruktur ist in etwa so angelegt:

/ein/paar/server/pfade/www.yablo.de/public_html/
Hier liegen die index.php und die cookie.php.

/ein/paar/server/pfade/www.yablo.de/public_html/headerfiles/
Hier liegen header.php, header1.php, header2.php und header3.php.

/ein/paar/server/pfade/www.yablo.de/public_html/css/parzifal/parzifal.css
/ein/paar/server/pfade/www.yablo.de/public_html/css/gruen/gruen.css
/ein/paar/server/pfade/www.yablo.de/public_html/css/einfach/einfach.css

Hier befinden die einzelnen CSS-Dateien.

Meine index.php oder das template:

<?php include('cookie.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="de" lang="de">
<head>
<meta name="generator" content="XE/3 0.6" />
<title>YaBlo</title>
<meta http-equiv="Content-Type" content="text/html; 
charset='iso-8859-1'" />
<meta name="title" content="YaBlo" />
<meta name="author" content="Trencavel" />
<meta name="publisher" content="Trencavel" />
<meta name="copyright" content="YaBlo" />
<meta name="revisit" content="after 3 days" />
<meta name="description" content="YaBlo" />
<meta name="abstract" content="Weblog von Trencavel" />
<meta name="page-topic" content="Weblog" />
<meta name="audience" content="all" />
<meta name="robots" content="index,follow" />

<?php include('./headerfiles/header.php'); ?>

<div id="header">
<!-- end of 'header' --></div>
...

Meine headerfiles liegen im Verzeichnis (von der index.php aus gesehen) /headerfiles.
Meine header.php zeigt nun auch, das meine headerfiles (z.B. header1.php) im gleichen Verzeichnis wie die header.php liegen:

<?php

$stylefile = "header"; 
$stylefile .= $style;
$stylefile .= ".php";

include $stylefile;

?>

Meine cookie.php sieht so aus:

<?

$total_styles = 3;
$default_style = 3;

if (isset($_REQUEST['newstyle'])) { 
  $newstyle=(int)$_REQUEST['newstyle'];
  if ( ($newstyle<1) OR ($newstyle>$total_styles) ) 
    $newstyle=$default_style;
  } elseif (isset($_REQUEST['style'])) {
    $newstyle=(int)$style;
  if ( ($style<1) OR ($style>$total_styles) ) 
    $newstyle=$default_style;
} else $newstyle=$default_style;
//hier wird ein evtl. gesetztes Cookie ausgelesen und ueberprueft,
//ob einer und wenn, welcher Style gewaehlt wurde 

$style=$newstyle;
setcookie ('style', "", time() - 3600);
setcookie('style',$newstyle,time()+(86400*365),'/');
setcookie('style',$newstyle,time()+(86400*365),'/','.www.yablo.de');
$style=$newstyle;

?>

Meine header1.php:

<link rel="stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/parzifal/parzifal.css" title="Parzifal"  media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/gruen/gruen.css" title="Gruen" media="screen, projection" />
</head>
<body>

header2.php:

<link rel="stylesheet" type="text/css"  href="./css/gruen/gruen.css" title="Gruen"  media="screen, projection" />
<link rel="alternate stylesheet" type="text/css"  href="./css/parzifal/parzifal.css" title="Parzifal" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
</head>
<body>

und die header3.php:

<link rel="stylesheet" type="text/css" href="./css/parzifal/parzifal.css" title="Parzifal" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/gruen/gruen.css" title="Grün" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
</head>
<body>

Änderungen die evtl. angepasst werden müssen, hab ich fett geschrieben. Wie man sieht hab ich in den headerfiles nicht nur auf die CSS-Dateien verwiesen, sondern auch gleich den End-head- und den Anfang-body-Tag mit eingefügt und aus der index.php herausgenommen. Warum steht im nächsten Kapitel.

Da ich mir überlegt habe, dass es auf meiner Seite wohl nicht nur bei 3 Styles bleiben wird, hab ich mich für eine Auswahlliste entschieden. Die sieht so aus:

<form action="">
<select name="menu" size="1" onchange="javascript:parent.location=this.form.menu.options[this.form.menu.selectedIndex].value;">
<option>Style</option>
<option></option>
<option value="index.php?newstyle=3">Parzifal</option>
<option value="index.php?newstyle=2">Gruen</option>
<option value="index.php?newstyle=1">Einfach</option>
</select></form>

6. Komplette Layoutänderungen

Der Vorteil dieser Styleswitch-Variante: Man kann hier nun das komplette Layout oder sogar den Inhahlt der Seite wechseln. Das einzige was man machen muss: Alles, was bis jetzt unterhalb des

<?php include(header.php) ?>stand, löschen und in ein headerfile (header1.php) eintragen. Nun könnte ich eine anderes headerfile (header2.php) anlegen mit dem neuen Inhalt. Und schon kann man zwischen beiden Inhalten oder Layouts wechseln. Man könnte es aber auch nicht nur bei den headerfiles belassen, sondern auch noch footerfiles, navifiles, menufiles oder sturzbetrunkenfiles anlegen und nach oben beschriebener Weise einfügen. Je nach dem!

Viel Spass!

Ach ja, ich weiss nicht, ob und wieviel ich Support geben kann, da ich von dem Zeug so gut wie keine Ahnung habe.:-/