¿Quieres que tus visitantes puedan reabrir sus opciones de cookies desde cualquier lugar de tu sitio? WPConsent viene con un shortcode, una clase CSS y un método JavaScript que abren el mismo panel de preferencias.
Esta guía recorre cada ruta, desde un botón listo para usar que colocas en una página hasta una línea de código propia. Lo único que necesitas es que tu banner de cookies ya esté activado.
Tabla de contenidos
- Añadir el botón de preferencias de cookies
- Cambiar la etiqueta del botón
- Convertir un enlace existente en un activador
- Abrir el panel desde tu propio código
- Preguntas frecuentes
Antes de empezar, asegúrate de que WPConsent esté instalado y activado en tu sitio de WordPress.
El panel viaja con tu banner de cookies, así que mantenlo activado. WPConsent coloca ambos en la página juntos, y cada ruta a continuación abre el panel que ya está allí.
Añadir el botón de preferencias de cookies
Para empezar, pondremos un botón listo para usar en una de tus páginas.
WPConsent registra un shortcode que imprime un botón de Preferencias de Cookies dondequiera que lo coloques. El botón llega con la clase que WPConsent busca, por lo que abre el panel sin configuración propia.
En la página o entrada donde va el botón, añade un bloque de Shortcode. El shortcode en sí va en el campo del bloque:
[wpconsent_preferences_button]
Una vez publicada la página, el shortcode es reemplazado por un botón con el estilo propio de tu tema.
Hacer clic en ese botón abre el panel de preferencias sobre la página. WPConsent rellena el panel a partir de la respuesta almacenada del visitante, por lo que las categorías que ya permitió están activadas cuando se abre.
Nuestra guía sobre el panel de preferencias cubre lo que un visitante hace dentro de él.
Nota: El panel en estas capturas de pantalla utiliza los colores y la redacción predeterminados de WPConsent. El tuyo mostrará lo que hayas configurado en las pestañas Estilo y Contenido del diseñador del banner.
La redacción del botón es tuya para cambiarla, y para eso sirven los atributos del shortcode.
Cambiar la etiqueta del botón
Por sí solo, el shortcode imprime Preferencias de Cookies en el botón. Dos atributos cambian esa redacción y añaden clases CSS propias.
La etiqueta es la única parte del botón que lee un visitante. Una redacción que coincida con el resto de tu página evita que parezca añadida a la fuerza.
El atributo text reemplaza la etiqueta:
[wpconsent_preferences_button text="Gestionar Cookies"]
El atributo class añade tus propias clases CSS junto con las de WPConsent, lo que da a tu hoja de estilos algo a lo que apuntar:
[wpconsent_preferences_button text="Gestionar Cookies" class="footer-cta"]
- text establece la redacción del botón. Si se omite, el botón dice Preferencias de Cookies. La redacción con espacios necesita las comillas alrededor.
- class añade clases CSS al botón, separadas por espacios. Si se omite, el botón solo lleva las clases propias de WPConsent. WordPress limpia cada valor, así que cíñete a letras, números, guiones y guiones bajos.
Para un enlace o botón que ya existe en tu sitio, una sola clase hace el mismo trabajo.
Convertir un enlace existente en un activador
Un enlace de pie de página, un elemento de menú o un botón que ya hayas creado también puede abrir el panel. WPConsent detecta clics en cualquier elemento que lleve la clase wpconsent-open-preferences, por lo que añadir esa clase es todo el trabajo.
En un enlace propio, la clase se encuentra en la etiqueta de apertura:
<a href="#" class="wpconsent-open-preferences">Cookie Preferences</a>El enlace abre el panel en lugar de seguir su propia dirección.
La clase también funciona en un elemento que envuelve el enlace, que es lo que hace que los elementos de menú y los bloques sean sencillos.
Un elemento de menú de WordPress mantiene su clase en el elemento de lista que rodea al enlace. En el editor de bloques, el campo Clases CSS adicionales la coloca en el elemento exterior de un bloque. Ambos abren el panel.
Nada más del enlace cambia. Conserva el estilo de tu tema y el texto que le hayas dado.
Para un control que otro código dibuja en la página, WPConsent tiene su propio método.
Abrir el panel desde tu propio código
Algunos controles son creados por otro plugin, o dibujados por JavaScript después de que la página se carga. Para esos, WPConsent expone el panel como un método en su objeto de front-end, WPConsent.showPreferences().
Llamado desde un manejador de clics, abre el panel exactamente como lo hace el botón Preferencias del banner:
document.getElementById('cookie-preferences-link').addEventListener('click', function (e) {
e.preventDefault();
WPConsent.showPreferences();
});WPConsent carga su script en el pie de página. Por lo tanto, el método pertenece a un manejador de clics, no a código que se ejecuta al cargar la página. WPConsent.closePreferences() cierra el panel de nuevo desde el mismo lugar.
Nota: La clase y el método hacen lo mismo. El propio detector de clics de WPConsent llama a este método por ti.
¡Eso es todo! Ahora sabes cómo abrir el panel de preferencias de WPConsent desde un botón de shortcode, desde un enlace propio y desde tu propio JavaScript.
A continuación, consulta nuestra guía sobre el botón flotante de consentimiento. Coloca un control permanente en la esquina de cada página que abre el mismo panel.
Preguntas frecuentes
A continuación, hemos respondido a algunas de las preguntas más comunes sobre cómo abrir el panel de preferencias desde un enlace propio.
¿Qué ruta debo usar?
El shortcode es el más rápido, ya que imprime un botón funcional sin nada más que configurar. La clase es adecuada para un enlace o elemento de menú que ya tengas. El método es para controles que otro código coloca en la página.
¿Dónde puedo usar el shortcode?
En cualquier lugar donde WordPress ejecute shortcodes. Eso cubre tus páginas y publicaciones, y cualquier área de widget o parte de plantilla que acepte un bloque de Shortcode. El botón aparece en lugar del shortcode.
Consulta Cómo añadir un shortcode en WordPress para ver un tutorial de cada uno de esos lugares.
¿Puedo añadir la clase a un elemento de menú de navegación?
Sí, y es un lugar popular para ello. WordPress da a cada elemento de menú un campo Clases CSS en la pantalla Apariencia » Menús, y la clase abre el panel desde allí. Si ese campo no aparece, Opciones de pantalla en la parte superior de la pantalla lo activa.
¿Abrir el panel registra el consentimiento?
No. Abrir el panel solo muestra a un visitante la respuesta que dio antes. Su elección se almacena cuando usan Aceptar todo o Guardar y cerrar dentro del panel.
¿Funcionará mi enlace en todas las páginas?
Funciona en cada página donde WPConsent muestra el banner. Las reglas para ocultar el banner que impiden que se muestre en ciertas páginas, o que lo ocultan a los usuarios registrados, también ocultan el panel en esas páginas.
Nuestra guía sobre configuraciones avanzadas cubre esas reglas.
¿Puedo usar el shortcode y el botón flotante juntos?
Sí. Son configuraciones separadas y ambos abren el mismo panel. Una configuración común mantiene el botón flotante en cada página y añade un enlace de Preferencias de cookies en el pie de página.
¿Cómo doy estilo al botón que añade el shortcode?
El botón del shortcode tiene las clases wpconsent-open-preferences y button, que la mayoría de los temas ya estilizan como sus propios botones. Para cualquier cosa más específica, el atributo class proporciona a tu hoja de estilos una clase propia para apuntar.