Gdzie dodać kod CSS w WordPressie

Często otrzymujemy pytania dotyczące tego gdzie można wstawić własny kod CSS w WordPressie. Jeśli prowadzisz swojego bloga, stronę czy Portal na gotowym motywie to prędzej czy później będziesz chciał zmienić lub dostosować jakiś element do swoich potrzeb.

Kaskadowe arkusze stylów, w skrócie CSS, to język, który opisuje wygląd elementów na stronie. W WordPressie każdy motyw musi posiadać plik style.css. To w nim, w znacznej części motywów, będą zapisane style które opisują wygląd poszczególnych elementów.

Jednak bezpośrednia edycja pliku style.css nie jest poprawnym sposobem dodania styli.

Plik style.css — Błędny sposób – wklejanie w pliku style.css

Zakładając, że wiesz już jak nazywa się element, który chcesz ostylować i napisałeś już kod, który formatuje jego wygląd, stajesz przed dylematem gdzie dodać kod CSS. Jest kilka miejsc gdzie możesz go umieścić. Najpopularniejszym, lecz złym rozwiązaniem jest dopisanie kodu w pliku np. style.css, w którym znajdują się już style motywu. Pamiętaj że w momencie aktualizacji motywu którego używasz, plik style.css może zostać zastąpiony i stracisz wprowadzone zmiany. Rozwiązanie to sprawdzi się tylko w przypadku motywów, które sam stworzyłeś. W większości wypadków znacznie lepszym rozwiązaniem jest stworzenie motywu potomnego.

Poprawne umieszczenie kodu css w WordPressie – motyw potomny

Motyw potomny – z angielskiego child theme – pozwala na dostosowanie motywu do własnych preferencji nie zmieniając plików oryginalnego motywu. Motyw potomny dziedziczy funkcje i wygląd z motywu rodzica.

Żeby utworzyć motyw potomny sprawdź jak nazywa się folder motywu, który aktualnie używasz. Następnie utwórz nowy katalog nazywając go nazwa-child, gdzie nazwa to nazwa oryginalnego motywu. Jeśli motyw rodzica znajduje się w folderze twentyseventeen, stwórz nowy katalog nazywając go twentyseventeen-child. W nowo utworzonym katalogu stwórz plik style.css z poniższą zawartością:

/*
Theme Name: Mój Twenty Seventeen
Template: twentyseventeen Version: 1.0.0
*/
/* Dodaj swój Css poniżej tego komentarza */

Drugi poprawny sposób: Dodanie styli CSS w personalizacji

Kolejnym sposobem na dodanie własnych styli do motywu jest dodanie ich z zaplecza strony. Z menu administratora wybierz Wygląd a następnie Personalizacja. Po otwarciu nowego widoku, zobaczysz swoją stronę po prawej stronie, po lewej zaś opcje motywu, wybierając Dodatkowy CSS zobaczysz informacje dotyczące wprowadzania kodu. Poniżej komunikatu znajduje się miejsce w którym możesz wprowadzać kod CSS.

Kod taki zapisany jest w bazie danych a dołączany jest do strony bezpośrednio w jej źródle.