Pamiętasz używanie żółtego zakreślacza do zaznaczania ważnych fragmentów w podręcznikach? Cyfrowy odpowiednik w WordPress jest równie przydatny do wyróżniania kluczowych informacji na Twojej stronie internetowej.
Ale wielu początkujących nie zdaje sobie sprawy, jak łatwo jest dodać to formatowanie do ich treści.
Podczas prowadzenia WPBeginner zauważyliśmy, że proste techniki, takie jak podświetlanie tekstu, często mają największy wpływ na zaangażowanie czytelników z treścią.
Używany strategicznie, podświetlony tekst może kierować odwiedzających do Twoich najważniejszych punktów i poprawić zapamiętywanie przekazu.
W tym przewodniku pokażemy Ci kilka łatwych metod podświetlania tekstu w WordPress.
⚡Szybka odpowiedź: Jak podświetlić tekst w WordPressie
W pośpiechu? Szybko sprawdź najłatwiejsze sposoby podświetlania tekstu w WordPressie:
- Użyj natywnej opcji Podświetlenie (Metoda 1), jeśli chcesz podświetlić tylko kilka słów lub zdań w poszczególnych wpisach.
- Użyj WPCode, aby dodać globalną klasę wyróżnienia CSS (Metoda 2), jeśli chcesz uzyskać spójny, markowy styl wyróżnienia na całej swojej stronie.
Dlaczego warto wyróżniać tekst w WordPressie
Wyróżnianie tekstu w WordPressie pomaga zwrócić uwagę na najważniejsze części Twoich treści.
Ułatwia zauważenie kluczowych informacji, poprawia czytelność i zapewnia dostępność dla użytkowników, którzy mogą mieć problemy ze wzrokiem lub czytaniem.
Oto główne korzyści z wyróżniania tekstu:
- Poprawia widoczność kluczowych informacji: Pomaga wyróżnić ważne szczegóły, takie jak zniżki, oferty lub ostrzeżenia, aby czytelnicy ich nie przegapili.
- Zwiększa konwersje: Wyróżniając wezwania do działania lub specjalne oferty, możesz łatwiej kierować użytkowników do wykonania kolejnego kroku.
- Zwiększa czytelność: Ułatwia skanowanie długich treści, pomagając czytelnikom szybko znaleźć najbardziej istotne punkty.
- Wspiera dostępność: Może pomóc użytkownikom z wadami wzroku lub trudnościami w czytaniu lepiej zrozumieć i nawigować po Twoich treściach.
- Poprawia atrakcyjność wizualną: Prawidłowo używane wyróżnienia mogą sprawić, że Twoje treści będą wyglądać bardziej uporządkowanie i angażująco.
Najlepsze praktyki dotyczące skutecznego wyróżniania tekstu
Skoro już wiesz, dlaczego wyróżnianie tekstu jest przydatne, ważne jest, aby używać go we właściwy sposób.
Prawidłowo wykonane poprawia czytelność i zaangażowanie, ale nadmierne użycie może przynieść odwrotny skutek.
| Najlepsza praktyka | Wyjaśnienie |
|---|---|
| Używaj oszczędnie | Wyróżniaj tylko kluczowe frazy, wezwania do działania lub ostrzeżenia. Nadmierne używanie wyróżnień zmniejsza ich skuteczność. |
| Zachowaj kontrast | Upewnij się, że kolor wyróżnienia dobrze kontrastuje z tekstem, aby zapewnić lepszą czytelność i dostępność. Narzędzia takie jak kalkulator kontrastu WebAIM mogą pomóc. |
| Wybierz kolory marki | Używaj kolorów wyróżnienia, które pasują do brandingu Twojej strony internetowej, aby uzyskać spójny i profesjonalny wygląd. |
| Testuj na różnych urządzeniach | Sprawdź, jak wyróżniony tekst wygląda na komputerach stacjonarnych, tabletach i urządzeniach mobilnych, aby upewnić się, że pozostaje czytelny wszędzie. |
Mając to na uwadze, przyjrzyjmy się, jak łatwo wyróżnić tekst w WordPress. Możesz użyć poniższych szybkich linków, aby przejść do metody, którą chcesz zastosować:
Metoda 1: Podświetlanie tekstu w WordPress za pomocą edytora bloków
Ta metoda jest dla Ciebie, jeśli chcesz łatwo wyróżniać tekst w WordPress, używając edytora bloków (Gutenberg).
Najpierw musisz otworzyć istniejący lub nowy wpis w edytorze treści z paska bocznego administracji WordPress.
Po przejściu tam po prostu zaznacz tekst, który chcesz podświetlić. Następnie kliknij ikonę strzałki w dół na pasku narzędzi bloku, aby wyświetlić więcej opcji.
Spowoduje to otwarcie menu rozwijanego, w którym musisz wybrać opcję „Podświetlenie” z listy.
Na ekranie pojawi się narzędzie do wyboru koloru. Stąd musisz wybrać opcję „Kolor tła”.
Następnie wybierz domyślny kolor wyróżnienia z podanych opcji.
Możesz również wybrać niestandardowy kolor do wyróżnienia tekstu, klikając opcję „Niestandardowy”, aby otworzyć pełny selektor kolorów.
Na koniec nie zapomnij kliknąć przycisku „Opublikuj” lub „Zaktualizuj”, aby zapisać zmiany.
Możesz teraz odwiedzić swojego bloga WordPress, aby sprawdzić podświetlony tekst w akcji.
Jeśli kiedykolwiek będziesz chciał usunąć wyróżnienie, zaznacz ponownie wyróżniony tekst w edytorze bloków, kliknij ikonę strzałki w dół i wybierz „Wyróżnienie”.
Następnie wybierz opcję „Wyczyść” z selektora kolorów.
Metoda 2: Podświetlanie tekstu w WordPress za pomocą WPCode (zalecane)
Jeśli chcesz konsekwentnie używać określonego koloru do podświetlania tekstu w całej swojej witrynie WordPress, ta metoda jest dla Ciebie.
Główną zaletą tej metody jest globalna kontrola. Jeśli kiedykolwiek zdecydujesz się zmienić kolor podświetlenia, wystarczy raz zaktualizować fragment kodu. Spowoduje to automatyczne zaktualizowanie koloru podświetlenia na całej Twojej stronie.
Możesz łatwo wyróżnić tekst w WordPress, dodając kod CSS do plików swojego motywu. Jednak najmniejszy błąd podczas wprowadzania kodu może zepsuć Twoją stronę internetową, czyniąc ją niedostępną.
Dlatego polecamy używanie WPCode, który jest najlepszą wtyczką do fragmentów kodu WordPress na rynku. Ma ponad 3 miliony aktywnych instalacji i ocenę 4,9/5 gwiazdek w WordPress.org.
Po dokładnych testach stwierdziliśmy, że jest to najłatwiejszy i najbezpieczniejszy sposób dodawania kodu do Twojej witryny bez bezpośredniej edycji plików motywu. Wszystko to dzięki inteligentnemu sprawdzaniu poprawności kodu, wbudowanemu obsłudze błędów i bezpiecznemu środowisku wykonania.
Aby uzyskać szczegółowe informacje, zapoznaj się z naszą recenzją WPCode.
Krok 1: Zainstaluj i skonfiguruj WPCode
Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Więcej instrukcji znajdziesz w naszym przewodniku dla początkujących, jak zainstalować wtyczkę WordPress.
Uwaga: WPCode ma również bezpłatny plan, którego możesz użyć do tego samouczka. Jednak przejście na płatny plan odblokuje więcej funkcji, takich jak biblioteka fragmentów kodu w chmurze, inteligentna logika warunkowa i inne.
Krok 2: Utwórz niestandardowy fragment CSS
Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z paska bocznego administratora WordPress.
Następnie kliknij przycisk „+ Dodaj niestandardowy fragment” w opcji „Dodaj własny kod (nowy fragment)”.
Następnie musisz wybrać typ kodu. W tym samouczku wybierz opcję „Fragment kodu CSS”.
Następnie dodaj odpowiednią nazwę dla swojego fragmentu kodu.
Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wpisania nazwy dla swojego fragmentu kodu.
Nazwa jest tylko do Twojej wiadomości i może być dowolna, aby pomóc Ci zapamiętać, do czego służy kod.
Krok 3: Dodaj swój niestandardowy kod
Następnie skopiuj i wklej poniższy kod do pola „Podgląd kodu”:
mark {
background-color: #ffd4a1;
}
Gdy to zrobisz, dodaj kod szesnastkowy preferowanego koloru podświetlenia obok linii background-color w kodzie.
W naszym przykładzie używamy #ffd4a1, co jest jasnobrązowym kolorem.
Krok 4: Włącz automatyczne wstawianie i zapisz
Następnie przewiń w dół do sekcji „Wstawianie”.
Stąd wybierz metodę „Automatyczne wstawianie”, aby wykonać kod po aktywacji.
Następnie przejdź na górę strony i przełącz przełącznik z „Nieaktywny” na „Aktywny”.
Na koniec kliknij przycisk „Zapisz fragment”, aby zachować zmiany.
Krok 5: Edytuj post w widoku HTML
Teraz, gdy fragment kodu CSS został aktywowany, musimy zastosować formatowanie. Ponieważ jest to niestandardowy styl, na krótko przełączymy się do widoku HTML dla konkretnego bloku, aby objąć tekst.
Najpierw otwórz istniejący lub nowy wpis w edytorze bloków WordPress.
Stąd kliknij ikonę „Więcej opcji” (trzy pionowe kropki) na pasku narzędzi wybranego bloku. Spowoduje to otwarcie nowego menu rozwijanego, w którym musisz wybrać opcję „Edytuj jako HTML”.
Krok 6: Otocz tekst tagami <mark>
Zobaczysz teraz zawartość bloku w formacie HTML.
Tutaj po prostu umieść tekst, który chcesz podświetlić, wewnątrz tagów <mark> </mark> w ten sposób:
<mark>highlighted-text</mark>
Spowoduje to wyróżnienie tekstu kolorem szesnastkowym, który wybrałeś w swoim fragmencie WPCode.
Następnie kliknij opcję „Edytuj wizualnie” na pasku narzędzi bloku, aby przełączyć się z powrotem do edytora wizualnego.
Krok 7: Zapisz i opublikuj swój post
Po zakończeniu kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.
Teraz możesz odwiedzić swoją witrynę, aby sprawdzić podświetlony tekst w akcji.
Bonus: Użyj SeedProd do podświetlenia ważnych stron w Twojej witrynie
Omówiliśmy, jak formatować konkretne słowa w Twojej treści. Jednak czasami możesz chcieć podświetlić całe sekcje lub strony na swojej stronie, takie jak formularz kontaktowy lub kupon podarunkowy.
Na przykład, jeśli masz sklep internetowy i właśnie uruchomiłeś sezonową wyprzedaż, możesz chcieć wyróżnić tę ofertę na swojej stronie.
Możesz podświetlić te sekcje, tworząc dla nich strony docelowe. Są to samodzielne strony w Twojej witrynie, zaprojektowane w celu generowania leadów.
Aby tworzyć atrakcyjne wizualnie strony docelowe dla swojej witryny, zalecamy użycie SeedProd. Jest to najlepszy kreator stron docelowych WordPress na rynku, któremu zaufało ponad 1 milion witryn i który konsekwentnie otrzymuje oceny 4,9/5 gwiazdek w serwisie WordPress.org.
SeedProd oferuje kreator typu „przeciągnij i upuść”, ponad 350 gotowych szablonów i ponad 90 bloków.
Widzieliśmy, jak wiele firm, w tym sklepy e-commerce i agencje marketingowe, osiąga świetne wyniki dzięki SeedProd, często zgłaszając znaczące usprawnienia w generowaniu leadów i konwersjach.
Szczegółowe informacje znajdziesz w naszej recenzji SeedProd.
Plugin ułatwia tworzenie atrakcyjnych stron docelowych, które podkreślają ważne sekcje Twojej witryny, takie jak formularz kontaktowy, ogłoszenie o wyprzedaży, konkursy, opinie klientów, formularze zapisu, strony logowania i inne.
Oprócz tego możesz również używać SeedProd do tworzenia niestandardowych motywów, stron „wkrótce”, stron konserwacji i wielu innych.
Szczegółowe informacje znajdziesz w naszym poradniku, jak tworzyć strony docelowe w WordPress.
Często zadawane pytania dotyczące wyróżniania tekstu w WordPressie
Oto kilka pytań, które nasi czytelnicy często zadawali na temat wyróżniania tekstu w WordPress:
Jak zmienić kolor tekstu w WordPress?
Kolor tekstu w WordPress można zmienić za pomocą edytora bloków, zaznaczając tekst i dostosowując ustawienia koloru w opcji „Kolor tekstu” bloku. Pozwala to szybko stylizować treść bez kodowania.
Więcej informacji znajdziesz w naszym przewodniku na temat zmiany koloru tekstu w WordPress.
Jak wyróżnić tekst za pomocą HTML w WordPress?
Tekst w WordPress można wyróżnić za pomocą HTML, otaczając go tagiem <mark> lub używając stylów CSS inline. Daje to większą kontrolę nad wyglądem wyróżnienia.
Jeśli wolisz prostsze rozwiązanie, możesz również użyć wtyczki takiej jak WPCode do dodawania i zarządzania niestandardowymi fragmentami kodu CSS w panelu administracyjnym WordPress.
Którego klawisza Ctrl używa się do wyróżniania tekstu w WordPress?
Nie ma w WordPress konkretnego skrótu klawiszowego Ctrl do bezpośredniego wyróżniania tekstu. Wyróżnianie zazwyczaj odbywa się ręcznie, poprzez zaznaczenie tekstu myszą lub gładzikiem.
Możesz jednak użyć Ctrl + A (Cmd + A na Macu), aby zaznaczyć cały tekst w bloku lub edytorze, co ułatwia późniejsze zastosowanie formatowania, takiego jak wyróżnienie lub zmiana koloru.
Jak zmienić kolor linku w WordPress?
Kolor linku w WordPress można zmienić za pomocą ustawień personalizacji motywu lub niestandardowego CSS. Pozwala to dopasować style linków do projektu witryny, zapewniając spójny wygląd.
Instrukcje krok po kroku znajdziesz w naszym poradniku na temat zmiany koloru linku w WordPress.
Mamy nadzieję, że ten przewodnik pomógł Ci dowiedzieć się, jak wyróżniać tekst w WordPress. Możesz również zapoznać się z naszym przewodnikiem krok po kroku, jak dostosować kolory w WordPress, aby Twoja strona była bardziej estetyczna, oraz z naszym porównaniem najlepszych kreatorów stron AI dla WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Jiří Vaněk
Wyróżnianie tekstu świetnie przyciąga uwagę. Do tej pory używałem tylko podkreślenia, ale z kilku komentarzy pod moimi artykułami otrzymałem informację zwrotną, że niektórzy użytkownicy je przeoczyli. Dlatego bardziej sensowne jest dla mnie podkreślanie w ten sposób ważności tekstu. Użyłem fragmentu w wtyczce WP Code i tagów. Działa świetnie, a dzięki fragmentowi mogłem również użyć koloru dopasowanego do projektu mojej strony internetowej.
Mrteesurez
Podczas czytania Twojego posta na temat zmiany rozmiaru tekstu, widzę jego korzyści na mojej stronie edukacyjnej, ponieważ dbam o użytkowników, którzy mogą mieć problemy ze wzrokiem lub trudności w czytaniu. Podświetlanie tekstu to kolejny świetny sposób, który mogę również wykorzystać, aby wyraźniej pokazać niektóre ważne teksty użytkownikom.
Doceniam ten poradnik, dzięki WPbeginner !
Dennis Muthomi
Kiedy wybieram niestandardowy kolor dla podświetlenia, jak mogę dodać niestandardowy kolor według mojego wyboru, aby pojawił się w domyślnych 5 opcjach kolorów widocznych na dole selektora kolorów.
Byłoby pomocne, gdybym mógł zapisać niestandardowy kolor szesnastkowy, aby łatwo go ponownie użyć, zamiast wpisywać go ręcznie za każdym razem.
Wsparcie WPBeginner
Obecnie nie ma prostej metody, którą moglibyśmy polecić, ale jeśli ją znajdziemy, na pewno się nią podzielimy!
Administrator
Dennis Muthomi
cześć, dziękuję za poświęcony czas na odpowiedź, na pewno będę zwracać uwagę, jeśli odkryjesz dobrą metodę w przyszłości
Jiří Vaněk
W takim przypadku poleciłbym użycie zamiast tego kreatora stron. Na przykład Elementor ma podobną funkcję i używam jej na stronach internetowych, na których zainstalowany jest Elementor. Możesz ustawić niestandardową paletę kolorów, którą Elementor zapamiętuje, a następnie użyć jej do wyróżniania.
Ralph
Taki prosty sposób, aby coś się wyróżniało! Świetnie!
To musi być związane z moją personalizacją motywu, ale kiedy podświetlam sam tekst lub tło, zmienia się czcionka. Co jest dziwne, ponieważ podczas personalizacji ustawiłem wszystkie czcionki we wszystkich scenariuszach tylko na 2 czcionki. Pierwsza dla nagłówków, a druga dla wszystkiego innego. Chyba będę musiał spędzić na tym kolejne wieczory.
Wsparcie WPBeginner
To bardzo dziwne, zalecamy skontaktowanie się z pomocą techniczną Twojego motywu, aby sprawdzić, czy nie ma jakiegoś konfliktu stylów.
Administrator
Prakash Joshi
Witaj,… dziękuję za post.
Próbowałem używać znaczników HTML i narzędzi zaawansowanego edytora. Ale jest jeden problem. Podświetlony tekst automatycznie staje się pogrubiony. Dlaczego tak się dzieje? Czy masz jakieś rozwiązania??
Wsparcie WPBeginner
Jeśli dzieje się to automatycznie, powinieneś skontaktować się z pomocą techniczną swojego konkretnego motywu, aby upewnić się, że nie jest to konflikt z domyślnym stylem motywu.
Administrator
Luqman khokhar
Miły post o wyróżnianiu konkretnego tekstu, według mojego doświadczenia opcje 2 i 3 są w porządku, ponieważ wiele wtyczek nie jest dobrym rozwiązaniem. Mogą spowolnić Twoją witrynę.
Wsparcie WPBeginner
Dziękujemy, ale liczba pluginów nie jest głównym czynnikiem wpływającym na szybkość Twojej witryny. Zalecamy zapoznanie się z naszymi poniższymi rekomendacjami:
https://014.leahstevensyj.workers.dev/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Administrator