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
  • Hola quiisiera saber si me pueden ayudar, yo necesito es que una persona desde un area administrativa cambie el estilo de una pagina se podria hacer?? como gracias

  • Imposible colocar el codigo, intente escribirle a su correo pero no acepta mas de 210 caracteres

  • el codigo:
    ?php query_posts(‘cat=1&showposts=3′); ?>

    <a href="” rel=”bookmark” title=”">

    <?php endif; ?

  • Hola, reciba mis saludos desde Colombia.
    Excusame que te solicite este apoyo, estoy algo confundido y a lo mejor me puedas orientar.
    Estoy usando un codigo para mostrar las noticias de una determinada categoria, hasta alli todo funciona bien, solo que los titulos me aparecen arriba (uso plantillas de artisteer) y la idea es que aparezcan al lado de la foto.
    el codigo que uso es este:

    <a href="” rel=”bookmark” title=”">

    y el css es este:
    div.pochos {
    width: 600px;
    text-align: justify;
    clear: left;

    }

    div.pochos img {
    width: 100px;
    height: 80px;
    padding: 3px;
    margin: 5px 5px 10px 0px;
    border:1px solid #CCCCCC;

    }

    .pochos h2 a {
    font-size: 20px;
    color: #214559;
    text-decoration: none;
    font-family: Oswald, Helvetica, Sans-Serif;

    }

    Gracias por tu ayuda
    ——————–
    Puedes ver una imagen aqui: http://www.comfamiliar.org/wp-content/uploads/2011/12/ALLADOFOTO.jpg

  • I’m quite pleased with the iofnmration in this one. TY!

  • No se si debería poner esto acá pero bueno por las dudas…
    Comento por acá por si a alguien le sirve… al hacer lo que dije antes no funcionaba en las otras páginas del blog, así que en lugar de wp-content/themes/Daniel/ antes de la ruta de las imágenes puse y listo.

    Y por lo que veo es recomendable cambiar los estilos desde el index de la página para que no ocurran problemas… gracias nuevamente ^^

  • Gracias Nicolas Seijas :) lo solucioné. Anoche pensando en cuál podría ser el problema se me ocurrió lo que decís del CCC general. Bueno, quité el backgroung-image tanto del #Encabezado como del #Pie y no pasaba nada…
    Ahora se me ocurrió ver el código fuente del #Encabezado desde el navegador y me muestra que la imagen está en una ruta que nada que ver… por lo que tuve que agregarle wp-content/themes/Daniel/ antes de /Imagenes/FondoAElegir.png

    Considero que es una forma un tanto rara de solucionar esto porque tanto como el header.php y la carpeta Imagenes están en el mismo directorio :|

    Sólo me queda jugar bien con los colores hasta dejar los que me parezcan más lindos ^^ :)

    Gracias de nuevo por tu ayuda :D

  • Hola Alberto, estuve probando tu código y anda, me parece que tienes un error en el CSS, prueba eliminando el background-image del css general de #Encabezado y #Pie que ya lo estas declarando en “Estilo predeterminado si no existen cookies registradas”

    Saludos

  • Hola, yo por acá de nuevo ^^ estuve probando con las imágenes y para mi sorpresa, las imágenes no cargan ¿tienen idea de qué puede ser?
    Les dejo el código del archivo header.php de WordPress por si quieren ver si no me mandé algún moco :P aunque ya revisé y pienso que todo está en orden :|

    Gracias :)

  • Hola Alberto, como estas?
    Si, efectivamente se puede hacer con imágenes también.

    Saludos! :D

  • Está muy interesante, supongo que se puede hacer con imágenes en lugar de un color :P

    Buen artículo :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>