Permitir que los usuarios cambien el estilo de tu sitio con Cookies

En este tutorial veremos como crear varios estilos css para que el usuario o visitante mediante un click pueda elegirlo y a la vez quede guardada su elección cada vez que visite la página o decida cambiarlo. Este código si se quiere se puede utilzar tanto en WordPress como en Joomla.

¿QUÉ SON LAS COOKIES?

Una cookie es información que se crea cuando visitamos un sitio web, se guarda en nuestro navegador y por lo tanto en nuestro disco duro. Donde podremos verlas comunmente es en los formularios de inicio de sesión, se guarda la información de la sesión por un tiempo determinado para que no nos tengamos que loguear cada vez que entremos en esa página.

¿QUÉ NECESITO PARA EMPEZAR?

Para la creación de este código utilizaremos:

  • jQuery (Crearemos algunos eventos con jQuery)
  • jQuery cookie (para setear la cookie ya que no viene por defecto en el core de jQuery)

Empezando el código

1. Primero abriremos el archivo en el que trabajaremos, dentro de las etiquetas <head> llamaremos a los archivos jQuery que utilizaremos:

2. Crearemos unas divs según la cantidad de estilos que deseemos utilizar en nuestro tema (estas les servirán a los visitantes para cambiar el estilo a su gusto al hacer click en ellas)

3. Creamos un css para las divs que recién hicimos.

 CREANDO NUESTRO CÓDIGO JQUERY

Este jQuery será el que creará las cookies y también recargará la página.

Al hacer click en una div, ésta crea una serie de cookies con diferentes valores.

Por ejemplo cuando clickeo en la div “rojo” esta creará una cookie llamada “rojo” con el valor 1 que será la que nos indique el estilo que se cargará y tres cookies con los colores restantes pero con un valor vacio, además se recargará automaticamente la página.

HACIENDO LA MAGIA CON PHP

Para esta parte del código utilizaremos PHP que será el que revise nuestras cookies.

En esta primera parte del PHP lo que haremos es indicar que si no hay ninguna cookie registrada nos muestre un estilo predeterminado:

A continuación con la función !empty PHP identifica cual de las 4 cookies NO está vacía y carga el estilo correspondiente para la misma.

Por ejemplo, hago click en la div “rojo”, !empty revisa las 4 cookies e identifica que la cookie “rojo” tiene un valor asignado, por lo tanto veremos un fondo de color rojo.

En este ejemplo lo que hice fue asignar un fondo a la página, pero ustedes pueden ir más alla y por ejemplo cargar un estilo css que cambie el fondo de la página, header, footer, color de fuentes, etc.

Modificado por última vez el día 30 de noviembre de 2012 a las 07:59
Scroll to top