Cómo crear un aviso de cookies en WordPress (sin plugins)

¡Buenos días! En este vídeo vamos a ver cómo crear un aviso de cookies en WordPress sin utilizar plugins. ¡Vamos allá!

YouTube video

El recurso para insertar el aviso de cookies en WordPress que hemos utilizado en el vídeo es el siguiente: Osano Cookie Consent.

Repasemos los pasos que hemos seguido:

Crear y personalizar el aviso de cookies

Para ello simplemente seguimos los pasos que nos marca la herramienta hasta llegar al tercer paso, donde nos permite copiar el código que vamos a insertar en nuestra web.

Insertar el script de cookies en WordPress

Para ello podemos utilizar uno de varios métodos de insertar PHP en WordPress. Lo hacemos a través de PHP para aprovechar la acción de WordPress que nos permite insertar este script justo antes de la etiqueta </head>. En mi caso utilizo el plugin de Snippets para esta tarea.

La función que he utilizado en el vídeo es la siguiente:

add_action('wp_head', 'bps_cookie_script');

function bps_cookie_script () {
?>

//Aquí va el script

<?php
}

Recordad insertar vuestro propio código personalizado dentro de la función para que quede algo parecido a esto:

add_action('wp_head', 'bps_cookie_script');

function bps_cookie_script () {
?>

<!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
<script type="text/javascript">
window.cookieconsent_options = {"message":"Típico aviso de cookies. Si sigues navegando significa que aceptas su uso.","dismiss":"¡Genial!","learnMore":"Más info","link":"https://pro.empresiona.com/politica-de-cookies/","theme":"dark-bottom"};
</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
<!-- End Cookie Consent plugin -->

<?php
}

Personalizar el CSS

Este último paso es opcional pero nos servirá para adaptar el mensaje de cookies al diseño de nuestra web. Aquí no puedo dar una solución genérica ya que el diseño de cada uno es diferente pero puedo compartir el código que he utilizado en el vídeo:

.cc_container {
background-color:rgba(34, 34, 34, 0.82);
}

.cc_container .cc_btn, .cc_container .cc_btn:visited {
background-color:#6cc !Important;
color:#fff !important;
}

.cc_container a, .cc_container a:visited {
color:#6cc !important
}
¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web