Mit WPConsent können Ihre Besucher ihre Cookie-Einstellungen jederzeit ändern. In dieser Anleitung erfahren Sie, wie Sie Ihrer Website eine Schaltfläche oder einen Link hinzufügen können, über den das Einstellungsfenster geöffnet wird. Wir bieten verschiedene Methoden an, von den einfachsten Optionen ohne Programmieraufwand bis hin zu fortgeschritteneren JavaScript-Ansätzen.

Methode 1: Verwendung der CSS-Klasse (am einfachsten)

Der einfachste Weg, das Einstellungsfenster zu öffnen, ist das Hinzufügen der CSS-Klasse wpconsent-open-preferences auf jedes anklickbare Element. WPConsent erkennt automatisch Klicks auf Elemente mit dieser Klasse und öffnet das Einstellungsfenster – ganz ohne JavaScript.

Hinzufügen der Klasse in Gutenberg

So fügen Sie die Klasse zu einem Button-Block im WordPress-Block-Editor hinzu:

1. Fügen Sie Ihrer Seite einen Button -Block hinzu.
2. Geben Sie Ihren Button-Text ein (z. B. „Cookie-Einstellungen“ oder „Einstellungen verwalten“).
3. Wählen Sie die Schaltfläche aus und öffnen Sie das Fenster „Block-Einstellungen“ auf der rechten Seite.
4. Scrollen Sie nach unten zu „Erweitert“ und klappen Sie diesen Bereich auf.
5. In der Zusätzliche CSS-Klasse(n) Feld, geben Sie ein: wpconsent-open-preferences

Das war's! Wenn Sie nun auf die Schaltfläche klicken, wird das Einstellungsfenster geöffnet.

Verwendung der Klasse in HTML

Wenn Sie HTML direkt hinzufügen (in einem benutzerdefinierten HTML-Block, einer Theme-Vorlage oder einem Page Builder), können Sie die Klasse für jedes Element verwenden:

Auf einem Knopf:

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

Auf einem Link:

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

Auf jedem Element:

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

Methode 2: Verwendung des Shortcodes

WPConsent enthält einen Shortcode, der eine vorgefertigte Schaltfläche für Einstellungen ausgibt. Sie können diese zu jeder Seite, jedem Beitrag, jedem Widget oder jedem Seitenersteller hinzufügen, der Shortcodes unterstützt.

Grundlegende Verwendung:

Cookie Preferences

Dadurch wird eine Schaltfläche mit dem Standardtext „Cookie-Einstellungen“ ausgegeben.

Anpassen des Schaltflächentextes:

Manage Cookies

Hinzufügen benutzerdefinierter CSS-Klassen für das Styling:

Cookie Settings

Methode 3: Inline-JavaScript onClick (Fortgeschritten)

Für mehr Kontrolle können Sie die WPConsent.showPreferences() Funktion direkt über ein onClick-Attribut:

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

Das return false; verhindert, dass der Link von der Seite wegführt.

Methode 4: JavaScript-Ereignis-Listener (Fortgeschritten)

Für Entwickler, die HTML und JavaScript lieber trennen möchten:

HTML:

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

JavaScript:

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

Methode 5: Verwendung des WPCode-Plugins

Wenn Sie benutzerdefiniertes JavaScript hinzufügen müssen, sich aber mit der Bearbeitung von Theme-Dateien nicht auskennen, können Sie ein Code-Snippets-Plugin verwenden:

1. Installieren und aktivieren Sie das WPCode-Plugin.
2. Navigieren Sie zu Code-Schnipsel > Schnipsel hinzufügen
3. Wählen Sie „Ihren benutzerdefinierten Code hinzufügen”
4. Benennen Sie Ihren Snippet (z. B. „WPConsent Preferences Button“).
5. Wählen Sie JavaScript als Codetyp
6. Fügen Sie Ihren JavaScript-Code ein
7. Setzen Sie die Einfügung auf „Auto Insert“ mit „Site Wide Footer“ (Fußzeile für die gesamte Website).
8. Speichern und aktivieren

Welche Methode soll ich verwenden?

Wichtige Hinweise

• Die JavaScript-Methoden (3-5) erfordern, dass zuerst das WPConsent-Skript geladen wird.
• Die CSS-Klasse und die Shortcode-Methoden erledigen dies automatisch.
• Alle Methoden funktionieren sowohl mit der WPConsent Lite- als auch mit der Pro-Version.