Como integrar un aviso de cookies profesional en WordPress sin plugins

La forma más profesional, limpia y estable de integrar un aviso de cookies en WordPress sin plugins es añadir HTML + CSS + JS directamente en tu tema (o mejor, mediante un snippet en el footer). Estas instrucciones solo son validas en el caso de no tener ninguna cookie de terceros, integrada en WordPress.

Banners Ilegales con Cookies de Terceros

Integración profesional sin plugins (método recomendado)

1. Entra en WordPress → Apariencia → Editor de archivos del tema
2. Abre el archivo footer.php
3. Justo antes de </body> pega el código completo que te dejo abajo
4. Guarda los cambios
5. Limpia caché si usas Cloudflare, LiteSpeed, etc.

También puedes usar un snippet en HFCM o WPCode Lite, pero como pides sin plugins, vamos directo al footer.

Aviso de cookies profesional (botones azul oscuro + texto blanco)

Código optimizado, minimalista, rápido y compatible con cualquier tema:

html

<!-- Aviso de Cookies Profesional - Francisco / DooDom -->
<style>
#cookie-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 360px;
  background: #ffffff;
  color: #222;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  font-family: system-ui, sans-serif;
  z-index: 999999;
  opacity: 0;
  transform: translateY(20px);
  transition: all .35s ease;
}

#cookie-box.show {
  opacity: 1;
  transform: translateY(0);
}

#cookie-box h3 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  font-weight: 700;
}

#cookie-box p {
  margin: 0 0 15px 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: 0.2s;
  text-align: center;
}

.cookie-accept,
.cookie-reject {
  background: #0a1a33; /* Azul oscuro */
  color: #fff;
}

.cookie-accept:hover,
.cookie-reject:hover {
  background: #0f2a55;
}

.cookie-link {
  background: transparent;
  color: #0a1a33;
  text-decoration: underline;
  padding: 8px 0;
  flex-basis: 100%;
  text-align: left;
  cursor: pointer;
}
</style>

<div id="cookie-box">
  <h3>Cookies</h3>
  <p>Usamos cookies para mejorar tu experiencia. Puedes aceptarlas, rechazarlas o leer más información.</p>

  <div class="cookie-buttons">
    <button class="cookie-btn cookie-accept" id="cookie-accept">Aceptar</button>
    <button class="cookie-btn cookie-reject" id="cookie-reject">Declinar</button>
    <a href="/politica-de-cookies" class="cookie-link">Política de cookies</a>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const box = document.getElementById("cookie-box");

  if (!localStorage.getItem("cookieChoice")) {
    setTimeout(() => box.classList.add("show"), 300);
  }

  document.getElementById("cookie-accept").onclick = () => {
    localStorage.setItem("cookieChoice", "accepted");
    box.classList.remove("show");
  };

  document.getElementById("cookie-reject").onclick = () => {
    localStorage.setItem("cookieChoice", "rejected");
    box.classList.remove("show");
  };
});
</script>

Qué hace este aviso

• Se muestra solo si el usuario no ha elegido antes
• Guarda la elección en localStorage
• Diseño profesional, botones azul oscuro, texto blanco
• Compatible con cualquier tema (DIVI, Astra, GeneratePress, etc.)
• No requiere plugins
• Código limpio y ligero

Versión Minimalista

Aquí tienes un aviso de cookies minimalista, limpio, profesional y perfecto para WordPress sin plugins. Es la versión más ligera posible: sin sombras, sin cajas grandes, sin animaciones innecesarias. Solo lo esencial.

Aviso de cookies minimalista (texto + botones planos)

Diseño ultra simple, ocupa poco espacio y no distrae.

html

<!-- Aviso de Cookies Minimalista -->
<style>
#cookie-min {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f7f7f7;
  color: #333;
  padding: 12px 18px;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  transition: opacity .3s ease;
}

#cookie-min.show {
  opacity: 1;
}

#cookie-min a {
  color: #333;
  text-decoration: underline;
}

.cookie-min-buttons {
  display: flex;
  gap: 8px;
}

.cookie-min-btn {
  padding: 6px 12px;
  border: 1px solid #333;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 4px;
}

.cookie-min-btn:hover {
  background: #333;
  color: #fff;
}
</style>

<div id="cookie-min">
  <span>
    Usamos cookies. <a href="/politica-de-cookies">Más info</a>
  </span>

  <div class="cookie-min-buttons">
    <button class="cookie-min-btn" id="cookie-min-accept">Aceptar</button>
    <button class="cookie-min-btn" id="cookie-min-decline">Declinar</button>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const bar = document.getElementById("cookie-min");

  if (!localStorage.getItem("cookieChoice")) {
    setTimeout(() => bar.classList.add("show"), 200);
  }

  document.getElementById("cookie-min-accept").onclick = () => {
    localStorage.setItem("cookieChoice", "accepted");
    bar.remove();
  };

  document.getElementById("cookie-min-decline").onclick = () => {
    localStorage.setItem("cookieChoice", "declined");
    bar.remove();
  };
});
</script>

Características

• Ultra ligero (solo 2 bloques: texto + botones)
• Ocupa toda la parte inferior, estilo barra minimalista
• Sin sombras, sin cajas, sin animaciones llamativas
• Compatible con cualquier tema WordPress
• No requiere plugins
• Guarda la elección en localStorage