Dodatkowy CSS WordPress: gdzie go wpisać i jak zmienić kolor przycisku

Zanim wpiszesz CSS: może wystarczy ustawienie

Najprostszy kolor przycisku to ten, który ustawisz bez kodu. Sprawdź najpierw:

• Motyw blokowy: Wygląd → Edytor → Style. W ustawieniach bloków albo elementów znajdziesz przyciski i zmienisz ich kolor tła i tekstu dla całej witryny.
• Motyw klasyczny: Wygląd → Dostosuj. Wiele motywów ma tam sekcję kolorów albo przycisków.
• Sklep WooCommerce: przyciski Dodaj do koszyka zwykle biorą kolor z motywu, więc zmiana w stylach motywu często wystarczy.

CSS jest potrzebny, gdy takiej opcji nie ma albo chcesz zmienić jeden konkretny przycisk.

Gdzie jest dodatkowy CSS w twoim motywie

CSS z edytora witryny i CSS z okna Dostosuj to dwa osobne miejsca. Opisuje to notatka zespołu WordPress o CSS w stylach globalnych. Jeśli masz motyw blokowy, a CSS wpisałeś kiedyś w Dostosuj, warto go przenieść w jedno miejsce, żeby za rok wiedzieć, gdzie szukać.

Jak zmienić kolor przycisku krok po kroku

1. Otwórz stronę z przyciskiem, kliknij go prawym przyciskiem myszy i wybierz Zbadaj. Zobaczysz klasę elementu, na przykład wp-block-button__link albo button.
2. Wejdź w miejsce na dodatkowy CSS z tabeli powyżej.
3. Wpisz regułę, na przykład:

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Patrz na podgląd. Jeśli kolor się nie zmienił, reguła motywu jest mocniejsza. Dodaj przed klasą nazwę obszaru, na przykład .site-footer, zamiast od razu wymuszać regułę dopiskiem important.
5. Opublikuj albo zapisz zmiany.
6. Sprawdź stronę w oknie prywatnym i na telefonie. Kolor tekstu musi być czytelny na nowym tle.

Kolory w przykładzie są przykładowe. Więcej sposobów, w tym przez motyw potomny i wtyczkę, opisuje poradnik Hostingera o własnym CSS w WordPress.

Co jeszcze załatwisz kilkoma linijkami CSS

Kolor przycisku to najczęstsza prośba, ale to samo pole przydaje się do innych drobnych poprawek wyglądu:

• Ukrycie elementu, na przykład daty pod wpisami albo napisu z nazwą autora, regułą display: none. Element dalej jest w kodzie strony, tylko go nie widać.
• Odstępy, gdy nagłówek przykleja się do zdjęcia albo przyciski stoją za blisko siebie na telefonie.
• Wielkość czcionki w jednym miejscu, na przykład w stopce, bez zmiany całej typografii motywu.
• Kolor linków w treści wpisów, gdy motyw daje kolor zbyt blady na białym tle.
• Wygląd na telefonie, przez regułę z warunkiem szerokości ekranu, która działa tylko na wąskich ekranach.

Dwa nawyki oszczędzą ci szukania za kilka miesięcy. Nad każdą regułą dopisz komentarz w znacznikach /* i */, na przykład „zielone przyciski, październik 2026”. Trzymaj też wszystkie poprawki w jednym miejscu, a nie po trochu w Dostosuj, w stylach edytora i w ustawieniach wtyczki od kreatora stron. Wtedy łatwo sprawdzisz, która reguła co robi, i bez strachu usuniesz tę, której już nie potrzebujesz.

Uwaga na ukrywanie. Jeśli schowasz w ten sposób tekst ważny dla klienta, na przykład informację o kosztach dostawy, zniknie on z ekranu, ale nie z obowiązków sklepu. Takie treści lepiej poprawić w ich źródle.

Kiedy dodatkowy CSS to za mało

Dodatkowy CSS zmienia wygląd, ale nie treść ani układ HTML. Nie dopiszesz nim nowego tekstu w stopce ani nie przeniesiesz przycisku do innej sekcji. Do tego służą szablony w edytorze witryny albo pliki w motywie potomnym WordPress. Ich opis jest w podręczniku motywów WordPress.

Jeśli po zapisie nic się nie zmienia, choć CSS jest poprawny, winna bywa pamięć podręczna. Kolejność czyszczenia opisujemy w tekście WordPress: nie widać zmian.

Jak czat zmienia CSS z podglądem

Wtyczka TellMyShop dla WordPress i WooCommerce pozwala, żeby twój czat (Claude albo ChatGPT) przeczytał obecny dodatkowy CSS i dopisał albo podmienił w nim fragment. Przed zapisem sprawdza, czy klamry się zgadzają, i ostrzega przed wczytywaniem stylów z obcych domen. W motywie blokowym zmienia też kolory i typografię w stylach globalnych.