Appearance

Sieve bringt ein Darstellungs-Panel mit, damit Sie den Filter und die vorausschauende Suche ohne CSS-Kenntnisse an Ihr Theme anpassen können. Sie wählen eine Stil-Voreinstellung und vier Farben; die Auswahl gilt sowohl für den [sieve]-Filter als auch für das [sieve_search]-Feld. Eine frische Installation sieht genauso aus wie zuvor, sodass ein Update nichts ändert, bis Sie sich anders entscheiden.

Wo Sie es finden

Öffnen Sie im WordPress-Admin Sieve und klappen Sie das Darstellungs-Panel auf. Passen Sie die Voreinstellung und die Farben an, beobachten Sie die Live-Vorschau und klicken Sie dann auf Einstellungen speichern. Wenn Sie ein Seiten-Cache-Plugin verwenden, leeren Sie dessen Cache nach dem Ändern der Darstellung.

Stil-Voreinstellungen

Voreinstellung	Aussehen
Default	Das integrierte Aussehen. Erzeugt keinen zusätzlichen Markup und ist daher identisch mit einem Plugin ohne Darstellungseinstellungen.
Minimal	Flach und dezent: leichtere Trennlinien zwischen Facetten, kompakte Chips.
Bordered	Jede Facette sitzt in einem umrandeten Kasten, mit umrandeten Chips und Seitennummerierung.
Soft	Abgerundete Ecken und sanfte Schatten bei Facetten, Dropdowns und den Suchergebnissen.
Unstyled	Liefert überhaupt kein Plugin-CSS. Ihr Theme gestaltet alles (siehe unten).

Voreinstellungen ändern nur die Struktur (Rahmen, Ecken, Schatten, Abstände). Farben werden separat gesteuert, sodass Sie jede Voreinstellung mit jeder Palette kombinieren können.

Farben

Es werden vier Farben angeboten, jede mit einem Farbwähler und einer Live-Vorschau:

Farbe	Was sie beeinflusst
Akzent	Aktive Zustände, ausgewählte Optionen, Fokus-Umrandungen, die Absende-Schaltfläche der Suche.
Rahmen	Facetten-Trennlinien, Rahmen von Eingabefeldern und Dropdowns, Chip-Umrandungen.
Gedämpfter Text	Ergebniszähler und sekundäre Beschriftungen.
Hintergrund	Der Filter-Container und der Hintergrund des Such-Dropdowns.

Farben werden als auf das Widget beschränkte CSS-Variablen angewendet, einmal pro Seite direkt nach dem Stylesheet eingebettet. Nur Farben, die Sie tatsächlich ändern, werden ausgegeben, sodass die Standardpalette der Seite nichts hinzufügt.

Kontrast-Hinweis

Da aktive und ausgewählte Zustände weißen Text auf der Akzent-Farbe darstellen, zeigt das Panel eine nicht blockierende Warnung, wenn der Akzent zu hell ist, um weißen Text darauf lesbar zu machen (unterhalb des WCAG-Verhältnisses von 4,5:1). Es weist außerdem auf geringen Kontrast zwischen Gedämpftem Text und Hintergrund hin. Die Warnung ist nur ein Hinweis; Sie können trotzdem speichern.

Zurücksetzen

Auf Standard zurücksetzen setzt die Voreinstellung wieder auf Default und jede Farbe auf ihren ursprünglichen Wert.

Unstyled-Modus

Unstyled hält das Stylesheet des Plugins vollständig zurück und überlässt die gesamte Gestaltung Ihrem Theme. Die Widgets liefern weiterhin ihre semantischen Klassen mit, sodass Sie sie aus dem CSS Ihres Themes ansprechen können:

• .sieve-app, .sieve-facet, .sieve-chip, .sieve-page für den Filter.
• .sieve-search, .sieve-search__input, .sieve-search__results für die Suche.

Fokus-Umrandungen für die Tastatur und Hinweise für den Windows-Modus mit hohem Kontrast (forced-colors) werden in diesem Modus weiterhin ausgegeben, sodass die Barrierefreiheit auch ohne visuelle Gestaltung durch das Plugin erhalten bleibt.

Leistung

Die Darstellung ist so gebaut, dass die Core Web Vitals unbeeinträchtigt bleiben:

• Keine zusätzliche Anfrage. Die Voreinstellungsregeln liegen innerhalb des Stylesheets, das das Widget ohnehin lädt; Farben werden in den Seiten-Markup eingebettet. Es wird nichts Neues abgerufen.
• Keine Layout-Verschiebung. Voreinstellungen gestalten nur bestehende Elemente um; der Markup und der reservierte Platz bleiben unverändert.
• Abwärtskompatibel. Mit der Standard-Voreinstellung und unveränderten Farben ist die Ausgabe Byte-identisch mit einem Plugin ohne Darstellungseinstellungen, sodass zwischengespeicherte Seiten gültig bleiben.