WPConsent ermöglicht es Ihren Besuchern, ihre Cookie-Einstellungen jederzeit zu ändern. Diese Anleitung zeigt Ihnen, wie Sie Ihrer Website einen Button oder Link hinzufügen, der das Präferenzfenster öffnet. Wir bieten mehrere Methoden an, von den einfachsten No-Code-Optionen bis hin zu fortgeschritteneren JavaScript-Ansätzen.

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

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

Hinzufügen der Klasse in Gutenberg

Um die Klasse zu einem Button-Block im WordPress-Blockeditor hinzuzufügen:

1. Fügen Sie einen Button-Block zu Ihrer Seite hinzu
2. Geben Sie Ihren Button-Text ein (z. B. „Cookie-Einstellungen“ oder „Präferenzen verwalten“)
3. Wählen Sie den Button aus und öffnen Sie das Panel Blockeinstellungen auf der rechten Seite
4. Scrollen Sie nach unten zu Erweitert und klappen Sie es auf
5. Geben Sie im Feld Zusätzliche CSS-Klasse(n) Folgendes ein: wpconsent-open-preferences

Das war's! Der Button öffnet nun das Präferenzfenster, wenn er angeklickt wird.

Verwendung der Klasse in HTML

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

Bei einem Button:

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

Bei einem Link:

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

Bei jedem Element:

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

Methode 2: Verwendung des Shortcodes

WPConsent enthält einen Shortcode, der einen fertigen Präferenz-Button ausgibt. Sie können diesen zu jeder Seite, jedem Beitrag, Widget oder Page Builder hinzufügen, der Shortcodes unterstützt.

Grundlegende Verwendung:

Cookie-Einstellungen

Dies gibt einen Button mit dem Standardtext „Cookie-Präferenzen“ aus.

Anpassen des Button-Textes:

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 Funktion WPConsent.showPreferences() direkt über ein onClick-Attribut aufrufen:

<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:

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 nicht wohl dabei fühlen, Theme-Dateien zu bearbeiten, können Sie ein Code-Snippets-Plugin verwenden:

1. Installieren und aktivieren Sie das WPCode-Plugin
2. Navigieren Sie zu Code Snippets > Snippet hinzufügen
3. Wählen Sie „Eigene benutzerdefinierte Codes hinzufügen“
4. Benennen Sie Ihr Snippet (z. B. „WPConsent-Präferenzen-Button“)
5. Wählen Sie JavaScript als Code-Typ
6. Fügen Sie Ihren JavaScript-Code ein
7. Stellen Sie die Einfügung auf „Automatisch einfügen“ mit „Website-weit im Footer“ ein
8. Speichern und aktivieren

Welche Methode soll ich verwenden?

Wichtige Hinweise

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