Czy chcesz zmienić domyślny kolor zaznaczenia tekstu w WordPress?
Czasami możesz chcieć, aby domyślny kolor sekcji tekstu bardziej kontrastował z kolorem tła. W ten sposób użytkownicy mogą dokładnie zobaczyć, co jest wyróżnione w treści.
W tym artykule pokażemy, jak zmienić domyślny kolor zaznaczenia tekstu w twoim motywie WordPress.
Dlaczego warto zmienić domyślny kolor zaznaczenia tekstu w WordPress?
Kolor zaznaczenia tekstu odnosi się do koloru, który pojawia się po podświetleniu fragmentu tekstu w treści. Na przykład:
W niektórych przypadkach możesz chcieć zmienić ten kolor, ponieważ nie wygląda on dobrze z twoim projektem witryny internetowej WordPress. Schemat kolorów odgrywa ważną rolę w nadawaniu Twojej witrynie dobrego wyglądu i utrzymywaniu spójnego wizerunku marki.
Jeśli prowadzisz bloga WordPress, możesz również zmienić domyślny kolor zaznaczenia tekstu, jeśli uważasz, że nie wyróżnia się on wystarczająco od reszty treści, przez co jest trudny do odczytania.
Mając to na uwadze, zobaczmy, jak zmienić domyślny kolor zaznaczenia tekstu w WordPress. Wystarczy skorzystać z poniższych odnośników, aby przejść do wybranej metody:
Metoda 1: Korzystanie z ustawień motywu WordPress (łatwe)
Niektóre motywy WordPress umożliwiają zmianę ustawień typografii i kroju pisma, w tym domyślnego koloru zaznaczenia tekstu. Aby sprawdzić, czy tak jest w przypadku twojego motywu, musisz przejść do Wygląd ” Dostosuj.
Uwaga: Jeśli używasz motywu blokowego, nie będziesz mieć tej opcji i będziesz musiał przejść do metody 2, aby zmienić kolor zaznaczenia tekstu.
Tutaj poszukaj ustawień oznaczonych jako „Kolory”.
Jeśli widzisz kartę „Ogólne”, „Globalne” lub podobną, to często zawiera ona ustawienia kolorów motywu.
Na przykład, jeśli korzystasz z popularnego motywu Astra WordPress, musisz wybrać kartę „Globalne”.
Następnie kliknij „Kolory”, aby zobaczyć wszystkie różne kolory, które składają się na ten motyw WordPress.
Następnie należy kliknąć „Akcent”.
Spowoduje to otwarcie selektora kolorów, w którym można wybrać nowy kolor zaznaczenia tekstu.
W miarę wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie. Możesz więc wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej dla twojej witryny internetowej WordPress.
Kiedy będziesz zadowolony z twoich zmian, po prostu kliknij „Opublikuj”, aby je wprowadzić.
Następnie zobaczysz nowy kolor zaznaczenia tekstu na żywo na twoim blogu lub witrynie internetowej WordPress.
Nawet jeśli nie widzisz żadnych ustawień kolorów w konfiguratorze motywu WordPress, nadal warto sprawdzić dokumentację twojego motywu, aby sprawdzić, czy istnieje sposób na zmianę domyślnego koloru zaznaczenia tekstu.
Możesz nawet zwrócić się o pomoc do twórcy motywu. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tego, jak prawidłowo poprosić o pomoc techniczną WordPress i ją uzyskać.
Metoda 2: Użycie kodu do zmiany koloru zaznaczenia tekstu (działa ze wszystkimi motywami)
Jeśli nie widzisz sposobu na zmianę koloru zaznaczenia tekstu w konfiguratorze motywu, inną opcją jest użycie kodu CSS.
Często fragmenty kodu CSS można znaleźć w poradnikach WordPress z instrukcjami dodawania ich do pliku functions. php twojego motywu.
Największym problemem jest to, że nawet drobny błąd we fragmencie kodu może całkowicie zepsuć twoją witrynę WordPress. Nie wspominając już o tym, że stracisz cały swój własny kod podczas aktualizacji motywu WordPress.
Tutaj z pomocą przychodzi WPCode. Ta wtyczka fragmentów kodu ułatwia dodawanie własnego kodu do WordPressa bez powodowania błędów lub uniemożliwiania dostępu do twojej witryny.
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 w twoim kokpicie administracyjnym WordPress.
Tutaj wystarczy najechać kursorem myszy na „Dodaj własny kod”.
Gdy się pojawi, kliknij przycisk „Użyj fragmentu kodu”.
Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże ci później zidentyfikować fragment kodu w kokpicie WordPress, na przykład „Zmień kolor zaznaczenia tekstu”.
Następnie należy otworzyć menu rozwijane „Rodzaj kodu” i wybrać „Fragment kodu CSS”.
Następnie możesz dodać następujący CSS w polu Podgląd kodu:
/* Customizing text selection for Firefox */
::-moz-selection {
/* Background color when text is selected in Firefox */
background-color: #008000; /* Green color */
/* Text color when text is selected in Firefox */
color: #fff;
}
/* Customizing text selection for other browsers */
::selection {
/* Background color when text is selected in other browsers */
background-color: #008000; /* Green color */
/* Text color when text is selected in other browsers */
color: #fff;
}
Powiadomienie: dodaliśmy dwa style. Selektor CSS :: moz-selection działa z przeglądarką Firefox, a selektor CSS ::selection działa z innymi popularnymi przeglądarkami, takimi jak Google Chrome, Safari, IE9+ i Opera.
W powyższym przykładzie kod szesnastkowy # zmieni kolor odnośnika na zielony, więc należy zmienić kolor tła: #008000 na kolor, którego chcesz użyć dla podświetlonego tekstu.
Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, możesz zapoznać się z różnymi kolorami i uzyskać ich kody na witrynie internetowej HTML Color Codes.
Kiedy będziesz zadowolony z wyglądu twojego kodu, po prostu kliknij przełącznik „Nieaktywny”, aby zamiast tego wyświetlić „Aktywny”.
Następnie kliknij przycisk „Zapisz fragment”, aby uruchomić fragment kodu CSS.
Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć zmiany w działaniu.
Tak to wyglądało na naszej demonstracyjnej witrynie internetowej.
Odkryj więcej porad i wskazówek dotyczących typografii WordPress
Chcesz dostosować krój pisma na swojej witrynie internetowej WordPress, ale nie wiesz jak? Zapoznaj się z tymi przewodnikami, aby zacząć:
- Najlepsze wtyczki WordPress do typografii, które poprawią twój projekt
- Jak łatwo zmienić wielkość liter w WordPressie
- Co to jest bezpieczna czcionka internetowa + najlepsze bezpieczne czcionki internetowe (przewodnik dla początkujących)
- Jak łatwo dodać krój pisma z ikonkami do twojego motywu WordPress?
- Jak dodać kapitaliki w wpisach na WordPressie?
Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak zmienić domyślny kolor zaznaczenia tekstu w WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych kreatorach stron typu „przeciągnij i upuść” dla WordPressa oraz jak sprzedawać kroje pisma online za pomocą WordPressa.
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.
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!
Michael says
Thank you so much for your post ! Clear and useful.
WPBeginner Support says
Glad you found our content helpful
Administrator
Lynne Clay says
Is there a way to change just my posts titles color without having to change the coding? I don’t understand anything about coding and don’t want to mess with that anyway.
WPBeginner Support says
While it requires coding, if you wanted customizations without needing to understand the code you could look into a plugin such as CSS Hero which we have reviewed here:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
Administrator
Samar Jamil says
Thanks for this awesome post.
WPBeginner Support says
You’re welcome
Administrator
KrishnaChaitanya says
Thank you very much, your service was excellent. Lot to learn from you.
WPBeginner Support says
Glad our tutorial was helpful
Administrator
Adrian Wallis says
Thanks, it worked great for me in a Twenty Fourteen Child. Hopefully that is the last of the default green gone from template
Michele says
I tried this but it didn’t work… I’m using Thesis, does that make a difference?
Editorial Staff says
Not that we know of because it is a basic CSS change. The only thing we can think of is that thesis is overriding your styles maybe?
Administrator
Marvin says
Hello there,
I just copied your code in my Genesis eleven40 child theme but it is not working.
Thank You
Editorial Staff says
It should work just fine unless eleven40 has it’s own styles pre-defined. In which case you would need to override them by adding an !important value in yours.
Administrator
Lauren says
Oh my gosh. I have been searching tirelessly all over the internet for the solution to this problem, but to no avail. But this response to Marvin’s question solved it! So simple. Thanks so much!!!!!
David Abramson says
Cool trick. I am working on a website in Genesis and like my tech support guy says, „it’s as easy as drinking a glass of water”
Thanks!
-David
Brad Dalton says
Chris Coyier posted this on css-tricks.com back in 2009 http://css-tricks.com/snippets/css/change-text-selection-color/
Editorial Staff says
Ah well, didn’t know about it until we saw it on Brian’s site.
Administrator
Keith Davis says
Yes I saw it on Brian Gardner’s site.
Never knew you could change the selection colours until I read his article.
Not sure if I would ever use it, but nice to know it can be done.
Josh McCarty says
This is one of those simple things that many people probably won’t notice, but it’s a nice „extra” to add to a website. I first saw it in HTML5 Boilerplate and use it frequently on sites that I build.
bungeshea says
You actually can combine them, like this:
::selection,
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
Editorial Staff says
We saw this tutorial on Brian’s site. He suggests that combining them will not work (not sure which environment it was not working). But we’d stick with what we know works.
Administrator
Clean Digital says
Nice post. Just updated our site with a nice red background! Cheers!
Gautam Doddamani says
genesis has a nice text selection color. your site’s is orange which is cool
p.s. speaking about site appearances, yoast.com got an upgrade too, he is also now using the genesis framework kudos to that!
Editorial Staff says
Yup, Genesis is a very good framework to build your site on.
Administrator