Tutorial WordPress: Hacer un banner de cookies minimalista con HTML y CSS

Introducción

Este tutorial explica paso a paso cómo crear un banner de cookies minimalista usando únicamente HTML y CSS, con una pequeña porción de JavaScript para el comportamiento (aceptar/ocultar y persistencia). El resultado es ligero, accesible y fácil de integrar en WordPress.

Por qué un diseño minimalista

Menor impacto visual: no distrae al usuario.
Filas de código reducidas: carga más rápido y es fácil de mantener.
Mejor compatibilidad: funciona bien en dispositivos móviles y en temas variados.

Requisitos

Tener acceso a los archivos del tema (o usar un plugin para añadir código en el pie de página).
Posibilidad de agregar CSS y JavaScript propios (por enqueue o por snippets).
Conocer la página de política de privacidad y/o cookies para enlazar desde el banner.

Estructura y consideraciones de UX

El banner mostrará un mensaje corto, un enlace a la política y un botón principal de aceptar. Opcionalmente puede incluir un botón para cerrar o gestionar preferencias. Debe ser visible pero no intrusivo usar colores neutros y contraste suficiente.

HTML del banner (ejemplo)



  
    
      Usamos cookies propias y de terceros para mejorar la experiencia en el sitio. Más información en
      la política de cookies.

CSS minimalista (estilos clave)

/ Estilos básicos y variables /
:root{
  --cookie-bg: rgba(0,0,0,0.75)
  --cookie-color: #ffffff
  --cookie-accent: #4CAF50
  --cookie-radius: 8px
  --cookie-padding: 14px
  --cookie-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Contenedor fijo en la parte inferior /
.cookie-banner{
  position: fixed
  left: 1rem
  right: 1rem
  bottom: 1rem
  z-index: 9999
  background: var(--cookie-bg)
  color: var(--cookie-color)
  border-radius: var(--cookie-radius)
  padding: var(--cookie-padding)
  box-shadow: 0 6px 20px rgba(0,0,0,0.25)
  font-family: var(--cookie-font)
  display: flex
  justify-content: center
  align-items: center
}

/ Contenido: texto y botones alineados /
.cookie-banner__content{
  width: 100%
  max-width: 980px
  display: flex
  align-items: center
  gap: 12px
}

/ Texto flexible /
.cookie-banner__text{
  margin: 0
  flex: 1 1 auto
  font-size: 0.95rem
  line-height: 1.3
}

/ Enlace con contraste suficiente /
.cookie-banner__link{
  color: #fff
  text-decoration: underline
}

/ Acciones: botones /
.cookie-banner__actions{
  display: flex
  gap: 8px
  align-items: center
  flex-shrink: 0
}

/ Botón aceptar principal /
.cookie-banner__accept{
  background: var(--cookie-accent)
  color: #fff
  border: none
  padding: 8px 12px
  border-radius: 6px
  cursor: pointer
  font-weight: 600
}

/ Botón de cerrar discreto /
.cookie-banner__close{
  background: transparent
  color: #fff
  border: none
  padding: 6px 8px
  cursor: pointer
  opacity: 0.9
}

/ Ajustes responsive: en pantallas pequeñas apilar /
@media (max-width: 600px){
  .cookie-banner{
    left: 0.6rem
    right: 0.6rem
    bottom: 0.6rem
    padding: 10px
  }
  .cookie-banner__content{
    flex-direction: column
    align-items: stretch
  }
  .cookie-banner__actions{
    justify-content: flex-end
    margin-top: 8px
  }
}

JavaScript para comportamiento y persistencia

Se recomienda usar localStorage para recordar la aceptación. El siguiente script es pequeño y directo.

(function(){
  var banner = document.getElementById(cookie-banner)
  var acceptBtn = document.getElementById(cookie-accept)
  var closeBtn = document.getElementById(cookie-close)
  var consentKey = cookie_consent_v1

  function hideBanner(){
    if(!banner) return
    banner.style.display = none
  }

  function showBanner(){
    if(!banner) return
    banner.style.display = flex
  }

  function hasConsent(){
    try{
      return localStorage.getItem(consentKey) === accepted
    }catch(e){
      return false
    }
  }

  // Inicialización
  if(hasConsent()){
    hideBanner()
  }else{
    // Espera a que el DOM esté listo si este script está al final, no hace falta.
    showBanner()
  }

  // Eventos
  if(acceptBtn){
    acceptBtn.addEventListener(click, function(){
      try{ localStorage.setItem(consentKey, accepted) }catch(e){}
      hideBanner()
    }, false)
  }
  if(closeBtn){
    closeBtn.addEventListener(click, function(){
      // Cerrar sin dar consentimiento: opción para ocultar temporalmente
      hideBanner()
    }, false)
  }
})()

Accesibilidad y buenas prácticas

Usar role=dialog y aria-live para notificar lectores de pantalla.
Garantizar contraste suficiente entre fondo y texto.
Permitir cerrar el banner sin forzar aceptación (mejor experiencia), pero solo ejecutar scripts no esenciales tras consentimiento.
Soportar preferencia de reducción de movimiento para animaciones (si se añaden).

Integración en WordPress

Hay dos formas sencillas de integrar: 1) inyectar el HTML en el pie de página con wp_footer y 2) añadir el CSS y JS mediante wp_enqueue_style y wp_enqueue_script en functions.php.

Ejemplo: añadir el HTML usando un hook en functions.php

add_action(wp_footer, mi_banner_cookies_html) function mi_banner_cookies_html(){ ?>

Ejemplo: encolar CSS y JS

add_action(wp_enqueue_scripts, mi_banner_cookies_assets)
function mi_banner_cookies_assets(){
  // Asegúrate de ajustar las rutas según tu tema o child theme
  wp_enqueue_style(mi-cookie-banner-css, get_stylesheet_directory_uri() . /assets/css/cookie-banner.css, array(), 1.0)
  wp_enqueue_script(mi-cookie-banner-js, get_stylesheet_directory_uri() . /assets/js/cookie-banner.js, array(), 1.0, true)
}

Opciones y personalización rápida

Color de fondo	--cookie-bg (ej: rgba(0,0,0,0.75))
Color de acento	--cookie-accent (ej: #4CAF50)
Radio	--cookie-radius (ej: 8px)

Pasos para publicar en WordPress (resumen)

Copiar el HTML del banner en una función que se ejecute en wp_footer o insertarlo mediante un plugin de snippets.
Agregar el CSS en un archivo propio o en la hoja de estilos del tema (seguir la jerarquía y no sobrescribir).
Agregar el JavaScript y encolarlo con wp_enqueue_script en footer (parámetro true para que se cargue antes de cierre de body).
Probar en móvil y escritorio y verificar que localStorage guarda la aceptación.
Actualizar el enlace a la política de cookies por la URL real de tu sitio.

Mejoras opcionales

Implementar niveles de consentimiento (necesarias, analíticas, publicitarias) con un modal de preferencias.
Registrar la fecha y versión de consentimiento en localStorage o en la base de datos para auditoría.
Incluir un pequeño fade-out con CSS para mejorar la experiencia al cerrar.

Conclusión

Con pocas líneas de HTML y CSS, y un script pequeño para persistencia, puedes disponer de un banner de cookies minimalista, accesible y fácil de integrar en cualquier tema WordPress. Personaliza variables CSS, adapta el texto legal y asegúrate de enlazar a la política de cookies para cumplir con transparencia informativa.

SushiHost