Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Implementación de la ley de cookies de la UE en tu sitio WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Si vives en Europa, probablemente hayas oído hablar de la ley de cookies. La ley exacta cambia de país a país y algunas de las directrices no son claras en cuanto a las formas en las que deben aplicarse.

Este artículo no es para debatir o aconsejar sobre la ley, sino para mostrarte el método detrás de la creación de un simple plugin de popup o ventana emergente para la ley de cookies.

El código de este sencillo plugin podría ir en el archivo functions.php de tu tema, pero creo que es mejor mantenerlo en forma de plugin independiente, ya que no es el tipo de funcionalidad que vayas a querer perder al cambiar de tema.

La funcionalidad

La implementación va a ser lo más sencilla posible. Vamos a tener una barra en la parte superior de la pantalla que muestra un mensaje, un botón para descartar el mensaje y un enlace para leer más sobre las cookies que utiliza el sitio. Algunas implementaciones van más lejos, por ejemplo, incorporando un botón de denegación, "No acepto", para las cookies, pero nosotros no vamos a usarlo.

Existen un montón de distintas implementaciones de esta funcionalidad, personalmente mi favorita es la que utiliza Google:

El sencillo plugin que vamos a crear durante este tutorial será ideal para que lo use cualquier desarrollador en sus proyectos, pero habría que trabajarlo un poco más en el caso de que quieras convertirlo en una solución estándar útil para "todas las situaciones",es decir, para uso público en general.

Las herramientas

Para crear este sencillo plugin vamos a usar jQuery, PHP, HTML y CSS, Empecemos.

En primer lugar, necesitamos crear una nueva carpeta, que denominaremos cookie-pop, y dentro de esa carpeta necesitamos crear un nuevo archivo PHP que llamaremos cookie-pop.php.

Lo primero que tenemos que hacer dentro de nuestro archivo PHP es introducir la información estándar del plugin según las instrucciones del Codex de WordPress:

Hasta ahora, todo correcto. Aquí vamos a dejar que jQuery realice la mayor parte del trabajo, así que la cantidad de PHP que necesitamos usar es mínima. Volveremos al PHP más adelante en el artículo.

El JavaScript

Vamos a crear algunas carpetas para nuestro JavaScript y nuestro CSS. Esto no es esencial, pero ayuda a mantener las cosas más limpias y más organizadas, algo que nunca está de más. Las llamaremos js y css.

Con el fin de capturar que el usuario haya aceptado las cookies, necesitamos establecer una cookie que impida que el mensaje aparezca en cada visita al sitio. Para esto vamos a utilizar un plugin jQuery muy popular. Dirígete al plugin de GitHub y suelta el archivo jquery.cookie.js en tu carpeta js. También queremos que un archivo deje caer nuestro jQuery personalizado para el plugin, así que crea un nuevo archivo en la carpeta js llamado cookie-pop.js.

Habrás notado que aquí he utilizado JavaScript sin minificado, siempre es buena idea incluir una versión minificada de tu JavaScript junto con la versión original, especialmente si tu objetivo es lanzar esto como un plugin disponible públicamente.

La minificación y la concatenación son temas para otro artículo, pero para aquellos que estén interesados, puedes echar un vistazo a CodeKit, Grunt y Gulp. Para leer más sobre la minificación, echa un vistazo a algunos de estos otros excelentes tutoriales de Tuts+:

Ahora abre tu archivo cookie-pop.js en blanco e introduce el siguiente código:


Este método jQuery debe ejecutarse en document.ready. Usar jQuery con WordPress es ligeramente diferente a usar la biblioteca por sí misma.

Por defecto, WordPress utiliza jQuery en modo compatibilidad, lo que significa que en lugar de usar el símbolo $, tienes que escribir jQuery. Por suerte, existen algunas maneras de evitar este problema, en el ejemplo anterior hemos pasado $ para que pueda ser utilizado dentro de nuestras funciones.

En este código suceden varias cosas distintas, así que vamos a desglosarlo un poco. Lo primero que estamos haciendo aquí es comprobar si existe una cookie llamada cookie-pop y además que no tenga valor set mediante el método cookie (que pertenece al script jQuery Cookie, explicado aquí).

Si la cookie ya ha sido establecida, no necesitamos hacer nada ya que el usuario ya habrá visto el mensaje y presionado el botón. Si no tiene ese valor, estamos anteponiendo el <body> del documento HTML con un <div> que tenga una clase .cookie-pop. El div que hemos creado tiene un elemento <button> dentro con un ID #accept-cookie y un simple hipervínculo. El hipervínculo deberá editarse para que contenga la ruta que dirige a tu página en la que explicas las cookies que usas.

A continuación, tenemos una función de clic, que dice que cuando se haga clic en el elemento con el id #accept-cookie, utilice el método cookie para crear una cookie llamada cookie-pop con un valor de set que expire en 365 días y que funcione en todo el sitio web.

El div .cookie-pop se elimina y desaparecerá de la pantalla. La próxima vez que se cargue la página, el div .cookie-pop no aparecerá ya que la cookie ya se habrá establecido.

El CSS

El CSS dependerá en última instancia de tu tema, pero aquí existen algunas buenas reglas a practicar dentro de tu CSS. Como se puede ver en el JavaScript, el <div> del popup tiene una clase cookie-pop, es aconsejable utilizar esto como selector principal en cualquier CSS personalizado que escribas para tu popup, de esta manera, habrán muchas menos posibilidades de que tu CSS entre en conflicto con los estilos utilizados en otros temas o plugins.

Aquí tienes el CSS que utilicé con el tema twenty-thirteen de WordPress:

Elegí fijar la posición del mensaje sobre las cookies para que permanezca presente cuando el usuario se desplace. Alternativamente, aquí puedes usar absolute para que siempre permanezca en la parte superior de la página, y no se desplace. Aquí he utilizado un estilo muy mínimo, ya que el tema tiene estilos predeterminados establecidos para el tamaño del texto, los botones y los enlaces.

El PHP

Aquí el PHP es bastante sencillo ya que el JavaScript y el CSS hacen prácticamente todo el trabajo. Todo lo que queda por hacer con nuestro PHP es informarle a WordPress sobre nuestro JavaScript y nuestro CSS para que los inserte correctamente. Vamos a escribir una sencilla función que registre y ponga en cola nuestro JavaScript y CSS.

Los estándares de código de WordPress dicen:

Utiliza letras minúsculas en los nombres de variable, acción y función (nunca "camelCase", usando mayúsculas y minúsculas). Separa las palabras mediante guiones bajos. No abrevies los nombres de las variables innecesariamente; deja que el código sea inequívoco y autodocumentado.

Llamaremos a nuestra función cookie_pop_scripts_and_styles(). A continuación, registraremos y pondremos en cola todos los scripts que necesitamos utilizando el método wp_register_script() y el método wp_enqueue_script(). El método wp_register_script() le indica a WordPress sobre nuestro script; su identificador, su ubicación, sus dependencias, su versión y si debe estar ubicado en el pie de página del documento, en lugar del encabezado. Mientras el método wp_enqueue_script() puede poner en cola / cargar un script registrado con wp_register_script() o registrar y poner en cola / cargar un script por sí mismo.

Comenzaremos poniendo en cola el script de jQuery Cookie:

En pocas palabras, lo que estamos haciendo aquí es decirle a WordPress que el script se llama "jquery-cookie", usando el método plugins_url() le indicamos a WordPress dónde encontrar el script, y que el funcionamiento del script depende de jQuery (consulta aquí un listado de controladores predeterminados), y finalmente, le indicamos a WordPress que la versión del script es la 1.4.1. Un último argumento opcional a añadir a este método es true si deseas que este script se cargue en el pie de página, algo que constituye una práctica recomendada para mejorar el tiempo de carga de la página.

A continuación, tenemos que registrar nuestro script personalizado cookie-pop de la misma manera, a excepción de que en este caso no vamos a poner en cola el script de inmediato debido a las traducciones, algo que cubriremos en un momento.

Aquí, la única diferencia importante es que este script tiene dos dependencias, jquery y nuestro anterior script en cola, jquery-cookie, ya que necesitamos ambos para que este script funcione correctamente.

A continuación, es una buena idea internacionalizar nuestro JavaScript. Anteriormente en este artículo codificamos de forma rígida algunos valores que no son muy amigables para la internacionalización. Por suerte, WordPress tiene una gran función para integrarla denominada wp_localize_script. Esta función te permite pasar datos desde PHP a JavaScript.

En nuestro script, tenemos sólo tres piezas de texto distinguible, el mensaje, el texto del botón y el enlace "Read more" (leer más). Avancemos y conectemos esto.

Esta función acepta tres parámetros. En primer lugar, tenemos el identificador del script que queremos localizar, cookie-pop-script. A continuación, tenemos el nombre del objeto JavaScript, esto podría ser cualquier cosa, aunque idealmente debería ser un nombre relacionado con tu script, en este caso yo he utilizado cookie_pop_text. El último parámetro es una matriz con los valores que queremos usar dentro de nuestro JavaScript, cada uno de ellos tiene su propio nombre y el texto que queremos mostrar.

Ahora, tenemos que volver a nuestro JavaScript y decirle que use estos valores. Se accede a los valores de la siguiente manera: cookie_pop_text.message mostraría nuestro mensaje. Sigamos adelante y hagamos algunos cambios en nuestro JavaScript; sólo necesitamos cambiar una línea:

Lo último que tenemos que hacer es indicarle a WordPress que use realmente estos archivos, para ello usamos el método wp_enqueue_script():

Habrás observado que aquí he puesto en cola el script cookie-pop-script, aquí es donde esas declaraciones de dependencia entran en juego cuando registramos nuestros scripts. WordPress pondrá automáticamente en cola todas las dependencias.

A continuación, el CSS. Esto funciona de la misma manera que para JavaScript:

Lo último que hay que hacer es armar todo esto en nuestra función cookie_pop_scripts_and_styles() y conectarlo a la acción wp_enqueue_scripts, de forma que el paquete completo se vería así:

Resumiendo

Ahora tenemos un funcional plugin con un sencillo mensaje y un botón sobre el que al hacer clic se borre el anterior mensaje y haga que no aparezca de nuevo durante un período de tiempo especificado.

El ejemplo que utilicé aquí es para la ley de cookies de la UE, pero en realidad este tipo de funcionalidad podría ser útil para todo tipo de cosas en WordPress, como por ejemplo, mostrar un mensaje de suspensión de los tiempos de entrega durante la Navidad en una tienda de comercio electrónico.

La implementación es muy simple y solo requiere alguna edición manual para el enlace "read more", esto podría ampliarse fácilmente usando la API de opciones de WordPress.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.