Cambiare la SKIN ad un sito



Questo piccolo script permette all’utente che sta visitando un sito di sceglierne lo stile grafico. Lo stile viene mantenuto in tutte le pagine e memorizzato per le visite successive (grazie ai cookie). Potete vederne subito un esempio sul mio sito web. Il concetto alla base è semplice: ogni stile grafico, assieme alla formattazione del testo e al layout, viene definito in un CSS. Lo script si occupa di inserire nella sezione <head> della pagina il richiamo al foglio di stile relativo alla grafica scelta. La prima cosa da fare è compilare due distinti fogli CSS per il sito (oltre, eventualmente, ad uno standard che conterrà le informazioni di stile invarianti, che inseriremo normalmente nell'<head>). Fatto ciò, nella sezione verrà inserito il seguente codice PHP in luogo del link al foglio di stile:

<?php //codice da inserire tra <head> e </head>
if(isset($_COOKIE["skin"])){
$skin=$_COOKIE["skin"];
print("<link rel="stylesheet" type="text/css" xhref="/$skin.css"">n");
} else
print("<link rel="stylesheet" type="text/css" xhref="/default.css">n");

//”default.css” è la grafica di default in mancanza di scelte precedenti
?>

Questo stamperà nell’header il seguente codice:

<link rel="stylesheet" type="text/css" xhref="/default.css">

dove default verrà sostituito di volta in volta dal contenuto del cookie di nome SKIN associato al sito. Tale contenuto altro non sarà se non il nome del file CSS scelto. Per modificare la scelta, basterà richiamare un link ad un ipotetico script www.sito.tld/setskin.php?skin=nomecss che avrà il seguente codice php:

<?php //file setskin.php
setcookie("skin", $_GET["skin"], time()+31536000);
header("Location:".$HTTP_SERVER_VARS["HTTP_REFERER"]);
?>

Questo esegue due istruzioni:

  1. Scrive nel cookie chiamato SKIN la stringa passata in ?skin=nomecss (quindi in questo caso “nomecss”)
  2. Riporta il browser alla pagina dalla quale la scelta è stata effettuata. Quindi mettendo i richiami alle varie skin/temi grafici in una sezione fissa del sito (ad esempio il menu), la grafica cambierà in modo istantaneo e trasparente all’utente.

E’ tutto. Vi rimando all’esempio per la comprensione del funzionamento, e vi invito a studiare i fogli di stile CSS.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest