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 wyróżnić tekst w WordPress (przewodnik dla początkujących)

Szukasz sposobu na wyróżnienie tekstu w WordPress?

Podświetlanie tekstu może pomóc zwrócić uwagę użytkownika na konkretną część twojej treści. Może to być świetne rozwiązanie, aby pokazać wezwanie do działania, ofertę specjalną lub po prostu podkreślić konkretne zdania.

W tym artykule pokażemy, jak łatwo wyróżnić tekst we wpisie lub na stronie WordPress.

Adding text highlight color in WordPress

Dlaczego i kiedy wyróżniać tekst w WordPress

Podświetlanie tekstu to łatwy sposób na podkreślenie ważnych informacji w twojej treści. Kieruje uwagę użytkownika na szczegóły, których nie chcesz, aby przegapił.

Dla przykładu, wyróżnienie oferty rabatowej na twojej witrynie internetowej WordPress innym kolorem zwróci na nią uwagę czytelnika, pomagając wygenerować większą sprzedaż.

Oto przykład tego, jak podświetlanie tekstu może wyglądać we wpisie na blogu:

Preview for highlighting text in the block editor

Wyróżnianie tekstu innym kolorem może również pomóc użytkownikom z wadami wzroku lub trudnościami w czytaniu w łatwiejszej nawigacji i zrozumieniu treści. Może nawet poprawić wygląd twojej treści i uczynić ją bardziej atrakcyjną wizualnie.

Jednak wyróżnianie zbyt dużej ilości tekstu na twojej stronie może rozpraszać uwagę i zmniejszać jej skuteczność. Dlatego zalecamy wyróżnianie tylko ważnych informacji, takich jak wezwania do działania, ostrzeżenia i inne szczegóły, na które czytelnicy powinni zwrócić uwagę.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo wyróżnić tekst w WordPress. Możesz skorzystać z poniższych odnośników, aby przejść do wybranej metody:

Metoda 1: Podświetlanie tekstu w WordPress przy użyciu edytora bloków

Ta metoda jest dla Ciebie, jeśli chcesz łatwo wyróżnić tekst w WordPressie za pomocą edytora bloków (Gutenberg).

Najpierw należy otworzyć istniejący lub nowy wpis w edytorze treści z panelu bocznego administratora WordPress.

Następnie wystarczy zaznaczyć tekst, który ma zostać wyróżniony i kliknąć ikonkę „Więcej” na pasku narzędzi bloku u góry. Spowoduje to otwarcie menu rozwijanego, w którym należy wybrać opcję „Podświetl” z listy.

Expand the More dropdown menu from the block toolbar and select the Highlight option

Na twoim ekranie pojawi się teraz narzędzie do wybierania kolorów. W tym miejscu należy najpierw przejść do karty „Tło”.

Następnie można wybrać domyślny kolor podświetlenia spośród dostępnych opcji.

Można również wybrać własny kolor do podświetlenia tekstu, klikając opcję „Własny”, aby uruchomić narzędzie „Kroplomierz”.

Choose a highlight color from the color picker tool

Na koniec nie zapomnij kliknąć przycisku „Opublikuj” lub „Aktualizuj”, aby zapisać twoje zmiany.

Możesz teraz przejść na twój blog WordPress, aby sprawdzić wyróżniony tekst w działaniu.

Preview for highlighting text in the block editor

Metoda 2: Podświetlanie tekstu w WordPress przy użyciu WPCode (zalecane)

Jeśli chcesz konsekwentnie używać określonego koloru do wyróżniania tekstu na całej twojej witrynie internetowej WordPress, to ta metoda jest dla ciebie.

Możesz łatwo wyróżnić tekst w WordPressie, dodając kod CSS do plików twojego motywu. Jednak najmniejszy błąd podczas wpisz kod może zepsuć twoją witrynę internetową, czyniąc ją niedostępną.

Dlatego zalecamy korzystanie z WPCode, który jest najlepszą wtyczką do fragmentów kodu WordPress na rynku. Jest to najprostszy i najbezpieczniejszy sposób na dodanie kodu do twojej witryny internetowej bez bezpośredniej edycji plików motywu.

Tworzenie fragmentu kodu za pomocą WPCode

Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Uwaga: WPCode ma również darmowy plan, który można wykorzystać w tym poradniku. Uaktualnienie do płatnego planu odblokuje jednak więcej funkcji, takich jak biblioteka fragmentów kodu w chmurze, inteligentna logika warunkowa i wiele innych.

Po włączaniu, przejdź do strony Fragmenty kodu ” + Dodaj fragment z panelu bocznego administratora WordPress.

Następnie wystarczy kliknąć przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.

Add new snippet

Spowoduje to przejście do strony „Create Custom Snippet”, gdzie można rozpocząć od wpisania rodzaju nazwy dla twojego fragmentu kodu.

Następnie wybierz opcję „Fragment kodu CSS” z rozwijanego menu „Rodzaj kodu” w prawym rogu ekranu.

CSS Snippet as code type for the highlighting text in WordPress

Następnie skopiuj i wklej poniższy kod w polu „Podgląd kodu”:

mark {
background-color: #ffd4a1;
}

Gdy już to zrobisz, dodaj kod szesnastkowy dla twojego preferowanego koloru podświetlenia obok linii koloru tła w kodzie.

W naszym przykładzie używamy #ffd4a1, który jest kolorem jasnobrązowym.

Paste the code snippet to highlight text in WordPress

Następnie przewiń w dół do sekcji „Wstaw”.

W tym miejscu należy wybrać metodę „Automatyczne wstawienie”, aby kod został wykonany po włączaniu.

Choose an insertion method

Następnie przejdź na górę strony i przełącz przełącznik „Nieaktywne” na „Aktywne”.

Na koniec kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje zmiany.

Save text highlight code snippet

Podświetlanie tekstu w edytorze bloków

Teraz, gdy fragment kodu CSS został włączany, będziemy musieli dodać trochę kodu HTML w edytorze WordPress, aby podświetlić tekst na witrynie internetowej.

Najpierw otwórz istniejący lub nowy wpis w edytorze bloków WordPress.

Następnie kliknij ikonkę „Opcje” na pasku narzędzi bloku u góry. Spowoduje to otwarcie nowego menu rozwijanego, w którym należy wybrać opcję „Edytuj jako HTML”.

Choose the edit as HTML option from the Options dropdown menu in the block toolbar

Zobaczysz teraz treść bloku w formacie HTML.

Tutaj wystarczy zawinąć tekst, który ma zostać podświetlony wewnątrz tagów <mark> </mark> w następujący sposób:

<mark>highlighted-text</mark>

Spowoduje to podświetlenie tekstu w kolorze szesnastkowym, który wybrałeś we fragmencie kodu WPCode.

Następnie kliknij opcję „Edytuj wizualnie” na pasku narzędzi bloku, aby powrócić do edytora wizualnego.

Write HTML code on both sides of the text that you want to highlight

Po zakończeniu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać twoje zmiany.

Teraz użytkownik może przejść na twoją witrynę internetową, aby sprawdzić wyróżniony tekst w działaniu.

Demo of highlighting text in WordPress

Bonus: Użyj SeedProd, aby wyróżnić ważne strony w twojej witrynie internetowej

Oprócz wyróżniania tekstu we wpisach na blogu, możesz również chcieć wyróżnić ważne sekcje na twojej witrynie WordPress, takie jak formularz kontaktowy lub kupon podarunkowy.

Na przykład, jeśli prowadzisz sklep internetowy i właśnie uruchomiłeś sezonową wyprzedaż, możesz wyróżnić tę ofertę na swojej witrynie internetowej.

Możesz wyróżnić te sekcje, tworząc dla nich strony docelowe. Są to samodzielne strony w twojej witrynie internetowej, które mają na celu generowanie leadów.

Aby stworzyć atrakcyjne wizualnie strony docelowe dla twojej witryny internetowej, zalecamy użycie SeedProd. Jest to najlepszy kreator stron docelowych WordPress na rynku, który zawiera kreator typu „przeciągnij i upuść”, gotowe szablony i liczne bloki.

SeedProd

SeedProd ułatwia tworzenie atrakcyjnych stron docelowych, które podkreślają ważne sekcje twojej witryny internetowej, takie jak formularz kontaktowy, ogłoszenie sprzedaży, rozdania, referencje, formularze optin, strony do importowania i wiele innych.

Aby uzyskać szczegółowe informacje, możesz zapoznać się z naszym poradnikiem na temat tworzenia strony docelowej w WordPress.

Create a landing page

Poza tym, SeedProd umożliwia tworzenie własnych motywów, stron „coming soon”, stron obsługi technicznej i wielu innych.

Aby uzyskać więcej informacji, zobacz naszą pełną recenzję SeedProd.

Mamy nadzieję, że ten przewodnik pomógł ci nauczyć się wyróżniać tekst w WordPress. Możesz również zapoznać się z naszym przewodnikiem krok po kroku, jak dostosować kolory w WordPress, aby Twoja witryna internetowa była bardziej estetyczna, a także z naszym porównaniem najlepszych usług e-mail marketingu, aby zwiększyć Twój ruch.

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

7 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    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. Ralph

    Such a simple way to make something stand out! Great!
    This must be related to my theme customization, but when I highlight text itself or the background, it changes the font. Which is weird as at customizing I set all fonts in all scenarios to only 2 fonts. First for headings and second for all the rest. I have to spend another evening on that, I guess.

    • WPBeginner Support

      That is very strange, we would recommend reaching out to your theme’s support to see if there is some kind of styling conflict.

      Administrator

  3. Prakash Joshi

    Hello,… thanks for the post.
    I tried using mark HTML and advanced editor tools. But there’s one problem. The highlighted text is being bold automatically. Why is this happening ? Do you have any solutions??

    • WPBeginner Support

      If it happens automatically then you would want to check with the support for your specific theme to ensure it is not a conflict with the theme’s default styling.

      Administrator

  4. Luqman khokhar

    Nice post about, highlight the specific text as per my experience 2nd and 3rd option is fine because lots of plugins are not a good approach. They can slow your site.

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ę.