Jak wyróżnić tekst w WordPress (przewodnik dla początkujących)

Czy chcesz podświetlić tekst w poście lub na stronie WordPress?

Możliwość wyróżnienia tekstu może pomóc skierować uwagę użytkownika na określony obszar tekstowy. Może to być świetne, aby podkreślić wezwanie do działania, ofertę specjalną lub po prostu uwydatnić określone zdania.

W tym artykule pokażemy, jak łatwo wyróżnić tekst w WordPress zarówno z wtyczką, jak i bez niej.

Highlighting text in WordPress

Dlaczego i kiedy wyróżniać tekst

Podświetlanie tekstu to łatwy sposób na podkreślenie ważnych informacji w treści. Pomaga to skierować uwagę użytkownika na ważne wezwania do działania.

Oto próbka tego, jak może wyglądać wyróżnianie tekstu:

Example of highlighted text

Domyślnie edytor treści WordPress nie ma opcji prostego zaznaczania i podświetlania dowolnego tekstu. Nadal można wyróżnić tekst, ustawiając go kursywą , zmieniając kolor tekstu lub pogrubiając .

Default paragraph toolbar in WordPress block editor

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo wyróżnić tekst w WordPress.

Metoda 1. Podświetl dowolny tekst w WordPress (nie wymaga HTML)

Najłatwiejszym sposobem wyróżnienia tekstu jest użycie wtyczki WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę Advanced Editor Tools . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress .

Zaawansowane narzędzia edytora (wcześniej znane jako TinyMCE Advanced) dodaje więcej opcji formatowania i rozszerza edytor bloków WordPress .

Po aktywowaniu wtyczki możesz edytować post lub stronę WordPress, na której chcesz zaznaczyć jakiś tekst. Po prostu zaznacz tekst, który chcesz zmodyfikować, a następnie kliknij strzałkę menu rozwijanego, aby uzyskać więcej opcji formatowania.

Highlighting text in WordPress using Advanced Editor Tools plugin

Z menu rozwijanego należy wybrać opcję „Mark”. Spowoduje to podświetlenie tekstu przy użyciu domyślnych kolorów.

Jednak rzeczywisty kolor może się różnić w zależności od kolorów motywu WordPress. Możesz teraz zapisać swój post / stronę i wyświetlić podgląd, aby zobaczyć podświetlony tekst w akcji.

Example of highlighted text

Spokojnie, prawda?

Jeśli jednak nie musisz bardzo często zaznaczać tekstu, ta następna metoda pozwala zrobić to samo bez użycia wtyczki.

Metoda 2. Ręczne zaznaczanie tekstu w WordPress

Ta opcja wymaga trochę kodu, ale jest łatwa do zaimplementowania.

W tym przykładzie będziemy używać elementu HTML „mark”. Można to wykorzystać do podkreślenia i zwrócenia uwagi na określoną część swojego tekstu.

Po prostu edytuj post lub stronę, na której chcesz zaznaczyć tekst. Następnie przejdź do akapitu zawierającego tekst, a następnie kliknij menu z trzema kropkami na pasku narzędzi bloku. W tym miejscu musisz wybrać opcję „Edytuj jako HTML”.

Editing a block as HTML

Następnie zobaczysz nieprzetworzony tekst w formacie HTML. Po prostu zawiń tekst, który chcesz wyróżnić, wewnątrz tagów i w następujący sposób:

 podświetlony tekst 
 

Możesz teraz przełączyć się z powrotem do trybu wizualnego, klikając ponownie menu z trzema kropkami i wybierając „Edytuj wizualnie” na pasku narzędzi bloku.

Edit visually

Obszar bloków przełączy się z powrotem do trybu wizualnego i zauważysz, że wybrany tekst jest podświetlony.

Highlighted text in the editor

Twój podświetlony tekst może wyglądać inaczej w zależności od motywu WordPress. Jednak zwykle jest to tylko żółte tło.

Jeśli chcesz to zmienić, możesz to zrobić, dodając własny niestandardowy CSS .

Po prostu przejdź do strony Wygląd »Dostosuj , aby uruchomić moduł dostosowywania motywu . W tym miejscu musisz przejść do karty „Dodatkowy arkusz CSS”.

Custom CSS settings

Tutaj możesz wkleić swój niestandardowy CSS. Możesz użyć następującego kodu CSS jako punktu wyjścia.

znak {
kolor tła: # ffd4a1;
}
 

Po zakończeniu naciśnij przycisk „Opublikuj”, aby zapisać zmiany. Możesz teraz odwiedzić swój blog WordPress , aby zobaczyć podświetlony tekst w akcji.

Custom CSS to change background color of highlighted text

Mamy nadzieję, że pomogło ci to nauczyć się wyróżniać tekst w WordPress. Możesz również chcieć zapoznać się z naszym przewodnikiem po najlepszych programach do tworzenia stron WordPress , które pomogą Ci tworzyć całkowicie niestandardowe projekty bez żadnego kodu, oraz nasze porównanie najlepszych usług marketingu e-mailowego w celu zwiększenia ruchu .

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .