Cambiar la hoja de estilos con PHP

7 de abril de 2015, Roque Arnás, php , 1 comentario , 11344 visitas , 5 , 7 minutos 25 segundos

Existen varios motivos a nivel profesional para permitir a un usuario modificar la hoja de estilos en un sitio web, uno de ellos y quizá el mas importante es el de la Accesibilidad Web, permitir que nuestros visitantes puedan acceder a una hoja de estilos más accesible es importante si no queremos modificar nuestro sitio y no queremos poner barreras a ninguna persona a poder acceder al contenido de nuestra web.

Pero además de permitir al usuario modificar los estilos en nuestro sitio, debemos crear un mecanismo para que cuando el usuario cambie de página en nuestro sitio o vuelva a entrar pasados unos dias, no tenga que volver a cargar la hoja de estilos, un mecanismo que haga que el dispositivo del usuario recuerde la hoja de estilos preferida por el usuario y la tome por defecto cuando este vuelva a acceder a nuestro sitio.

Para realizar este proceso, es importante destacar que utilizaremos “COOKIES” y las almacenaremos en el navegador del usuario, por lo tanto hemos de advertir a los usuarios de nuestro sitio web, que estamos utilizando “COOKIES” en nuestra página web, existen varias páginas muy bien documentadas sobre este tema como http://politicadecookies.com/, en la que nos podemos informar sobre su funcionamiento y descargar el código necesario para implementarlo, tambien te aconsejo que leas la Guía sobre el uso de las cookies.

Comenzamos

Lo primero que vamos a hacer es crear el código PHP necesario para llevar a cabo el ejemplo, para enlazar una hoja de estilos externa habitualmente lo hacemos con el siguiente código

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

Modificaremos esta parte de la cabecera en nuestra página, aunque todavía no hemos creado la cookie sabemos que vamos a hacerlo, asi que vamos a crear un mecanismo con PHP que compruebe si existe la cookie que almacenará los datos en el navegador del usuario, si existe esa cookie, es que el usuario ya ha visitado previamente nuestro sitio, por lo tanto le indicaremos con PHP que tome el valor de la cookie para mostrar la hoja de estilos preferida por el usuario.

<?php 
	if(!empty($_COOKIE['_cookietema'])) $style = $_COOKIE['_cookietema'];
?>

PHP comprobará si la cookie “_cookietema” no está vacía y por lo tanto comprobará tambien que si existe, si es así, creamos una variable “$style” y le asignaremos el valor que nos devolverá la cookie, que será la última elección que el usuario eligió.

Esto está muy bien pero debemos crear un mecanismo para cuando un usuario que nunca ha visitado nuestro sitio entre en el, la página reciba alguna hoja de estilos por defecto, para ello vamos a hacer lo contrario, le diremos a PHP que compruebe si la cookie si está vacía, si es esí, le diremos que muestre una hoja de estilos por defecto.

<?php 
	if(empty($_COOKIE['_theme'])) $style = "style";
	if(!empty($_COOKIE['_cookietema'])) $style = $_COOKIE['_cookietema'];
?>

Ahora crearemos la etiqueta que enlazará la hoja de estilos externa, solo tenemos que insertar un pequeño código PHP en el nombre de la hoja de estilos, el código PHP tomará el valor de la hoja de estilos que devuelva la variable “$style” del código anterior.

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

Por lo tanto si el usuario nunca ha modificado la hoja de estilos no habrá cookie o estará vacía y se mostrará por defecto la hoja de estilos “style.css”, si el usuario ha modificado la hoja de estilos la cookie se creará y guardará el valor de la hoja de estilos para indicarle a PHP el valor de la hoja de estilos que eligió el usuario.

Cambiar el CSS

Ahora crearemos los enlaces que se encargarán de cambiar la hoja de estilos.

<a href="funcioncookie.php?usertheme=style">ESTILO 1</a>
<a href="funcioncookie.php?usertheme=style2">ESTILO 2</a>

El código completo del archivo principal seria el siguiente:

index.php

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<?php 
	if(!empty($_COOKIE['_cookietema'])) $style = $_COOKIE['_cookietema'];
	if(empty($_COOKIE['_cookietema'])) $style = "style";
	?>
	<link rel="stylesheet" href="<?php echo $style ?>.css" type="text/css" media="all">
</head>
<body>
	<a href="funcioncookie.php?usertheme=style">ESTILO 1</a>
	<a href="funcioncookie.php?usertheme=style2">ESTILO 2</a>
</body>
</html>

Ahora creamos las hojas de estilo, algo sencillo para probar el ejemplo.

style.css

a { background: #FF0000;}

style2.css

a { background: #FFC926;}

funcioncookie.php

Por ultimo crearemos el archivo que se encargará de crear la cookie “_cookietema” si no existe, y si existe, guardará en ella el valor del tema que el usuario haya elegido mediante la variable “usertheme” que se haya recibido por “GET”, para terminar, recargamos la página, o más bien, la redirigimos a la página desde la que se ha recibido la petición, que para el caso es lo mismo, regresará al mismo documento en el que nos encontramos.

<?php
	$tema=$_GET['usertheme'];
	setcookie('_cookietema',$tema,time()+(86400*30),"/","");
	header("Location: ".$_SERVER['HTTP_REFERER']);
?>

Repasemos el código anterior, en la primera linea, la variable “$tema” toma el valor que la variable “usertheme” haya recibido por “GET”.

En la segunda línea creamos la cookie con set(cookie), la sintaxis es la siguiente

setcookie(name, value, expire, path, domain, secure, httponly);

Hemos asignado a la cookie el nombre ‘_cookietema’, que tomará el valor de la variable “$tema” y expirará en 30 dias, que son 86400 segundos ( los segundos que tiene un dia ), por 30 días, es decir, que a los usuarios que modifiquen la hoja de estilos en nuestro sitio, se les almacenará una cookie en el navegador con el valor del tema elegido durante 30 dias desde la ultima sesión, por lo que verán nuestro sitio con su estilo preferido cada vez que entren a nuestra página.

Por último usamos la función “header()” de PHP, redireccionando la página con la variable superglobal “$_SERVER[‘HTTP_REFERER’]” que nos devolverá la url completa de la página actual, puedes encontrar más información en los siguientes vínculos de W3Schools:

PHP header() Function

PHP 5 Global Variables – Superglobals

El código de este articulo con todos los ejemplos, está disponible en mi cuenta de Github.