WordPress Customizer, nazywany w polskiej wersji Personalizatorem, to wbudowane narzędzie do zmiany wyglądu witryny z podglądem na żywo. Możesz sprawdzić efekt przed publikacją, bez instalowania dodatkowych wtyczek. Przy większych modyfikacjach warto jednak przenieść kod do wtyczki lub motywu potomnego, ponieważ ustawienia są powiązane z aktywnym motywem.
Czym jest WordPress Customizer?
Personalizator stanowi panel konfiguracji wyglądu strony. Jego zawartość zależy od aktywnego motywu, dlatego w jednej witrynie zobaczysz ustawienia logo, kolorów i typografii, a w innej także opcje nagłówka, stopki, układu wpisów czy WooCommerce.
Największą zaletą narzędzia jest podgląd na żywo. Zmiany pojawiają się w podglądzie witryny, ale nie są jeszcze widoczne dla odwiedzających. Możesz więc sprawdzić kolory, szerokości, układ menu lub rozmiar czcionki przed ich opublikowaniem. Nie potrzebujesz do tego dodatkowej wtyczki ani znajomości kodu.
Personalizator nie jest jednak niezależny od motywu. Po zmianie aktywnego motywu jego ustawienia mogą przestać obowiązywać, a CSS zapisany w sekcji „Dodatkowy CSS” nie zostanie automatycznie przeniesiony do nowego motywu.
Jak zacząć korzystać z Personalizatora?
W panelu administracyjnym WordPressa przejdź do sekcji Wygląd → Dostosuj. W niektórych tłumaczeniach lub motywach możesz spotkać nazwę „Personalizuj”. Następnie postępuj według kolejnych kroków:
- Otwórz panel podglądu – po lewej stronie zobaczysz dostępne sekcje ustawień, a po prawej podgląd witryny.
- Wybierz interesującą sekcję – mogą to być między innymi tożsamość witryny, kolory, menu, widżety, ustawienia strony głównej lub dodatkowy CSS.
- Sprawdzaj zmiany w podglądzie – przełącz widok komputera, tabletu i telefonu, jeśli motyw udostępnia takie opcje.
- Opublikuj konfigurację – kliknij „Opublikuj”, gdy wygląd jest gotowy. Bez tego przycisku zmiany pozostaną zapisane jako robocze albo nie zostaną zastosowane publicznie.
Liczba i nazwy sekcji nie są stałe. To motyw decyduje, jakie elementy można zmieniać z poziomu Customizera. Jeżeli nie widzisz konkretnej opcji, nie oznacza to usterki WordPressa. Funkcja może być dostępna w innym panelu motywu, w edytorze witryny albo wymagać dodatkowej wtyczki.
Jak bezpiecznie dodać własny CSS?
Do kilku prostych poprawek najwygodniejsza jest sekcja „Dodatkowy CSS”. Otwórz ją w Personalizatorze, wpisz reguły stylów i obserwuj rezultat w podglądzie:
- Przejdź do Wygląd → Dostosuj.
- Otwórz sekcję „Dodatkowy CSS”.
- Wpisz kod CSS, na przykład regułę zmieniającą kolor lub odstęp elementu.
- Sprawdź komunikaty edytora, przetestuj widok na różnych ekranach i kliknij „Opublikuj”.
Personalizator może ostrzec o podstawowych błędach składni, ale nie ocenia, czy kod daje zamierzony efekt. Nieprawidłowy selektor, zbyt ogólna reguła albo konflikt z CSS motywu nadal mogą zmienić wygląd innych elementów.
Gdy kodu przybywa, możesz rozważyć wtyczkę taką jak Simple CSS. Pozwala ona zachować CSS niezależnie od motywu, a także udostępnia dodatkowy edytor i – zależnie od konfiguracji – style przypisane do pojedynczych wpisów lub stron. Wtyczka jest alternatywą, nie obowiązkowym etapem pracy.
| Metoda | Łatwość użycia | Niezależność od motywu | Zastosowanie |
|---|---|---|---|
| Personalizator | Wysoka | Niska | Kilka prostych poprawek z podglądem na żywo |
| Wtyczka CSS | Wysoka lub średnia | Wyższa | CSS, który ma pozostać po zmianie motywu |
| Motyw potomny | Niższa | Powiązanie z motywem nadrzędnym | Większe zmiany CSS, PHP i plików szablonów |
Motyw potomny, czyli Child Theme, przechowuje własne modyfikacje poza plikami motywu nadrzędnego. Dzięki temu aktualizacja głównego motywu nie powinna usunąć dodanego kodu. To rozwiązanie wymaga większej wiedzy, ale sprawdza się przy rozbudowanych zmianach. Sam CSS pozostaje wtedy związany z danym motywem, więc po jego wymianie trzeba zaplanować przeniesienie stylów.
Wybór metody zależy głównie od ilości kodu, oczekiwanej trwałości i planów dotyczących motywu. Personalizator będzie rozsądnym wyborem dla kilku reguł. Wtyczka CSS sprawdzi się, gdy chcesz oddzielić style od motywu. Motyw potomny ma sens przy modyfikacjach obejmujących wiele plików lub zachowanie motywu.
Kiedy Customizer to za mało?
Personalizator służy przede wszystkim do konfiguracji przewidzianej przez motyw i do niewielkich zmian stylów. Nie zastąpi edycji szablonów, logiki PHP ani rozbudowanych zmian struktury strony. Przy takich zadaniach potrzebujesz motywu potomnego, własnej wtyczki albo rozwiązania przygotowanego przez dewelopera.
Specyficznym przykładem jest ekran logowania. Standardowy Customizer zwykle nie daje pełnej kontroli nad formularzem logowania WordPressa. Możesz wtedy użyć rozszerzenia takiego jak Custom Login Page Customizer, które dodaje osobny panel do zmiany tła, pól, przycisku i innych elementów tego ekranu.
Podobne rozszerzenia mogą dodawać opcje dla konkretnych motywów. Przykładowo Astra oferuje rozbudowane ustawienia nagłówka, stopki i układu treści, a Astra Pro rozszerza je o kolejne moduły. Nie należy jednak zakładać, że ustawienia dostępne w jednym motywie będą obecne w innym.
Nie edytuj bezpośrednio plików motywu nadrzędnego. Aktualizacja tego motywu może nadpisać ręcznie zmieniony arkusz stylów, plik functions.php albo szablon. W rezultacie modyfikacje znikną, a przy większych zmianach może dojść także do problemów z działaniem witryny. Kod umieszczaj w motywie potomnym, dedykowanej wtyczce lub rozwiązaniu typu Code Snippets. Przy programistycznym dodawaniu arkuszy stylów WordPress wykorzystuje funkcję wp_enqueue_style, zamiast ręcznego wstawiania pliku do sekcji <head>.
Jak pracować z kodem bez ryzyka?
Przed zmianami przygotuj kopię zapasową i, jeśli to możliwe, pracuj najpierw na środowisku testowym typu staging. Pomaga to sprawdzić wygląd na różnych urządzeniach bez narażania działającej witryny.
Najważniejsze zasady bezpiecznej pracy są następujące:
- Twórz backup plików i bazy danych przed większą zmianą.
- Testuj kod na stagingu, zanim trafi na stronę produkcyjną.
- Nie zapisuj własnych modyfikacji bezpośrednio w plikach motywu nadrzędnego.
- Sprawdzaj składnię CSS i testuj stronę po każdej większej zmianie.
- Zapisuj opis modyfikacji, aby później łatwiej ustalić, co zmieniło wygląd witryny.
Jeżeli zmieniasz motyw, skopiuj wcześniej CSS z Personalizatora i sprawdź, które selektory nadal pasują do nowej struktury. Przy zmianach PHP, szablonów lub funkcji wymagających ingerencji w strukturę motywu bezpieczniej skorzystać z motywu potomnego albo pomocy osoby znającej WordPress.
Do prostych korekt wybierz Personalizator i korzystaj z podglądu na żywo. Gdy ważniejsza staje się niezależność od motywu, rozważ wtyczkę CSS. Przy większej ingerencji w kod użyj motywu potomnego, a plików motywu nadrzędnego nie traktuj jako miejsca na trwałe modyfikacje.
