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 en el que se pueda hacer clic. 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 Botón en el editor de bloques de WordPress:

1. Añade un bloque Botón a tu página.
2. Introduzca el texto del botón (por ejemplo, «Configuración de cookies» o «Gestionar preferencias»).
3. Selecciona el botón y abre el panel de configuración de Bloqueo a la derecha.
4. Desplácese hacia abajo hasta «Avanzado» y expándalo.
5. En el Clase(s) CSS adicional(es) campo, introduzca: wpconsent-open-preferences

¡Eso es todo! Ahora, al hacer clic en el botón, se abrirá el panel de preferencias.

Uso de la clase en HTML

Si añades HTML directamente (en un bloque HTML personalizado, una plantilla de tema o un constructor de páginas), puedes utilizar 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 código corto

WPConsent incluye un código corto que genera un botón de preferencias ya configurado. Puedes añadirlo a cualquier página, entrada, widget o creador de páginas que admita códigos cortos.

Uso básico:

Cookie Preferences

Esto genera un botón con el texto predeterminado «Preferencias de cookies».

Personalización del texto del botón:

Manage Cookies

Añadir clases CSS personalizadas para el estilo:

Cookie Settings

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

Para tener más control, puedes llamar al WPConsent.showPreferences() función directamente utilizando un atributo onClick:

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

El return false; impide que el enlace salga de la página.

Método 4: Escucha de eventos JavaScript (avanzado)

Para los 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: Usar el plugin WPCode

Si necesitas añadir JavaScript personalizado pero no te sientes cómodo editando archivos de temas, puedes utilizar 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. Seleccione «Añadir su código personalizado».
4. Asigne un nombre a su fragmento (por ejemplo, «Botón de preferencias de WPConsent»).
5. Elige JavaScript como tipo de código.
6. Pega tu código JavaScript
7. Establezca la inserción en «Inserción automática» con «Pie de página en todo el sitio».
8. Guardar y activar

¿Qué método debo utilizar?

Notas importantes

• Los métodos JavaScript (3-5) requieren que se cargue primero el script WPConsent.
• Los métodos de clase CSS y shortcode gestionan esto automáticamente.
• Todos los métodos funcionan tanto con la versión WPConsent Lite como con la Pro.