WPConsent permite a tus visitantes cambiar sus preferencias de cookies en cualquier momento. Esta guía te muestra cómo añadir un botón o enlace a tu sitio web que abra el panel de preferencias. Ofrecemos varios métodos, desde las opciones más sencillas sin código hasta enfoques más avanzados con JavaScript.

Método 1: Usando la clase CSS (El más fácil)

La forma más sencilla de abrir el panel de preferencias es añadiendo la clase CSS wpconsent-open-preferences a cualquier elemento clickeable. WPConsent detecta automáticamente los clics en elementos con esta clase y abre el panel de preferencias, sin necesidad de JavaScript.

Añadir la clase en Gutenberg

Para añadir la clase a un bloque de Botón en el editor de bloques de WordPress:

1. Añade un bloque de Botón a tu página
2. Introduce el texto de tu botón (p. ej., “Configuración de cookies” o “Gestionar preferencias”)
3. Selecciona el botón y abre el panel de Ajustes del bloque a la derecha
4. Desplázate hacia abajo hasta Avanzado y expándelo
5. En el campo Clases CSS adicionales, introduce: wpconsent-open-preferences

¡Eso es todo! El botón ahora abrirá el panel de preferencias al hacer clic.

Usar la clase en HTML

Si estás añadiendo HTML directamente (en un bloque de HTML personalizado, plantilla de tema o constructor de páginas), puedes usar la clase en cualquier elemento:

En un botón:

<button class="wpconsent-open-preferences">Manage Consent</button>

En un enlace:

<a href="#" class="wpconsent-open-preferences">Cookie Settings</a>

En cualquier elemento:

<span class="wpconsent-open-preferences" style="cursor: pointer;">Change Preferences</span>

Método 2: Usando el Shortcode

WPConsent incluye un shortcode que genera un botón de preferencias listo para usar. Puedes añadirlo a cualquier página, publicación, widget o constructor de páginas que admita shortcodes.

Uso básico:

Preferencias de cookies

Esto genera un botón con el texto predeterminado “Preferencias de cookies”.

Personalizar el texto del botón:

Manage Cookies

Añadir clases CSS personalizadas para el estilo:

Cookie Settings

Método 3: onClick de JavaScript en línea (Avanzado)

Para un mayor control, puedes llamar a la función WPConsent.showPreferences() directamente usando un atributo onClick:

<a href="#" onClick="WPConsent.showPreferences(); return false;">Show Preferences</a>

El return false; evita que el enlace navegue fuera de la página.

Método 4: Escuchador de eventos de JavaScript (Avanzado)

Para desarrolladores que prefieren separar HTML y JavaScript:

HTML:

<a href="#" class="my-preferences-link">Show Preferences</a>

JavaScript:

document.querySelector('.my-preferences-link').addEventListener('click', function(e) {
    e.preventDefault();
    WPConsent.showPreferences();
});

Método 5: Usando el plugin WPCode

Si necesitas añadir JavaScript personalizado pero no te sientes cómodo editando archivos del tema, puedes usar un plugin de fragmentos de código:

1. Instala y activa el plugin WPCode
2. Navega a Fragmentos de código > Añadir fragmento
3. Selecciona “Añadir tu código personalizado”
4. Nombra tu fragmento (p. ej., “Botón de preferencias WPConsent”)
5. Elige JavaScript como tipo de código
6. Pega tu código JavaScript
7. Establece la inserción en “Insertar automáticamente” con “Pie de página de todo el sitio”
8. Guarda y activa

¿Qué método debo usar?

Notas importantes

• Los métodos de JavaScript (3-5) requieren que el script WPConsent se cargue primero
• Los métodos de clase CSS y shortcode lo manejan automáticamente
• Todos los métodos funcionan tanto con las versiones WPConsent Lite como Pro