Customizer, czyli funkcja „Personalizuj” w WordPressie, pozwala zmieniać wygląd witryny z podglądem na żywo. Początkującym najbardziej przydaje się sekcja „Dodatkowy CSS”, w której można dodać własne style bez edytowania plików motywu.
Czym jest Customizer w WordPress?
Customizer to wbudowane narzędzie WordPressa dostępne w panelu administracyjnym pod nazwą „Personalizuj”. Służy do ustawiania elementów wyglądu witryny, takich jak kolory, logo, menu, widżety czy układ wybranych części strony. Zakres dostępnych opcji zależy od używanego motywu.
Największą zaletą jest podgląd zmian w czasie rzeczywistym. Możesz sprawdzić efekt przed zapisaniem go na stronie, także w widoku zbliżonym do ekranu telefonu. Customizer nie jest jednak Page Builderem. Elementor czy WPBakery służą do projektowania treści i układów konkretnych stron, natomiast Customizer zwykle zmienia ustawienia globalne motywu.
Jak wejść do Customizera i dodać CSS?
W polskiej wersji WordPressa ścieżka prowadzi przez menu Wygląd → Personalizuj. Następnie przejdź do sekcji „Dodatkowy CSS”, aby wpisać własne reguły stylów:
- Otwórz panel administracyjny WordPressa. Zaloguj się do kokpitu witryny.
- Przejdź do sekcji „Wygląd”. W menu po lewej wybierz pozycję „Personalizuj”.
- Otwórz „Dodatkowy CSS”. Ta sekcja najczęściej znajduje się na dole panelu bocznego Customizera.
- Wpisz regułę CSS. Kod dodany w polu zostanie zastosowany w podglądzie witryny.
- Sprawdź podgląd. Przełącz widok strony, aby ocenić wygląd na dużym i małym ekranie.
- Kliknij „Opublikuj”. Dopiero ten przycisk zapisuje zmiany i udostępnia je odwiedzającym.
Edytor może sygnalizować podstawowe błędy składni, na przykład brak klamry zamykającej. Nie zastępuje to pełnego testowania, ale pomaga wychwycić część literówek przed publikacją. Jeśli nie widzisz pozycji „Dodatkowy CSS”, motyw może korzystać z innego systemu edycji, na przykład Edytora witryny opartego na blokach.
Customizer, wtyczka czy motyw potomny?
Wybór metody zależy głównie od ilości kodu, potrzeby podglądu na żywo i tego, czy style mają przetrwać zmianę motywu.
| Metoda | Zalety | Wady |
|---|---|---|
| Customizer – „Dodatkowy CSS” | Nie wymaga instalacji, oferuje podgląd na żywo i podstawową kontrolę składni. | Style są powiązane z motywem i mogą zniknąć po jego zmianie. |
| Wtyczka zewnętrzna, na przykład Simple CSS | Może przechowywać CSS niezależnie od motywu, a niektóre wtyczki pozwalają stylować pojedyncze wpisy i strony. | Dochodzi kolejna wtyczka, a sposób sprawdzania kodu zależy od jej funkcji. |
| Motyw potomny | Dobrze sprawdza się przy większej ilości CSS i zachowuje zmiany podczas aktualizacji motywu nadrzędnego. | Wymaga konfiguracji i nie zapewnia tak wygodnego podglądu jak Customizer. |
Do kilku drobnych poprawek, takich jak zmiana odstępu, koloru lub wyglądu przycisku, zwykle wystarczy „Dodatkowy CSS”. Przy większym arkuszu stylów lepiej rozważyć motyw potomny. Wartość „ponad 1000 linii” może być sygnałem do przeniesienia kodu, ale nie jest sztywną regułą. Wtyczka typu Simple CSS sprawdzi się wtedy, gdy chcesz zachować style niezależnie od aktualnie aktywnego motywu.
Na co uważać przed publikacją CSS?
CSS dodany w Customizerze jest zazwyczaj przypisany do konkretnego motywu. Po przełączeniu na inny motyw kod może przestać działać albo nie być dostępny w nowym miejscu. Dlatego przed zmianą motywu skopiuj cały arkusz CSS i zapisz go poza WordPressem, na przykład w pliku tekstowym. Nie edytuj też bezpośrednio arkusza stylów motywu nadrzędnego, ponieważ aktualizacja motywu może nadpisać wprowadzone zmiany.
Przed kliknięciem „Opublikuj” sprawdź następujące elementy:
- Podgląd na komputerze i telefonie nie powoduje problemów z układem.
- Tekst nie wychodzi poza ekran i nie tworzy poziomego przewijania.
- Reguły CSS mają poprawne nawiasy klamrowe, średniki i selektory.
- Zmiana nie wpływa przypadkowo na inne strony lub elementy motywu.
- Kopia dodanego kodu została zapisana poza panelem WordPressa.
Jeśli po publikacji strona wygląda nieprawidłowo, wróć do „Dodatkowego CSS”, usuń ostatnią regułę lub ją popraw. Przy większych zmianach testuj najpierw na kopii witryny. Gdy potrzebujesz głębokiej ingerencji w strukturę strony, PHP albo pliki motywu, Customizer nie będzie właściwym narzędziem.
Najprostsza zasada jest taka: Customizer wybierz do niewielkich, globalnych poprawek wyglądu i szybkiego podglądu. Zanim rozbudujesz arkusz CSS, zdecyduj, czy kod powinien pozostać związany z motywem, czy lepiej przechowywać go w rozwiązaniu niezależnym od niego.
