Wygląd
Sieve zawiera panel Wygląd, dzięki któremu dopasujesz filtr i wyszukiwanie predykcyjne do swojego motywu bez pisania CSS. Wybierasz preset stylu i cztery kolory; ustawienia obejmują zarówno filtr [sieve], jak i pole [sieve_search]. Świeża instalacja wygląda dokładnie tak jak wcześniej, więc aktualizacja niczego nie zmienia, dopóki sam nie wybierzesz inaczej.
Gdzie to znaleźć
Dział zatytułowany „Gdzie to znaleźć”W panelu administracyjnym WordPress otwórz Sieve i rozwiń panel Wygląd. Dostosuj preset i kolory, obserwuj podgląd na żywo, a następnie kliknij Zapisz ustawienia. Jeśli używasz wtyczki cache, wyczyść jej pamięć po zmianie wyglądu.
Presety stylu
Dział zatytułowany „Presety stylu”| Preset | Wygląd |
|---|---|
Domyślny | Wbudowany wygląd. Nie dodaje żadnego dodatkowego kodu, więc jest identyczny jak wtyczka bez ustawień wyglądu. |
Minimalny | Płaski i oszczędny: lżejsze separatory między facetami, kompaktowe chipy. |
Obramowany | Każdy facet w obramowanym pudełku, z obramowanymi chipami i paginacją. |
Miękki | Zaokrąglone rogi i delikatne cienie na facetach, listach rozwijanych i wynikach wyszukiwania. |
Bez stylu | Nie dostarcza żadnego CSS wtyczki. Wszystko styluje Twój motyw (zobacz poniżej). |
Presety zmieniają tylko strukturę (obramowania, rogi, cienie, odstępy). Kolory ustawiasz osobno, więc możesz połączyć dowolny preset z dowolną paletą.
Dostępne są cztery kolory, każdy z próbnikiem koloru i podglądem na żywo:
| Kolor | Na co wpływa |
|---|---|
| Akcent | Stany aktywne, wybrane opcje, obrysy fokusu, przycisk wysyłania wyszukiwania. |
| Obramowanie | Separatory facetów, obramowania pól i list rozwijanych, kontury chipów. |
| Tekst przygaszony | Liczniki wyników i etykiety drugorzędne. |
| Tło | Kontener filtra i tło listy rozwijanej wyszukiwania. |
Kolory są stosowane jako zmienne CSS osadzone w obrębie widgetu, dołączane raz na stronę zaraz po arkuszu stylów. Emitowane są tylko kolory, które faktycznie zmienisz, więc domyślna paleta niczego nie dodaje do strony.
Wskazówka kontrastu
Dział zatytułowany „Wskazówka kontrastu”Ponieważ stany aktywne i wybrane wyświetlają biały tekst na kolorze Akcentu, panel pokazuje niblokujące ostrzeżenie, gdy akcent jest zbyt jasny, by biały tekst był na nim czytelny (poniżej współczynnika WCAG 4.5:1). Sygnalizuje też niski kontrast między Tekstem przygaszonym a Tłem. Ostrzeżenie ma charakter wyłącznie informacyjny; mimo niego możesz zapisać.
Przywróć domyślne ustawia preset z powrotem na Domyślny, a każdy kolor na jego pierwotną wartość.
Tryb bez stylu
Dział zatytułowany „Tryb bez stylu”Bez stylu całkowicie wstrzymuje arkusz stylów wtyczki i przekazuje całe stylowanie Twojemu motywowi. Widgety nadal dostarczają swoje semantyczne klasy, więc możesz je objąć stylami z CSS motywu:
.sieve-app,.sieve-facet,.sieve-chip,.sieve-pagedla filtra..sieve-search,.sieve-search__input,.sieve-search__resultsdla wyszukiwania.
Obrysy fokusu klawiatury oraz tryb wysokiego kontrastu Windows (forced-colors) są w tym trybie nadal emitowane, więc dostępność jest zachowana nawet bez żadnego stylowania wizualnego ze strony wtyczki.
Wydajność
Dział zatytułowany „Wydajność”Wygląd zaprojektowano tak, by nie naruszać Core Web Vitals:
- Brak dodatkowych żądań. Reguły presetów są w arkuszu stylów, który widget i tak już ładuje; kolory są osadzone w kodzie strony. Nic nowego nie jest pobierane.
- Brak przesunięć układu. Presety tylko zmieniają styl istniejących elementów; kod i zarezerwowana przestrzeń pozostają bez zmian.
- Pełna zgodność wstecz. Przy domyślnym presecie i nietkniętych kolorach wynik jest bajt w bajt identyczny jak we wtyczce bez ustawień wyglądu, więc strony z cache pozostają aktualne.