php styleswitcher til wordpress

Alternative stilark til en given webside eller wordpress blog kan f.eks. anvendes til at tilbyde forskellige farveskemaer, layout optimeret til dårligt seende eller hvad man nu har lyst. Om det kan betale sig at bruge tid på en slags forbedringer er en anden sag. 95%+ af de besøgende på en webside vil formentlig holde sig til default stilarket.
Det er i princippet ret enkelt at tilbyde alternative stylesheets. Alt hvad der er nødvendigt udover selvfølgelig selve css filerne er linie(r) med følgende form
<link rel="alternate stylesheet" type="text/css" href="other.css" title="Alternativ" />
indsat i den relevante template header fil.
Moderne standardbrowsere som f.eks. Opera, Firefox og Konqueror giver så brugerne mulighed for at vælge disse alternative stilark.
Det sker i f.eks. Firefox via undermenuen Sidestil under Vis menuen hvor man kan vælge mellem de forskellige stilark en given website tilbyder.
Der er et minus herved. Genindlæses den pågældende side i browseren eller klikkes der videre til en anden side på samme websted, indlæses default stilarket og den besøgende må påny vælge alternativet.
Dette kan afhjælpes med en smule javascript som beskrevet i f.eks. denne artikel.
Dvs. forudsat browseren er indstillet til at godtage cookies og forudsat brugeren har åbnet for brug af javascript (hvad de fleste brugere har).
Alternativt til javascript løsningen kan man implementere en styleswitcher med lidt hurtig php kode sådan som det sker på denne blog.
En søgning på Google på “php style switcher” afslører en mængde af eksempler.

Her er mit bud, sådan som det ca. er implementeret her på bloggen:
I forhold til en ren javascript løsning ser jeg følgende fordele: muligheden for fallback ved brug af session variable hvis cookies eller javascript ikke understøttes og, hvis man ønsker det, bedre mulighed for at styre hvad der sendes til browseren.
Følgende kode placeres i starten af den relevante template fil header.php.

<?php
//The folowing lines should be placed at the start of the template header.php file
//Define a privacy policy for your site see http://en.wikipedia.org/wiki/P3P
header("P3P: CP=\"Your sites privacy policy should be declared here\"");
//Stylesheets - a list of names of the stylesheets you are offering in the form stylesheetname => stylesheetfile
//The default stylesheet should be named style.css
$stylesheets = array("Standard" => "style.css",
"Visually Impaired" => "VIP_style.css",
"Black Government" => "BG_style.css",
"Boring TV" => "BoringTV_style.css"
);
//default is set
$blogstyle = "Standard";
$blogtemplatepath = get_bloginfo('template_directory')."/";
//the stylesheet for the actual page is found
if (isset($_POST['blogstyle']) && (array_key_exists($_POST['blogstyle'], $stylesheets)))
{
//if the user has selected a new stylesheet it is set as the actual stylesheet
$blogstyle = $_POST['blogstyle'];
//OBS! change .mydomain to the actual domain eg. .mydomain.net
if (!setcookie('blogstyle',$blogstyle,time()+60*60*24*360,'/','.mydomain'));
//if cookie could not be set a session variable is defined
{
session_start();
$_SESSION["blogstyle"] = $blogstyle;
}
}
//if no new stylesheet is selected checking if a cookie or session variable exists
else
{
session_start();
if(isset($_SESSION['blogstyle'])&& (array_key_exists($_SESSION['blogstyle'], $stylesheets)))
{
$blogstyle = $_SESSION['blogstyle'];
}
else
{
if (isset($_COOKIE['blogstyle']) && (array_key_exists($_COOKIE['blogstyle'], $stylesheets)))
{
$blogstyle = $_COOKIE['blogstyle'];
}
}
}
//the name of the stylesheet file is found
$blogstylefile = $stylesheets[$blogstyle];
$blogstylefile = $blogtemplatepath.$blogstylefile;
//Two functions used
function write_alternatestylesheets($filename, $stylename)
{
global $blogstyle;
$blogtemplatepath = get_bloginfo('template_directory')."/";
if($stylename != $blogstyle)
{
$alt_ssfile = $blogtemplatepath.$filename;
echo "<link rel=\"alternate stylesheet\" href=\"$alt_ssfile\" type=\"text/css\" title=\"$stylename\" media=\"screen\" />"."\n";
}
return true;
}
function write_options($filename, $stylename)
{
global $blogstyle;
if($stylename != $blogstyle)
{
$option = "<option value=\"$stylename\">$stylename</option>";
}
else
{
$option = "<option disabled=\"disabled\">$stylename</option>";
}
echo $option."\n";
return true;
}
?>

I ovennævnte kode indsættes de korrekte navne på Stylesheets og tilhørende filer de relevante steder, desuden indsættes navnet på det aktuelle domæne (uden www). Der er også gjort plads til webstedets P3P policy (Se f.eks. Wikipedia: P3P og Help! IE6 Is Blocking My Cookies.)
Også i template header filen indsættes følgende linier til erstatning for de eksisterende:
<?php
//The folowing lines should be placed in the header.php template file replacing the
// corresponding lines
//First a link to the actual chosen stylesheet
?>
<link rel="stylesheet" href="<?php echo $blogstylefile; ?>" type="text/css" title="<?php echo $blogstyle; ?>" media="screen" />
<?php
//The nonchosen stylesheets defined in the $stylesheets array are offered as alternate stylesheets
array_walk($stylesheets, 'write_alternatestylesheets');
//If print stylesheet or other media stylesheets are defined they can be added here
?>
<link rel="stylesheet" type="text/css" media="print" href="<?php echo $blogtemplatepath; ?>style_print.css" />

Endelig skal brugeren tilbydes en mulighed for at vælge mellem de stilark der er til rådighed.
Følgende kode indsættes i den relevante template fil – dvs. hvor Stilarkvælgeren ønskes placeret:
<?php
//This section should be placed i the relevant template file where the styleselector shall appear
?>
<form id="style_switcher" action="<?php echo $_server['php_self']; ?>" method="post">
<select name="blogstyle">
<option value="" selected="selected">Choose style : </option>
<?php
array_walk($stylesheets, 'write_options');
?>
</select>
<input type="submit" value=" -GO- " />
</form>

Som nævnt giver en php baseret løsning også bedre muligheder for at styre hvad der sendes af data til brugeren.
F.eks. sendes venstre spalte i denne blog kun til brugere som har valgt det relevante stilark.
Men vælger man at eksperimentere med dette skal man også huske at ændre i ovenstående kodestumper. Det har jo f.eks. ikke noget formål at tilbyde brugere et alternativt trespaltet stilark hvis de data som skal opbygge spalterne ikke er sendt til browseren…

Skriv kommentar -

Poster der ligner : blogs - programmering - web - wordpress - - - -

Indrykket : 22. januar 2007 - (Læst 3627 gange)

*

Skriv en kommentar

om...

Weblog at bo-k dot dk - blog om blogs, nettet, IT, medier, fri software etc.

cookies

Weblog at bo-k dot dk anvender både 1. parts- og 3. parts cookies. Besøg på Weblog at bo-k dot dk forudsætter at du er indforstået med anvendelsen af cookies.

følg med...

RSS Feed til din nyhedslæser Følg bloggen på twitter

find...

søg i alle indlæg:

kontakt...

kontaktformular

Creative Commons Navngivelse - Ikke-kommerciel - Del på samme vilkår 2.5  Licens Weblog at bo-k dot dk is powered by WordPress etc.

Valid XHTML, Valid CSS,

weblog at bo-k dot dk : http://www.bo-k.dk/weblog/index.php