Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak zmienić kolor tekstu w WordPress (4 proste metody)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz zmienić kolor tekstu w WordPress?

Kolor może zwrócić uwagę na najważniejsze treści na stronie i wzmocnić branding twojej witryny internetowej. Zmiana koloru tekstu może również sprawić, że twoja witryna będzie łatwiejsza do odczytania, szczególnie dla osób z problemami ze wzrokiem.

W tym przewodniku pokażemy ci, jak łatwo zmienić kolor tekstu na twojej witrynie internetowej WordPress.

How to change the text color in WordPress

Dlaczego warto zmienić kolor tekstu w WordPress?

Istnieje wiele powodów, dla których warto zmienić kolor tekstu w WordPress. Może chcesz wyróżnić wezwanie do działania na stronie docelowej, a może chcesz użyć kolorowych podtytułów na twojej witrynie.

Czasami możesz nawet chcieć zmienić kolor tekstu na całej witrynie internetowej. Na przykład, być może twój motyw WordPress używa szarego koloru pisma, ale wolałbyś użyć czarnego, aby uzyskać lepszy kontrast z kolorem tła.

Możesz również użyć koloru, aby wywołać emocje u odwiedzających Twoją stronę. Na przykład, wiele osób uważa, że kolor niebieski tworzy poczucie zaufania i niezawodności. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat wyboru idealnego schematu kolorów dla twojej witryny internetowej WordPress.

To powiedziawszy, zobaczmy, jak można zmienić kolor tekstu w WordPress. Po prostu użyj poniższych odnośników, aby przejść do preferowanej metody:

Metoda 1: Korzystanie z edytora bloków (najlepsze dla małych ilości tekstu)

Jeśli chcesz zmienić tylko kilka słów, akapit lub nagłówek we wpisie, możesz skorzystać z edytora treści WordPress.

Aby rozpocząć, otwórz wpis lub stronę, na której chcesz zmienić kolor tekstu lub utwórz nową stronę.

Jeśli jeszcze tego nie zrobiłeś, wpisz tekst, który chcesz dostosować. W zależności od tekstu może być konieczne dodanie akapitu, nagłówka lub innego bloku, który akceptuje tekst. Aby uzyskać pomoc w tym zakresie, zapoznaj się z naszym przewodnikiem na temat korzystania z edytora bloków WordPress.

Gdy masz już tekst, możesz zmienić jego kolor.

Zmiana koloru tekstu w bloku

W tym pierwszym przykładzie zmienimy kolor tekstu dla całego bloku. Jest to dobry sposób na wyróżnienie całej sekcji treści, na przykład całego akapitu.

Wystarczy kliknąć blok, a następnie wybrać kartę „Blokuj” w menu po prawej stronie.

Changing the text color of a WordPress block

Gdy to zrobisz, znajdź sekcję „Kolor” i kliknij „Tekst”.

Edytor wizualny pokaże teraz kilka kolorów, które uzupełniają twój motyw WordPress. Możesz po prostu kliknąć dowolny kolor, aby zmienić cały tekst wewnątrz tego bloku.

Choosing a color from your WordPress theme

Aby użyć innego koloru, wystarczy kliknąć pole w górnej części wyskakującego okienka.

Spowoduje to otwarcie selektora, w którym można wybrać nowy kolor pisma.

Customizing your text using the color picker

Innym rodzajem opcji jest wpisanie kodu szesnastkowego, który jest kodem HTML dla określonego koloru. Jest to przydatne, jeśli chcesz użyć bardzo konkretnego koloru, takiego jak dokładny odcień czerwieni z logo twojej witryny internetowej.

Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, pomocna może być witryna taka jak Kody kolorów HTML. Tutaj można zapoznać się z różnymi kolorami i uzyskać ich kody szesnastkowe.

Gdy masz już kod, wklej go lub wpisz w polu „Hex”.

Customizing text using a hex code

Jeśli zmienisz zdanie i zechcesz przywrócić domyślny kolor tekstu, kliknij kropkowany przycisk w menu po prawej stronie.

Opcje, które zobaczysz, będą się różnić w zależności od tego, czy zmieniłeś również kolor tła bloku, więc może być konieczne kliknięcie „Tekst” lub „Resetuj wszystko”.

Restoring the theme's default text color

Zmiana koloru tekstu słowa lub frazy

Czasami możesz chcieć zmienić kolor tylko konkretnego słowa, frazy lub zdania, takiego jak wezwanie do działania na twojej stronie sprzedaży.

Aby to zrobić, wystarczy podświetlić słowo lub frazę, którą chcesz zmienić w edytorze bloków WordPress. Następnie kliknij małą strzałkę w dół na pasku narzędzi edytora treści i kliknij „Podświetl”.

Changing the text color for specific words in WordPress

Spowoduje to otwarcie wyskakującego okienka pokazującego kilka kolorów, które będą dobrze wyglądać z twoim obecnym, aktualnym motywem.

Możesz także wybrać kolor ręcznie lub nawet użyć kodu szesnastkowego, postępując zgodnie z tym samym procesem opisanym powyżej.

How to change the text color in WordPress

Metoda 2: Korzystanie z konfiguratora motywu (tylko dla motywów klasycznych)

Kolor może przyciągać uwagę do najważniejszych treści na stronie, ale wiele różnych kolorów może być przytłaczających. Mając to na uwadze, zazwyczaj warto używać tego samego koloru tekstu na większości twojej witryny internetowej WordPress.

Ręczna zmiana każdej strony i wpisu za pomocą edytora bloków zajęłaby dużo czasu, więc zamiast tego zalecamy zmianę samego motywu za pomocą konfiguratora motywów.

Aby rozpocząć, przejdź do Wygląd ” Dostosuj.

The WordPress theme customizer

Teraz należy znaleźć ustawienia tekstu motywu. Każdy motyw jest inny, ale zazwyczaj trzeba szukać opcji „Typografia”.

Na naszych obrazkach używamy OceanWP.

The theme customizer Typography settings

Kliknij „Typografia” lub podobne ustawienie. W tym momencie zwykle zobaczysz wszystkie różne rodzaje tekstu używane w motywie, takie jak Nagłówek 1 i Tytuł strony.

Aby zmienić tekst wewnątrz twoich wpisów i stron, kliknij sekcję „Body” lub podobną.

Changing the body text color using the WordPress theme customizer

Aby dostosować kolor tekstu, znajdź sekcję „Kolor pisma”.

Następnie kliknij „Wybierz kolor”.

The font color selector

Spowoduje to otwarcie selektora. Możesz użyć jednego z gotowych kolorów, wybrać nowy kolor za pomocą ustawień lub wpisać rodzaj kodu szesnastkowego.

Jeśli chcesz przywrócić domyślny kolor motywu w dowolnym momencie, po prostu kliknij „Domyślny”.

The color picker settings in the theme customizer

Za pomocą tych ustawień można również zmienić wielkość liter, styl, odstępy między literami i nie tylko.

Gdy będziesz zadowolony z wyglądu tekstu, kliknij przycisk „Opublikuj” u góry ekranu.

Metoda 3: Korzystanie z pełnego edytora witryny (tylko dla motywów blokowych)

Jeśli korzystasz z motywu opartego na blokach, takiego jak ThemeIsle Hestia Pro lub Twenty Twenty-Three, proces zmiany koloru tekstu motywu jest nieco inny.

Aby dostosować tekst za pomocą Edytora całej witryny, przejdź do Motywy „ Edytor.

Selecting the Full-Site Editor from the WordPress admin panel

Teraz zobaczysz kilka menu, aby dostosować wygląd twojej witryny internetowej.

Tutaj należy wybrać opcję „Style”. Ta sekcja definiuje globalne kolory, typografię i układ twojej witryny internetowej.

Choosing Styles in the Full Site Editor

Na następnym ekranie zobaczysz kilka kombinacji stylów do wyboru. Jeśli chcesz całkowicie zmienić wygląd twojego motywu blokowego, możesz po prostu wybrać jedną z dostępnych opcji.

Ale dla celów demonstracyjnych przejdziemy dalej i klikniemy przycisk ołówka „Edytuj style”.

Clicking Edit Styles in Full Site Editor

Pojawi się teraz pełny edytor witryny i otwarta zostanie karta Style.

Kliknij „Kolory”.

Selecting Colors in the Full Site Editor

Panel boczny pokaże kilka elementów, których ustawienia kolorów można zmienić, takich jak tekst, odnośniki, podpisy, przyciski i nagłówki.

Każdy z nich będzie miał inne ustawienia kolorów, więc pamiętaj, aby je zbadać, aby zobaczyć, co potrafią.

Elements whose color you can change in the WordPress Full Site Editor

Użyjmy przykładu, klikając „Nagłówek”.

Aby zmienić kolor nagłówka, można wybrać jeden z predefiniowanych kolorów motywu lub użyć własnego, klikając selektor kolorów.

How to change the heading text color in the WordPress Full Site Editor

Gdy będziesz zadowolony z wyglądu twoich kolorów tekstu, po prostu kliknij przycisk „Zapisz”. Wszystkie wprowadzone zmiany zostaną zastosowane do wszystkich twoich stron i wpisów.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat pełnej edycji witryny WordPress.

Metoda 4: Zmiana koloru tekstu za pomocą kodu CSS (zalecane)

W zależności od twojego motywu, zmiana tekstu na całej witrynie za pomocą menu konfiguratora może nie być możliwa. Jedną z opcji jest ręczna zmiana każdego fragmentu tekstu przy użyciu jednej z metod opisanych w tym wpisie. Jednak zajęłoby to dużo czasu i wysiłku.

Dobrą wiadomością jest to, że można dostosować tekst na całej witrynie, dodając własny CSS. Co więcej, ta metoda pozwala zdefiniować różne kolory dla określonych rodzajów tekstu, takich jak nagłówek 1 (h1) lub tekst akapitu (p).

Ponieważ edycja i konfigurator motywu WordPress mogą się zmieniać w zależności od motywu, zalecamy użycie WPCode, aby dodać własny CSS do twojej witryny.

WPCode to najlepsza wtyczka do fragmentów kodu używana przez ponad 1 milion witryn internetowych WordPress. Ułatwia dodawanie własnych CSS, PHP, HTML i innych bez konieczności edytowania rdzennych plików WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu udaj się do Code Snippets ” Add Snippet.

How to add custom CSS to your site using WPCode

Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączać strony załączników i wiele więcej.

Po prostu najedź kursorem myszy na „Dodaj swój własny kod”, a następnie wybierz „Użyj fragmentu kodu”, gdy się pojawi.

Adding a custom snippet to WordPress

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.

Następnie otwórz listę rozwijaną „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

Adding custom CSS to WordPress

Następnie możesz dodać własny CSS do małego edytora kodu. Będziesz musiał wpisać selektor dla rodzaju tekstu, który konfigurujesz, a następnie kod szesnastkowy dla koloru, którego chcesz użyć.

Można na przykład zmienić kolor tekstu akapitu, dodając poniższe polecenie:

p { color:#990000; }

Jeśli chcesz użyć innego koloru dla nagłówków twojej witryny, musisz użyć selektorów h1, h2, h3 lub podobnych.

Widać to na poniższym obrazku.

Changing the text color using custom code

Jeśli nie jesteś pewien, jakiego kodu szesnastkowego użyć, możesz skorzystać z witryny takiej jak Kody kolorów HTML.

Gdy będziesz zadowolony z fragmentu kodu, przewiń do sekcji „Wstaw”. WPCode może dodać CSS do różnych miejsc, takich jak po każdym wpisie, tylko frontend lub tylko administrator.

Aby zmienić tekst na całym twoim blogu WordPress, kliknij opcję „Wstaw automatycznie”, jeśli nie jest jeszcze wybrana. Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.

How to add custom CSS across your entire website

Gdy to zrobisz, przewiń do góry ekranu i kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij przycisk „Zapisz fragment”, aby uruchomić fragment kodu CSS.

How to change the text color using WPCode

Teraz, jeśli przejdziesz na swoją witrynę, zobaczysz własny tekst na żywo.

Jeśli chcesz użyć innego koloru tekstu w dowolnym miejscu lub po prostu dodać więcej CSS do tego fragmentu, po prostu przejdź do Fragmenty kodu Fragmenty kodu. Tutaj najedź kursorem myszy na fragment kodu, który właśnie utworzyłeś i kliknij „Edytuj”, gdy się pojawi.

Editing a code snippet in WordPress

Możesz teraz edytować fragment kodu, aby użyć nowego koloru, a następnie kliknąć „Zapisz fragment”, aby wprowadzić zmianę na twojej witrynie internetowej.

Oprócz koloru tekstu, można również użyć WPCode do zmiany domyślnego koloru po zaznaczeniu tekstu lub włączenia podświetlenia tekstu na stronie i treści wpisu.

W wielu przypadkach twoje strony docelowe i strony sprzedaży powinny wyglądać inaczej niż reszta witryny internetowej. Dzięki temu będą się wyróżniać, co może zwiększyć liczbę konwersji.

Jeśli chcesz zmienić kolor tekstu na stronie docelowej lub sprzedażowej, zalecamy użycie SeedProd. Jest to najlepsza wtyczka do landing page’y dla WordPressa i posiada łatwy w użyciu kreator stron typu „przeciągnij i upuść”.

SeedProd zawiera ponad 90 bloków, które można po prostu przeciągnąć i upuścić na twój układ. Bloki te można następnie dostosować na wiele różnych sposobów, w tym zmieniając kolor tekstu.

Jeśli korzystasz z własnej strony, aby uzyskać więcej konwersji, SeedProd współpracuje z wieloma popularnymi narzędziami innych firm, których możesz już używać do zarządzania konwersjami.

Należą do nich najlepsze usługi e-mail marketingu, WooCommerce, Google Analytics i inne.

Najpierw należy zainstalować i włączyć SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: Istnieje również darmowa wersja SeedProd, która umożliwia tworzenie własnych stron głównych, stron docelowych i innych. W tym przewodniku będziemy jednak korzystać z SeedProd Pro, ponieważ ma on znacznie więcej szablonów i zaawansowanych bloków.

Po włączaniu wtyczki, SeedProd poprosi o twój klucz licencyjny.

Adding the license key to SeedProd

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpisz klucz licencyjny, przejdź dalej i kliknij przycisk „Zweryfikuj klucz”.

Następnie należy przejść na stronę SeedProd ” Pages i kliknąć przycisk „Add New Landing Page”.

How to create a new landing page in SeedProd

Następnie nadszedł czas na wybór szablonu. SeedProd oferuje ponad 300 profesjonalnie zaprojektowanych szablonów, które możesz konfigurować za pomocą własnych obrazków, tekstu, kolorów i nie tylko.

Aby wybrać szablon, po prostu najedź na niego kursorem myszy, a następnie kliknij ikonkę „Znacznik wyboru”.

Choosing a SeedProd template

Używamy szablonu „Juicy Sales Page” na wszystkich naszych obrazkach, ale możesz użyć dowolnego projektu.

Następnie wpisz rodzaj nazwy dla własnej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny inny.

Aby pomóc wyszukiwarkom zrozumieć, o czym jest strona, możesz dodać kilka odpowiednich słów kluczowych. Może to poprawić twoje SEO WordPress.

Gdy jesteś zadowolony z informacji, które wpiszesz, kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Adding relevant keywords to a page URL

Następnie zostaniesz przeniesiony do kreatora stron SeedProd typu „przeciągnij i upuść”, w którym możesz dostosować swój szablon.

Edytor SeedProd pokazuje podgląd na żywo twojego projektu po prawej stronie i niektóre ustawienia bloków po lewej stronie.

The SeedProd drag and drop page builder

Menu po lewej stronie zawiera również bloki, które można przeciągnąć na twój układ.

Można na przykład przeciągać i upuszczać standardowe bloki, takie jak przyciski i obrazki, lub korzystać z zaawansowanych bloków, takich jak liczniki czasu, animowane nagłówki, przyciski udostępniania w serwisach społecznościowych i inne.

Adding a social sharing block to a custom page

SeedProd zawiera również „Sekcje”, które są zbiorami bloków często używanych razem. Na przykład SeedProd ma nagłówek, obrazek wyróżniający, wezwanie do działania, referencje, formularz kontaktowy, często zadawane pytania, funkcje, sekcje stopki i wiele innych. Może to pomóc w szybkim stworzeniu profesjonalnie zaprojektowanej strony.

Aby przejrzeć poszczególne sekcje, wystarczy kliknąć kartę „Sekcje”. Aby wyświetlić podgląd dowolnej sekcji, najedź na nią kursorem myszy, a następnie kliknij ikonkę lupy.

The SeedProd ready-made sections

Aby dodać sekcję do twojego projektu, po prostu kliknij „Wybierz tę sekcję”.

Spowoduje to dodanie sekcji na dole twojej strony.

Adding a ready-made section to your website

Możesz przenosić sekcje i bloki w twoim układzie za pomocą metody „przeciągnij i upuść”.

Aby dostosować blok, wystarczy kliknąć, aby wybrać go w twoim układzie. Menu po lewej stronie pokaże teraz wszystkie ustawienia, których można użyć do skonfigurowania tego bloku.

Customizing SeedProd blocks on a landing page

Aby zmienić kolor tekstu, wystarczy kliknąć dowolny blok zawierający tekst.

W menu po lewej stronie wybierz kartę „Zaawansowane”. W sekcji „Style” kliknij „Kolor”.

Changing the text color using SeedProd

Spowoduje to otwarcie okna podręcznego, w którym można wybrać nowy kolor tekstu.

Innym rodzajem opcji jest wpisanie kodu szesnastkowego w polu „Hex”.

Customizing the text color using a page builder plugin

Możesz teraz zmienić kolor tekstu dla dowolnego innego bloku, wykonując ten sam proces opisany powyżej.

Kiedy jesteś zadowolony z wyglądu strony, nadszedł czas, aby ją opublikować, klikając przycisk „Zapisz”. Następnie wybierz „Opublikuj”.

Publishing a page with custom text colors

Jeśli przejdziesz na swój sklep internetowy, blog lub witrynę internetową, zobaczysz nową stronę w działaniu, wraz z Twoimi własnymi konfiguratorami kolorów tekstu.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak zmienić kolor tekstu w WordPress. Być może spodoba ci się również nasz poradnik na temat tego, jak zwiększyć ruch na twoim blogu oraz nasz wybór najlepszych usług e-mail marketingu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

19 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    QUICK QUESTION…. is there a way to customize the highlight color when selecting text?
    It would be awesome if that could match my brand’s color palette too instead of the default blue color.
    thanks in advance for any insight on that! :-)

    • WPBeginner Comments says

      In many cases this can be set with the theme settings in the Customizer.

      If it’s not available, the theme may not have included this feature, in which case you may have to use CSS.

    • WPBeginner Comments says

      If you are trying to customize the link color, this usually can be set in the Customizer, if the theme has this feature.

      Otherwise, CSS could be used to change the link color.

    • WPBeginner Support says

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Administrator

    • Jiří Vaněk says

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  3. Kayla says

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

  4. Ekta says

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

  5. Bob Wood says

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

  6. Tunde Sanusi (Tuham) says

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.