1. Überblick

Barefoot CMP lässt sich in wenigen Minuten in jede WordPress-Website integrieren. Egal ob Sie einen einfachen Blog, einen WooCommerce-Shop oder eine komplexe Unternehmensseite betreiben -- die Einbindung ist immer gleich einfach.

Sie haben die Wahl zwischen drei Integrationsmethoden:

Methode 1: Offizielles WordPress Plugin -- Die einfachste und empfohlene Methode
Methode 2: Theme Header (header.php) -- Direkte Einbindung im Theme
Methode 3: Code-Injection Plugin -- Für Nutzer ohne Theme-Zugang

Alle drei Methoden sind vollständig kompatibel mit WooCommerce, Elementor, Divi, Gutenberg und weiteren Page Buildern. Google Consent Mode v2 funktioniert bei jeder Methode automatisch -- ohne zusätzliche Konfiguration.

Voraussetzung: WordPress 5.0 oder höher und PHP 7.4 oder höher. Diese Anforderungen werden von allen aktuellen WordPress-Installationen erfüllt.

2. Methode 1: Offizielles WordPress Plugin (Empfohlen)

Das offizielle Barefoot CMP Plugin ist die schnellste und einfachste Methode, das Cookie-Banner in Ihre WordPress-Website zu integrieren. Die Installation dauert weniger als zwei Minuten.

1

Plugin herunterladen

Im WordPress Dashboard: Navigieren Sie zu Plugins → Neues Plugin hinzufügen und suchen Sie nach "Barefoot CMP". Alternativ können Sie das Plugin manuell von unserer Website herunterladen und als ZIP-Datei hochladen.

2

Plugin aktivieren

Nach der Installation klicken Sie auf "Aktivieren". Das Plugin erscheint nun in der Seitenleiste unter Einstellungen.

3

CMP-ID eingeben

Gehe zu Einstellungen → Barefoot CMP und geben Sie Ihre CMP-ID ein. Das Format ist bf_XXXXXXXX (z.B. bf_a1b2c3d4). Sie finden Ihre CMP-ID im Barefoot CMP Dashboard.

4

Speichern und testen

Klicken Sie auf "Einstellungen speichern", rufen Sie dann Ihre Website im Frontend auf und prüfen Sie, ob das Cookie-Banner korrekt angezeigt wird.

Plugin Features

Automatische Script-Einbindung im <head> -- kein manueller Code nötig
CMP-ID zentral verwalten über die WordPress-Einstellungen
Admin-Bar Indikator zeigt an, ob Barefoot CMP aktiv ist
Kompatibel mit allen gängigen Caching-Plugins (WP Rocket, W3 Total Cache etc.)
Automatische Updates über das WordPress Plugin-System

Das Plugin ist die einfachste Methode. CMP-ID eingeben, speichern, fertig! Sie brauchen keinen Code anzufassen und das Banner bleibt auch bei Theme-Updates bestehen.

3. Methode 2: Theme Header (header.php)

Wenn Sie das Plugin nicht verwenden möchten, können Sie den Barefoot CMP Script-Tag direkt in die header.php Ihres Themes einfügen. Diese Methode gibt Ihnen volle Kontrolle über die Einbindung.

Achtung: Diese Methode überschreibt Theme-Dateien. Verwenden Sie immer ein Child Theme, damit Ihre Änderungen bei Theme-Updates nicht verloren gehen!

1

Theme-Editor öffnen

WordPress Dashboard → Design → Theme-Dateien (oder Theme-Editor). Stellen Sie sicher, dass Sie im Child Theme arbeiten.

2

header.php bearbeiten

Öffnen Sie die Datei header.php in Ihrem Child Theme.

3

Script einfügen

Fügen Sie den folgenden Code direkt nach dem <head>-Tag ein:

          PHP
<?php // Barefoot CMP - Cookie Consent Management ?>
<script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID" async></script>
        

4

Speichern

Klicken Sie auf "Datei aktualisieren", um die Änderung zu speichern.

5

Frontend testen

Öffnen Sie Ihre Website in einem neuen Browser-Tab und prüfen Sie, ob das Cookie-Banner erscheint.

Child Theme erstellen (Kurzanleitung)

Falls Sie noch kein Child Theme haben, erstellen Sie eines in wenigen Schritten:

1. Ordner erstellen:

          Pfad
wp-content/themes/dein-theme-child/
        

2. style.css anlegen:

          CSS
/*
 Theme Name:   Dein Theme Child
 Template:     dein-theme
 Description:  Child Theme für Dein Theme
 Version:      1.0
*/
        

3. functions.php anlegen:

          PHP
<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
        

4. header.php aus dem Parent-Theme kopieren und den Barefoot CMP Code einfügen.

5. Child Theme aktivieren unter Design → Themes.

4. Methode 3: Code-Injection Plugin

Für Nutzer, die keine Theme-Dateien bearbeiten möchten oder keinen Zugang zum Theme-Editor haben, gibt es eine dritte Möglichkeit: Code-Injection Plugins. Diese fügen den Script-Tag automatisch in den Header ein.

Kompatible Plugins

Insert Headers and Footers (WPCode) -- Am weitesten verbreitet, kostenlos
Head, Footer and Post Injections -- Einfach und übersichtlich
Header and Footer Scripts -- Leichtgewichtig

Anleitung mit "Insert Headers and Footers" (WPCode)

1

Plugin installieren

Plugins → Neues Plugin hinzufügen → Suchen Sie nach "Insert Headers and Footers" und installieren Sie es.

2

Plugin aktivieren

Klicken Sie auf "Aktivieren" nach der Installation.

3

Einstellungen öffnen

Navigieren Sie zu Einstellungen → Insert Headers and Footers (oder WPCode → Header & Footer).

4

Script einfügen

Im Feld "Scripts in Header" folgenden Code einfügen:

          HTML
<script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID" async></script>
        

5

Speichern

Klicken Sie auf "Save Changes" und prüfen Sie Ihre Website im Frontend.

Tipp: Code-Injection Plugins bleiben auch bei Theme-Wechseln aktiv. Der Script-Tag geht nicht verloren, wenn Sie Ihr Theme aktualisieren oder wechseln.

5. WooCommerce-Integration

Barefoot CMP ist vollständig mit WooCommerce kompatibel. Alle relevanten Tracking-Scripts werden automatisch blockiert, bis der Nutzer seine Einwilligung erteilt. Das Consent-Banner funktioniert nahtlos auf allen Seiten -- einschließlich Shop, Produktseiten und Checkout.

Automatische Blockierung von Tracking-Scripts

Google Analytics Enhanced Ecommerce -- Transaction- und Purchase-Events werden erst nach Analytics-Consent gesendet
Facebook Pixel Purchase Events -- Pixel wird bis zum Marketing-Consent vollständig blockiert
Google Ads Conversion Tracking -- Conversions werden über Consent Mode v2 "modeled" wenn der Nutzer ablehnt

5.1 Google Ads Conversion Tracking

Barefoot CMP setzt automatisch die Consent-Signale ad_storage und ad_user_data über Google Consent Mode v2. Das bedeutet:

Bei Einwilligung: Volle Conversion-Messung mit allen Daten
Bei Ablehnung: Google nutzt "Modeled Conversions" basierend auf aggregierten Daten
Kein zusätzlicher Code oder Konfiguration nötig

5.2 Facebook/Meta Pixel

Das Facebook Pixel wird automatisch blockiert, bis der Nutzer Marketing-Consent erteilt:

Vor Consent: Pixel-Script wird nicht geladen, keine Daten an Meta gesendet
Nach Consent: Pixel wird aktiviert, Advanced Matching funktioniert vollständig
PageView, Purchase und andere Events werden erst nach Einwilligung gefeuert

5.3 Checkout-Seite

Das Cookie-Banner erscheint auch auf der Checkout-Seite. Es hat keinen Einfluss auf den Checkout-Prozess selbst:

Das Banner überlagert den Checkout-Bereich nicht (responsive Positionierung)
Zahlungsanbieter (Stripe, PayPal, Klarna, Mollie etc.) nutzen ausschließlich notwendige Cookies
Notwendige Cookies werden NICHT blockiert -- der Checkout funktioniert immer

Wichtig: WooCommerce Payment-Cookies (Stripe, PayPal, Mollie etc.) sind als "notwendig" kategorisiert und werden NICHT blockiert. Der Checkout-Prozess funktioniert uneingeschränkt, auch wenn der Nutzer alle optionalen Cookies ablehnt.

6. Page Builder Kompatibilität

Barefoot CMP ist mit allen gängigen WordPress Page Buildern kompatibel. Der Script-Tag wird im <head> geladen und arbeitet unabhängig vom verwendeten Builder.

6.1 Elementor

Vollständig kompatibel -- Das CMP-Script wird im <head> geladen, bevor Elementor initialisiert
Elementor Pro Forms: Funktioniert ohne Einschränkungen
Elementor Custom CSS: Kein Konflikt mit Banner-CSS dank CSS-Isolation
Popup Builder: Cookie-Banner hat Vorrang vor Elementor-Popups (höherer z-index)

6.2 Divi

Vollständig kompatibel -- Divi Builder Scripts werden korrekt blockiert und freigegeben
Alternative Einbindung: Divi Theme Options → Integration → Head-Feld nutzen
Visual Builder: Das Banner wird im Visual Builder nicht angezeigt (nur im Frontend)

6.3 Gutenberg (Block Editor)

Vollständig kompatibel -- Gutenberg-Blöcke funktionieren uneingeschränkt
Embed-Blöcke: YouTube-, Vimeo- und andere Embed-Blöcke werden bei Functional-Consent freigeschaltet
Custom HTML Blöcke: Scripts in HTML-Blöcken werden automatisch erkannt und blockiert

6.4 WPBakery (Visual Composer)

Kompatibel -- Der Frontend-Editor funktioniert ohne Einschränkungen
Das Banner wird im Editor nicht angezeigt, nur im Frontend
Raw HTML und Raw JS Elemente werden korrekt behandelt

6.5 Weitere Page Builder

Beaver Builder -- Kompatibel über alle Standard-Einbindungsmethoden
Oxygen Builder -- Kompatibel, Script im Code Block oder Head einfügen
Bricks Builder -- Kompatibel, Head-Bereich in den Einstellungen nutzen

7. Caching-Plugin Kompatibilität

Barefoot CMP funktioniert mit allen gängigen WordPress Caching-Plugins. Beachten Sie jedoch, dass Sie den Cache nach der Installation oder Änderungen am CMP leeren müssen.

Plugin	Kompatibel	Hinweis
WP Super Cache	Ja	Cache nach Installation leeren
W3 Total Cache	Ja	"Minify" für externe Scripts deaktivieren
WP Rocket	Ja	Script von "Combine" ausschließen
LiteSpeed Cache	Ja	Externe Scripts nicht minifizieren
Autoptimize	Ja	Script in Exclude-Liste aufnehmen
SG Optimizer	Ja	Cache leeren nach Installation
Cloudflare	Ja	Cache purgen nach Installation

Achtung: Wenn Barefoot CMP in einem Caching-Plugin "kombiniert" oder "minimiert" wird, kann es zu Fehlfunktionen kommen. Schließen Sie die URL cmp.barefoot-performance.com immer von der Optimierung aus.

Nach jeder CMP-Änderung den Cache leeren! Das gilt für alle Ebenen: WordPress-Cache, Plugin-Cache, CDN-Cache und Browser-Cache.

Exclude-Beispiel für WP Rocket

Navigieren Sie zu WP Rocket → Einstellungen → Dateioptimierung und fügen Sie folgende URL in das Feld "Von der Optimierung ausschließen" ein:

          Exclude
cmp.barefoot-performance.com
        

8. Multisite-Konfiguration

WordPress Multisite wird von Barefoot CMP vollständig unterstützt. Beachten Sie folgende Besonderheiten:

Eine CMP-ID pro Sub-Site: Jede Sub-Site in Ihrem Multisite-Netzwerk benötigt eine eigene CMP-ID, da jede Site unterschiedliche Cookies haben kann
Netzwerkweite Aktivierung: Das Plugin kann über den Netzwerk-Admin netzwerkweit aktiviert werden
Individuelle Konfiguration: Die CMP-ID wird pro Site unter Einstellungen → Barefoot CMP konfiguriert
Zentrale Verwaltung: Im Barefoot CMP Dashboard können Sie alle Instanzen zentral verwalten und überwachen

Tipp für Agenturen: Mit dem Agency-Plan können Sie bis zu 50 Websites verwalten -- ideal für WordPress Multisite-Netzwerke und Kundenprojekte.

9. Troubleshooting

Hier finden Sie Lösungen für die häufigsten Probleme bei der WordPress-Integration. Klicken Sie auf eine Frage, um die Antwort anzuzeigen.

Wenn das Cookie-Banner nicht erscheint, prüfen Sie folgende Punkte:

Cache leeren: Leeren Sie alle Cache-Ebenen -- WordPress-Plugin-Cache, CDN-Cache (z.B. Cloudflare) und Browser-Cache (Strg+Shift+Entf)
Script im Quelltext prüfen: Öffnen Sie den Quelltext (Strg+U) und suchen Sie nach "barefoot". Das Script muss im <head>-Bereich vorhanden sein
Browser-Console prüfen: Öffnen Sie die Entwickler-Tools (F12) und schauen Sie in der Console nach Fehlermeldungen
CSP-Header prüfen: Manche Sicherheits-Plugins setzen Content-Security-Policy Header, die externe Scripts blockieren. Fügen Sie cmp.barefoot-performance.com zur Whitelist hinzu
CMP-ID korrekt? Prüfen Sie, ob die CMP-ID im Format bf_XXXXXXXX korrekt eingegeben wurde

Wenn das Plugin Fehler anzeigt oder nicht korrekt funktioniert:

Andere CMP-Plugins deinstallieren: Deaktivieren und löschen Sie andere Cookie-Banner-Plugins (Cookiebot, CookieYes, Complianz, GDPR Cookie Compliance etc.). Zwei CMPs gleichzeitig führen zu Konflikten
PHP-Version prüfen: Mindestens PHP 7.4 ist erforderlich. Prüfen Sie unter Werkzeuge → Website-Zustand
Plugin-Konflikt testen: Deaktivieren Sie das Barefoot CMP Plugin, deaktivieren Sie dann alle anderen Plugins einzeln und aktivieren Sie Barefoot CMP erneut, um den Konflikt zu identifizieren
WordPress Debug-Log: Setzen Sie in der wp-config.php den Wert WP_DEBUG auf true, um detaillierte Fehlermeldungen zu erhalten

                  PHP
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
                

Das Barefoot CMP Banner wird standardmäßig nur im Frontend angezeigt, nicht im WordPress-Admin-Bereich.

Falls das Banner dennoch im Admin erscheint, liegt wahrscheinlich ein Plugin-Konflikt vor
Prüfen Sie, ob ein anderes Plugin das Script auch im Admin-Bereich einbindet
Kontaktieren Sie unseren Support mit einem Screenshot und einer Liste der aktiven Plugins

Wenn Google Analytics trotz fehlendem Consent geladen wird:

Ladereihenfolge prüfen: Barefoot CMP muss VOR dem Google Analytics Script geladen werden. Stellen Sie sicher, dass der CMP-Script-Tag im <head> vor allen anderen Tracking-Scripts steht
Google Tag Manager: Verwenden Sie in GTM einen Consent-Initialization Trigger statt eines "All Pages" Triggers für GA-Tags
Consent Mode prüfen: Öffnen Sie die Browser-Console und prüfen Sie, ob gtag('consent', 'default', ...) korrekt gefeuert wird
Inline-Scripts: Wenn GA direkt im Theme eingebunden ist (nicht über GTM), stellen Sie sicher, dass das Script den Typ text/plain hat oder nach dem CMP geladen wird

Der WooCommerce Checkout sollte durch Barefoot CMP nicht beeinträchtigt werden, da Payment-Cookies als "notwendig" kategorisiert sind.

Payment-Cookies: Stripe, PayPal, Mollie und andere Payment-Gateways nutzen nur notwendige Cookies, die nie blockiert werden
Anderes Plugin? Prüfen Sie, ob ein anderes Sicherheits- oder Cookie-Plugin den Checkout stört
JavaScript-Fehler: Öffnen Sie die Browser-Console (F12) auf der Checkout-Seite und prüfen Sie auf Fehlermeldungen
CSS-Konflikt: Falls das Banner den Checkout überlagert, prüfen Sie ob ein Theme-Update verfügbar ist

Dieses Problem tritt auf, wenn Sie Methode 2 (header.php) ohne Child Theme verwendet haben:

Ursache: Bei einem Theme-Update wird die header.php mit der Originaldatei überschrieben -- Ihre Änderungen gehen verloren
Sofort-Lösung: Fügen Sie den Script-Tag erneut in die header.php ein
Nachhaltige Lösung: Erstellen Sie ein Child Theme (siehe Abschnitt 3) oder wechseln Sie zur Plugin-Methode (Abschnitt 2)
Empfehlung: Die Plugin-Methode ist die sicherste Option, da sie von Theme-Updates nicht betroffen ist

WordPress-Integration

1. Überblick

2. Methode 1: Offizielles WordPress Plugin (Empfohlen)

Plugin herunterladen

Plugin aktivieren

CMP-ID eingeben

Speichern und testen

Plugin Features

3. Methode 2: Theme Header (header.php)

Theme-Editor öffnen

header.php bearbeiten

Script einfügen

Speichern

Frontend testen

Child Theme erstellen (Kurzanleitung)

4. Methode 3: Code-Injection Plugin

Kompatible Plugins

Anleitung mit "Insert Headers and Footers" (WPCode)

Plugin installieren

Plugin aktivieren

Einstellungen öffnen

Script einfügen

Speichern

5. WooCommerce-Integration

Automatische Blockierung von Tracking-Scripts

5.1 Google Ads Conversion Tracking

5.2 Facebook/Meta Pixel

5.3 Checkout-Seite

6. Page Builder Kompatibilität

6.1 Elementor

6.2 Divi

6.3 Gutenberg (Block Editor)

6.4 WPBakery (Visual Composer)

6.5 Weitere Page Builder

7. Caching-Plugin Kompatibilität

Exclude-Beispiel für WP Rocket

8. Multisite-Konfiguration

9. Troubleshooting

WordPress + Barefoot CMP = Einfache DSGVO-Compliance