Uwaga: Poniższy artykuł pomoże Ci w: Jak wyróżnić tekst HTML w WordPress (w 2022 r.) Samouczki krok po kroku dotyczące wyróżniania tekstu w Gutenbergu i klasycznym edytorze
Dzisiaj mówimy o jak podświetlić tekst HTML w wordpress (zarówno w edytorze Gutenberg, jak i w edytorze Classic), aby uzyskać podświetlony wynik w następujący sposób:
Oto przykład wyróżnionego tekstu.
Dla nowego blogera, gdy dopiero zaczynasz prowadzić bloga, wszystkie drobne techniczne elementy nauki WordPressa mogą być trochę niepożądanym wyzwaniem — na przykład wymyślenie, jak wyróżnić tekst w WordPressie (lub zmienić kolory i rozmiary czcionek) dla różnych elementów tekstowych na swoim blogu WordPress.
Cóż, dobrą wiadomością jest to, że chociaż samodzielna nauka podświetlania tekstu w WordPressie była mniej intuicyjna, teraz w 2022 roku stało się to znacznie łatwiejsze (zarówno w edytorze Gutenberg, jak i klasycznym).
Aby upewnić się, że obejmujemy wszystkie nasze bazy, pokażę ci jak zaznaczyć tekst HTML w WordPress zarówno przy użyciu edytora Gutenberg, jak i edytora klasycznego — w tym krótkim samouczku.
Przejdźmy teraz przez podświetlanie tekstu w WordPressie — bez wtyczek obniżających wydajność, które negatywnie wpływają na SEO bloga i szybkość ładowania strony.
Jak wyróżnić tekst HTML w WordPress (Gutenberg i Classic Editor)
- Jak wyróżnić tekst HTML w edytorze WordPress Gutenberg
- Jak wyróżnić tekst HTML w klasycznym edytorze WordPress
- Kiedy wyróżnić tekst HTML na swoim blogu WordPress (i dlaczego)
W porządku, teraz zanurzmy się i porozmawiajmy o podświetlaniu tekstu w WordPress!
1. Jak wyróżnić tekst HTML w edytorze WordPress Gutenberg
(Najlepszy) proces podświetlania tekstu zarówno w edytorach Gutenberg, jak i Classic jest w rzeczywistości dokładnie taki sam z technicznego punktu widzenia – wygląda po prostu nieco inaczej ze względu na wizualne zmiany w edytorze Gutenberg i Classic.
W obu przypadkach do tekstu, który chcesz wyróżnić, dodasz atrybut stylu HTML koloru tła.
To zdecydowanie najczystszy, najłatwiejszy i najbardziej wydajny sposób podświetlania tekstu w WordPress (bez konieczności instalowania wtyczek lub używania innych narzędzi, które wprowadzają niepotrzebny kod do Twojego bloga). Przejdźmy więc przez ten proces.
Oto krótki GIF (demonstracja zapętlonego wideo) pokazujący, jak wyróżniać tekst w edytorze WordPress Gutenberga:
Wiem, że ten GIF porusza się trochę szybko (i nie jest łatwy do odczytania na urządzeniach mobilnych). Oto samouczek krok po kroku dotyczący podświetlania tekstu w WordPressie za pomocą edytora Gutenberga (w 2 prostych krokach):
1. Wybierz opcję „Edytuj jako HTML” w akapicie, w którym znajduje się Twój tekst
Po kliknięciu opcji „” akapit tekstu zostanie przekonwertowany na coś, co wygląda tak (ze wszystkimi atrybutami HTML tekstu są teraz widoczne):
Od tego momentu dodasz teraz atrybut stylu koloru tła (do wersji HTML twojego akapitu), który podświetli twój tekst.
2. Dodaj atrybut stylu koloru tła (w trybie HTML), aby podświetlić tekst
To jest krok, który faktycznie podkreśla twój tekst, dodając ten atrybut stylu koloru tła na początku tekstu:
przykład tekstu, który chcesz wyróżnić
Wiedz, że możesz oczywiście zamienić tutaj na dowolne 6-cyfrowy kod szesnastkowy Lub Nazwa koloru HTML którego chcesz użyć jako koloru podświetlenia — i gotowe!
Nie zapomnij owinąć fragmentu tekstu, który chcesz wyróżnić, zamykającym tagiem (jak pokazano na powyższym zrzucie ekranu) — w przeciwnym razie reszta tekstu w twoim akapicie zostanie automatycznie podświetlona.
Po zakończeniu zaznaczania tekstu po prostu przełącz się z powrotem do „Edytuj wizualnie” w edytorze Gutenberga w następujący sposób:
Teraz twój tekst zostanie podświetlony i będzie wyglądał tak:
W porządku, nauczyłeś się teraz, jak wyróżniać tekst w edytorze Gutenberg WordPress — przejdźmy więc do tego samego z edytorem Classic.
2. Jak wyróżnić tekst HTML w klasycznym edytorze WordPress
Jeśli piszesz post na blogu w klasycznym edytorze WordPress i chcesz podkreślić określoną sekcję tekstu, podświetlając ją – jest to równie łatwe, jak w Gutenbergu.
Oto szybki GIF (demonstracja zapętlonego wideo) pokazujący, jak wyróżnić tekst w WordPressie za pomocą Klasyczny edytor:
Ponieważ ten GIF porusza się dość szybko i nie jest tak łatwy do zobaczenia na urządzeniach mobilnych jak na komputerach, oto szczegółowy opis tego, co się dzieje, gdy chcesz podświetlić tekst w WordPress za pomocą klasycznego edytora (w 2 prostych krokach ):
1. Za pomocą kursora zaznacz tekst, który chcesz zaznaczyć
Po zaznaczeniu tekstu, który chcesz wyróżnić, czas przełączyć tryb edycji na „” w prawym górnym rogu panelu edycji:
Teraz będziesz przeglądać wersję HTML swojego posta na blogu — i tutaj dodasz atrybut wyróżniający Twój tekst.
2. Dodaj atrybut stylu HTML koloru tła (w trybie tekstowym), aby wyróżnić tekst
W tym miejscu faktycznie wyróżnisz swój tekst, dodając do tekstu następujący atrybut stylu koloru tła:
przykład tekstu, który wkrótce zostanie podświetlony
Podobnie jak w powyższym samouczku Gutenberga, możesz również zamienić tutaj kod koloru, aby ustawić dowolny niestandardowy kolor podświetlenia tekstu.
Pamiętaj tylko, aby zamknąć fragment tekstu, który chcesz podświetlić, zamykającym znacznikiem , w przeciwnym razie zaznaczysz resztę treści w poście (od miejsca, w którym zacząłeś zmieniać kolor tła).
Teraz, gdy przełączysz się z powrotem do „Trybu wizualnego” w swoim klasycznym edytorze, podświetlony tekst będzie wyglądał tak:
przykład podświetlonego tekstu
I voila! Podświetliłeś swój tekst w Edytorze klasycznym! 👏
Ostatnie przemyślenia: czy powinieneś wyróżniać tekst HTML w WordPress (i dlaczego)?
Teraz, gdy spędziłem kilka minut, pokazując ci, jak podświetlić tekst w WordPressie… nie poruszyliśmy jeszcze kwestii, czy chciałbyś wyróżnić tekst w pierwszej kolejności, a kiedy zastosowanie podświetlonego tekstu może mieć pozytywny wpływ na zawartość Twojego bloga.
Oto kilka powodów, dla których wyróżniam tekst w treści mojego bloga:
- Aby zwrócić uwagę czytelnika na bardzo ważny wniosek lub lekcję
- Wyróżnić wizualnie określone słowo lub zdanie na stronie
- Aby podkreślić, że tekst jest klikalny (jak wezwanie do działania)
Dobra, to wszystko na dziś!
Właśnie nauczyłeś się, jak wyróżniać tekst w WordPressie (zarówno w edytorze Gutenberg, jak i edytorze klasycznym) — i jak wykorzystywać wyróżniony tekst na swoją korzyść.
Lubisz co widzisz? Zarejestruj się, aby otrzymywać ode mnie więcej samouczków technicznych i autentycznych porad dotyczących blogowania.
Chcesz więcej samouczków dotyczących blogowania dostarczanych prosto do skrzynki odbiorczej?
“*” Oznacza pole wymagane
