Articles

How to Customize a WordPress Theme’s Colors

Posted in Marketing, WordPress by WP Engine

Last updated on December 23rd, 2020

customize wordpress theme colors

customize wordpress theme colors

Jedną z najlepszych części korzystania z WordPress jest to, że masz dostęp do tysięcy motywów, które można wykorzystać do dostosowania stylu witryny. Jednak czasami znajdziesz idealny motyw, tylko po to, aby zdać sobie sprawę, że nie posiada schematu kolorów, które lubisz.

To może być frustrujące, ale to nie musi wykoleić swoje plany. Przy odrobinie pracy, możesz zmienić opcje kolorów motywu i sprawić, że Twoja strona będzie wyglądać tak, jak chcesz.

W tym artykule będziemy badać dwa sposoby można dostosować kolory motywu WordPress, w tym ręcznego podejścia i metody wtyczki. Let’s get started!

How to Change WordPress Theme Colors

W tej sekcji, mamy zamiar pokazać, jak zmienić swoje kolory motywu WordPress sposób ręczny. Aby to zrobić, będziesz chciał użyć „motywu dziecka”, więc nie stracisz żadnych zmian, które wprowadzasz, gdy motyw „rodzica” jest aktualizowany.

Co więcej, ustawienie motywu dziecka jest prawie zawsze mądrym pomysłem, jeśli planujesz wprowadzić jakiekolwiek niestandardowe zmiany w ramach swojej witryny. Porozmawiajmy o tym, jak wykonać to zadanie.

Krok 1: Utwórz motyw dziecka

Motyw dziecka jest kopią motywu rodzica, która dziedziczy te same style. Możesz wprowadzać zmiany w jego kodzie bez wpływu na rodzica, i nie zostaną one nadpisane, gdy będziesz potrzebował zaktualizować motyw. To podejście umożliwia bezpieczną edycję stylów witryny, więc jeśli popełnisz jakieś błędy, możesz powrócić do rodzica i zacząć od nowa.

Jeśli chodzi o tworzenie motywu dziecka, istnieją dwa sposoby, w jakie możesz to zrobić. Po pierwsze, możesz zastosować podejście ręczne, które obejmujemy w tym artykule i możemy podsumować w czterech krokach:

  1. Połącz się ze swoją witryną za pośrednictwem protokołu przesyłania plików (FTP), używając klienta takiego jak FileZilla.
  2. Przejdź do swojego folderu WordPress Themes.
  3. Utwórz nowy folder dla swojego motywu dziecka.
  4. Ustaw plik style.css dla swojego motywu dziecka.

Jednakże, możesz zamiast tego zdecydować się na użycie wtyczki, jeśli nie czujesz się komfortowo edytując pliki WordPress ręcznie. Dla tego scenariusza zalecamy Child Theme Configurator. Dzięki tej wtyczce możesz wygenerować motyw dziecka i skonfigurować jego ustawienia za pomocą prostego menu.

Możesz swobodnie korzystać z dowolnej metody, którą wolisz, oczywiście. Gdy twój motyw dziecka jest skonfigurowany, możesz go aktywować i przejść do następnego kroku.

Krok 2: Zaloguj się do WordPressa i otwórz Customizer

Zanim będziesz mógł zmienić kolory motywu WordPress, będziesz musiał zalogować się do swojego pulpitu nawigacyjnego. Gdy już tam będziesz, przejdź do zakładki Wygląd > Edytor:

how to customize wordpress themes

how to customize wordpress themes

Znajdziesz tam prosty edytor tekstu, który umożliwia zmianę plików motywu dziecka. Pamiętaj, że możesz to również zrobić za pomocą FTP i swojego ulubionego edytora tekstu, ale wyniki będą takie same w obu przypadkach.

Jeśli wolisz podglądać zmiany, które wprowadzasz na żywo, możesz również edytować kolory swojego motywu za pomocą Customizera WordPress. Aby to zrobić, przejdź do zakładki Wygląd > Dostosuj, a następnie otwórz sekcję Dodatkowe CSS:

change wordpress theme colors

change wordpress theme colors

W obu przypadkach będziesz musiał użyć kaskadowych arkuszy stylów (CSS), aby zmienić kolory swojego motywu. To jest, gdzie nasz ostatni krok przychodzi w.

Krok 3: Zmień swoje kolory motywu WordPress

Ten krok jest dość prosty, jeśli jesteś już zaznajomiony z CSS. Każdy element w twoim motywie ma swoją własną nazwę lub 'klasę’, którą możesz kierować używając kodu CSS. Musisz wiedzieć jaka jest odpowiednia klasa, a następnie użyć kodów kolorów HEX aby ją zmienić.

Na przykład, jeśli chcesz zmienić kolor tła swojego motywu, możesz dodać fragment CSS taki jak ten do swojego motywu potomka (używając jednej z metod z ostatniej sekcji):

background-color: #XXXXXX;

Pierwsza część tego kodu kieruje właściwą klasę do elementu, który chcesz zmodyfikować. Następnie musisz tylko określić kolor HEX, którego chcesz użyć. Kiedy skończysz, nie zapomnij zapisać zmian w arkuszu stylów swojego motywu.

Na szczęście, ponieważ używasz motywu dziecka, możesz swobodnie eksperymentować bez obawy o uszkodzenie czegokolwiek na swojej stronie. Jeśli jesteś początkujący w CSS, sprawdź ten przewodnik, jak zidentyfikować elementy na swojej stronie. Następnie, możesz bawić się kodami kolorów HEX, aż znajdziesz kombinację, którą lubisz.

Wtyczki, które zmieniają kolory motywu WordPress

Jeśli wolisz używać wtyczek zamiast CSS, będziesz szczęśliwy wiedząc, że istnieje kilka opcji, których możesz użyć, aby dostosować kolory motywu WordPress. Przejdźmy do dwóch z naszych ulubionych narzędzi.

Wtyczka 1: Child Theme Configurator

change font color in wordpress

change font color in wordpress

Child Theme Configurator jest naszym najlepszym wyborem, ponieważ umożliwia zarówno utworzenie motywu dziecka, jak i dostosowanie jego schematu kolorów. Oznacza to, że możesz pominąć wiele kroków, które opisaliśmy wcześniej i zacząć eksperymentować z paletami kolorów o wiele szybciej. Dzięki tej wtyczce, będziesz w stanie zmienić kolory czcionek, odcienie tła i wiele więcej.

Wtyczka 2: Central Color Pallete

how to change wordpress color scheme

how to change wordpress color scheme

Jak sama nazwa wskazuje, Central Color Pallete umożliwia zmianę palety kolorów motywu. Ta wtyczka dobrze integruje się z wieloma popularnymi motywami i wtyczkami, i pozwala pominąć proces korzystania z edytora WordPress, aby wybrać i przełączyć kolory. Dwie z wtyczek, z którymi Central Color Palette działa płynnie, to Beaver Builder i Elementor.

Update Your WordPress Digital Experience with WP Engine

Niezależnie od tego, jaki motyw wybierzesz, będziesz potrzebował hosta, który zapewni Ci stabilność i wydajność, których będziesz potrzebował, aby uruchomić i dostosować swoją witrynę. Z WP Engine otrzymujesz obie te cechy, a także dostęp do doskonałego zespołu wsparcia.

Jeśli jesteś bardziej Do-It-Yourself (DIY) rodzaju osoby, publikujemy również wiele samouczków, które możesz wykorzystać do rozwiązywania problemów lub wprowadzania zmian na swojej stronie. Sprawdź nasze plany i daj nam spróbować!