WPConsent ist so konzipiert, dass es sich leicht an das Branding Ihrer Website anpassen lässt. Obwohl es so konzipiert ist, dass es sofort funktioniert, ohne mit Ihrem Theme in Konflikt zu geraten, haben Sie die Kontrolle über sein Aussehen mit einer modernen CSS-Funktion namens CSS ::part() Selektoren.

Diese Anleitung erklärt, warum WPConsent so aufgebaut ist und wie Sie Ihre eigenen Stile sicher anwenden können.

Warum WPConsent Shadow DOM verwendet

Sie werden feststellen, dass die Ausrichtung von Bannerelementen mit Standard-CSS (wie .wpconsent-button) funktioniert nicht. Dies ist beabsichtigt und ist dank einer Technologie namens Schatten-DOM.

Was ist Shadow DOM?

Shadow DOM ist ein Webstandard, der eine isolierte "Blase" für das WPConsent-Banner schafft. Diese Isolierung bietet zwei wesentliche Vorteile:

1. Stil-Isolierung: Stile innerhalb des Banners (wie unsere Schaltflächenstile) können nicht nach außen dringen und Ihre Hauptwebsite beeinflussen.
2. Schutz vor externen Stilen: Stile aus Ihrem Theme oder anderen Plugins (wie button { background: red !important; }) können nicht versehentlich das Layout oder das Aussehen des Banners zerstören.

Durch die Verwendung von Shadow DOM gewährleistet WPConsent maximale Kompatibilität mit allen WordPress-Themes und -Plugins und bietet ein konsistentes, funktionales Banner für alle Websites.

Wie man mit CSS anpasst ::part() Selektoren

Anpassungen ermöglichen in dieser isolierten Blase "exponiert" WPConsent bestimmte Elemente mit Hilfe eines part Attribut. Sie können diese Teile mit dem Attribut ::part() Pseudo-Selektor.

Schritt 1: Fügen Sie Ihr benutzerdefiniertes CSS hinzu

Sie können Ihr benutzerdefiniertes CSS an denselben Stellen hinzufügen, an denen Sie es normalerweise tun würden. In Ihrem Theme oder mit einem Code-Snippets-Plugin wie WPCode. Weitere Möglichkeiten, wie Sie CSS zu Ihrer Website hinzufügen können, finden Sie in diesem Artikel.

Schritt 2: Verwenden Sie die ::part() Syntax

Alle WPConsent-Teilselektoren müssen zunächst auf den Hauptcontainer ausgerichtet sein, #wpconsent-container. Von dort aus verwenden Sie ::part() um das spezifische Element zu finden, das Sie ändern möchten.

Hier finden Sie einige gängige Anpassungen, die Ihnen den Einstieg erleichtern.

Beispiel 1: Verschieben der schwebenden Einstellungsschaltfläche

Nachdem das Banner ausgeblendet wurde, kann eine schwebende Schaltfläche "Einstellungen" erscheinen. Standardmäßig befindet sie sich unten links. Verschieben wir sie in die untere rechte Ecke.

#wpconsent-container::part(wpconsent-settings-button) {
    left: auto;
    right: 20px;
    bottom: 20px; /* Make sure to set the bottom position too */
}

Beispiel 2: Ändern der Schaltfläche "Alle akzeptieren" im Einstellungsbereich

Die Schaltfläche "Alle akzeptieren" innerhalb des Einstellungsmodals (wpconsent-preferences-accept-button) wird standardmäßig der Stil der Schaltfläche "Akzeptieren" des Hauptbanners verwendet. Sie können ihn überschreiben, um ihm einen eigenen Stil zu geben.

Machen wir daraus einen blauen Farbverlauf.

#wpconsent-container::part(wpconsent-preferences-accept-button) {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    border: none;
    font-weight: 600;
}

Vollständige Teile-Referenztabelle

Sie können Dutzende von Elementen innerhalb des Banners und des Einstellungsmodals anpassen. Verwenden Sie diese Tabelle, um die richtigen part Name für das Element, das Sie gestalten möchten.