Jueves 23 de Febrero, 2012
Dinvaders: Alimentando con código a nuestros hambrientos visitantes desde el año 2010.

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.tusitio.com/js/jquery.cookie.js"></script>

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)

<a href="#"><div id="rojo"></div></a>
<a href="#"><div id="azul"></div></a>
<a href="#"><div id="gris"></div></a>
<a href="#"><div id="negro"></div></a>

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

<style type="text/css">
#rojo {float: left; height: 20px; width: 20px; border: 1px solid #FFF; background-color: #CF072B; margin-right: 10px;}
#azul {float: left; height: 20px; width: 20px; border: 1px solid #FFF; background-color: #05058D; margin-right: 10px;}
#gris {float: left; height: 20px; width: 20px; border: 1px solid #FFF; background-color: #666; margin-right: 10px;}
#negro {float: left; height: 20px; width: 20px; border: 1px solid #FFF; background-color: #000; margin-right: 10px;}
</style>

 Creando nuestro código jQuery

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

<script type="text/javascript">
$(document).ready(function() {
    $("#rojo").click(function() {
        $.cookie('rojo', '1', { expires: 30 });
        $.cookie('azul', '', { expires: 30 });
        $.cookie('gris', '', { expires: 30 });
        $.cookie('negro', '', { expires: 30 });
        location.reload();
    });
    $("#azul").click(function() {
        $.cookie('azul', '1', { expires: 30 });
        $.cookie('rojo', '', { expires: 30 });
        $.cookie('gris', '', { expires: 30 });
        $.cookie('negro', '', { expires: 30 });
        location.reload();
    });
    $("#gris").click(function() {
        $.cookie('gris', '1', { expires: 30 });
        $.cookie('rojo', '', { expires: 30 });
        $.cookie('azul', '', { expires: 30 });
        $.cookie('negro', '', { expires: 30 });
        location.reload();
    });
    $("#negro").click(function() {
        $.cookie('negro', '1', { expires: 30 });
        $.cookie('rojo', '', { expires: 30 });
        $.cookie('azul', '', { expires: 30 });
        $.cookie('gris', '', { expires: 30 });
        location.reload();
    });
});
</script>

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:

<?php if ((!isset($_COOKIE['rojo'])) && (!isset($_COOKIE['azul'])) && (!isset($_COOKIE['gris'])) && (!isset($_COOKIE['negro']))) { ;?>
<style type="text/css">
body {background-color: #F5F5F5;}
</style>
<?php } ;?>

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.

<?php if (!empty($_COOKIE['rojo'])) { ;?>
<style type="text/css">
body {background-color: #CF072B;}
</style>
<?php } elseif (!empty($_COOKIE['azul'])) { ;?>
<style type="text/css">
body {background-color: #05058D;}
</style>
<?php } elseif (!empty($_COOKIE['gris'])) { ;?>
<style type="text/css">
body {background-color: #666;}
</style>
<?php } elseif (!empty($_COOKIE['negro'])) { ;?>
<style type="text/css">
body {background-color: #000;}
</style>
<?php } ;?>

Artículos relacionados

Este artículo tiene 11 comentarios

  1. Alberto, hace 155 días atras:

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

    Buen artículo :)

  2. Nicolas Seijas, hace 155 días atras:

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

    Saludos! :D

  3. Alberto, hace 155 días atras:

    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 :)

  4. Alberto, hace 155 días atras:

    Que pena me olvidé dejar el link -.-’ jeje http://pastebin.com/BE1sPCf0

  5. Nicolas Seijas, hace 155 días atras:

    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

  6. Alberto, hace 154 días atras:

    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

  7. Alberto, hace 154 días atras:

    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 ^^

  8. Taron, hace 131 días atras:

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

  9. luchosra, hace 71 días atras:

    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

  10. luchosra, hace 71 días atras:

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

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

    <?php endif; ?

  11. luchosra, hace 71 días atras:

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

Deja un comentario