Jak zmienić domyślny kolor zaznaczenia tekstu w WordPress

Czy zauważyłeś, jak wygląda tekst, gdy odwiedzający go zaznaczają na Twojej stronie? Czasami musimy aktualizować kolor zaznaczenia tekstu na stronach, nad którymi pracujemy, aby pasował do kolorów marki, a wielu użytkowników pytało, jak to zrobić.

Dobra wiadomość jest taka, że dostosowanie tego często pomijanego elementu projektu jest łatwiejsze, niż mogłoby się wydawać. Niezależnie od tego, czy chcesz dopasować kolory swojej marki, czy poprawić czytelność, zmiana koloru zaznaczonego tekstu może poprawić wrażenia użytkownika Twojej witryny.

W tym przewodniku pokażemy Ci dokładnie, jak zmienić domyślny kolor zaznaczenia tekstu w WordPress.

Dlaczego zmieniać domyślny kolor zaznaczenia tekstu w WordPressie?

Kolor zaznaczenia tekstu odnosi się do koloru czcionki w WordPress, który pojawia się po zaznaczeniu fragmentu tekstu w treści. Tak jak tutaj:

W niektórych przypadkach możesz chcieć zmienić ten kolor, ponieważ nie pasuje on do projektu Twojej witryny WordPress. Paleta kolorów odgrywa ważną rolę w zapewnieniu dobrego wyglądu Twojej witryny i utrzymaniu spójnego doświadczenia marki.

Jeśli prowadzisz bloga WordPress, być może będziesz chciał zmienić domyślny kolor zaznaczenia tekstu, jeśli uważasz, że nie wyróżnia się wystarczająco na tle reszty treści, co utrudnia czytanie.

Mając to na uwadze, zobaczmy, jak możesz zmienić kolor czcionki dla zaznaczonego tekstu w WordPress. Po prostu użyj poniższych linków, aby przejść do wybranej metody:

• Metoda 1: Zmiana koloru zaznaczenia tekstu za pomocą kodu (działa ze wszystkimi motywami)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Metoda 1: Zmiana koloru zaznaczenia tekstu za pomocą kodu (działa ze wszystkimi motywami)

Niektóre motywy WordPressa oferują wbudowaną funkcję zmiany koloru zaznaczenia tekstu, ale nie wszystkie. Dlatego zalecamy użycie niestandardowego kodu CSS, ponieważ jest to metoda znacznie bardziej uniwersalna.

Często w samouczkach WordPress znajdziesz fragmenty kodu CSS z instrukcjami, aby dodać je do pliku functions.php swojego motywu.

Największym problemem jest to, że nawet najmniejszy błąd w fragmencie kodu może całkowicie zepsuć Twoją witrynę WordPress. Nie wspominając o tym, że stracisz cały swój niestandardowy kod, gdy zaktualizujesz motyw WordPress.

W tym właśnie pomaga WPCode. Ta wtyczka fragmentów kodu ułatwia dodawanie niestandardowego kodu do WordPress bez powodowania błędów ani niedostępności witryny.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie darmowego pluginu WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować plugin WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment w swoim panelu administracyjnym WordPress.

Tutaj po prostu najedź kursorem myszy na „Dodaj swój własny kod (Nowy fragment)”.

Gdy się pojawi, kliknij przycisk „+ Dodaj niestandardowy fragment”.

Następnie musisz wybrać typ kodu z listy opcji, które pojawią się na ekranie.

W tym samouczku wybierz „Fragment CSS”.

Na następnej stronie wpisz tytuł dla fragmentu niestandardowego kodu.

Może to być cokolwiek, co pomoże Ci później zidentyfikować fragment w panelu WordPress, na przykład „Zmień kolor zaznaczenia tekstu”.

Następnie możesz dodać następujący kod CSS do pola 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;
}

Zauważ, że 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 linku na zielony, więc będziesz musiał zmienić background-color: #008000 na kolor, którego chcesz użyć dla zaznaczonego tekstu.

Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, możesz przeglądać różne kolory i uzyskać ich kody na stronie HTML Color Codes .

Gdy będziesz zadowolony z wyglądu kodu, kliknij przełącznik „Nieaktywny”, aby zamiast tego wyświetlić „Aktywny”.

Następnie kliknij „Zapisz fragment”, aby fragment CSS stał się aktywny.

Możesz teraz odwiedzić swoją stronę, aby zobaczyć zmiany w akcji.

Tak to wyglądało na naszej stronie demonstracyjnej.

Metoda 2: Korzystanie z ustawień motywu WordPress (różni się w zależności od klasycznego motywu)

Niektóre motywy WordPress pozwalają na zmianę ustawień typografii i czcionek, w tym koloru zaznaczonego tekstu. Aby sprawdzić, czy tak jest w przypadku Twojego motywu, musisz przejść do Wygląd » Dostosuj.

Uwaga: Ta metoda nie dotyczy motywów blokowych.

Tutaj poszukaj ustawień oznaczonych jako „Kolory”.

Jeśli widzisz zakładkę „Ogólne”, „Globalne” lub podobną, często zawiera ona ustawienia kolorów motywu.

Na przykład, jeśli używasz motywu Astra WordPress, musisz wybrać zakładkę „Globalne”.

Następnie kliknij „Kolory”, aby zobaczyć wszystkie różne kolory tworzące ten motyw WordPress.

Następnie musisz kliknąć „Akcent”.

Otwiera to selektor kolorów, w którym możesz wybrać nowy kolor zaznaczenia tekstu.

Teraz możesz obserwować zmianę koloru czcionki, ponieważ podgląd na żywo będzie aktualizowany automatycznie. Możesz więc wypróbować różne ustawienia, aby zobaczyć, co najlepiej wygląda dla Twojej strony WordPress.

Gdy będziesz zadowolony ze zmian, po prostu kliknij „Opublikuj”, aby je opublikować.

Po tym zobaczysz nowy kolor zaznaczenia tekstu na żywo na swoim blogu lub stronie internetowej WordPress.

Nawet jeśli nie widzisz żadnych ustawień kolorów w narzędziu do dostosowywania motywów WordPress, nadal warto sprawdzić dokumentację swojego motywu, aby dowiedzieć się, czy istnieje sposób na zmianę domyślnego koloru zaznaczenia tekstu.

Możesz nawet skontaktować się z twórcą motywu w celu uzyskania pomocy. Więcej informacji znajdziesz w naszym przewodniku jak prawidłowo prosić o wsparcie WordPress i je uzyskać.

Odkryj więcej wskazówek i sztuczek dotyczących typografii w WordPress

Chcesz dostosować czcionki na swojej stronie WordPress, ale nie wiesz jak? Sprawdź te przewodniki, aby zacząć:

• Najlepsze wtyczki typograficzne WordPress, aby ulepszyć Twój projekt
• Jak łatwo zmienić rozmiar czcionki w WordPressie
• Co to jest czcionka bezpieczna dla sieci + Najlepsze czcionki bezpieczne dla sieci (Przewodnik dla początkujących)
• Jak łatwo dodać ikony czcionek do motywu WordPress
• Jak dodać inicjały w postach WordPress

Mamy nadzieję, że ten samouczek 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 metodą przeciągnij i upuść dla WordPress oraz jak sprzedawać czcionki online za pomocą 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.