Czy wiesz, że prosta zmiana koloru może znacząco wpłynąć na twoją witrynę internetową? Nawet kolor twoich odnośników wpływa na nawigację i postrzeganie marki.
W WPBeginner pomogliśmy tysiącom użytkowników skonfigurować ich witryny WordPress, a dostosowanie kolorów odnośników jest częstą prośbą.
Niezależnie od tego, czy chcesz poprawić wrażenia użytkownika, uczynić twoją witrynę internetową bardziej dostępną, czy też stworzyć bardziej spójną estetykę marki, dostosowanie kolorów odnośników jest prostym, ale potężnym krokiem.
W tym artykule pokażemy, jak krok po kroku zmienić kolor odnośnika w WordPressie.

Dlaczego warto zmienić kolor odnośnika w WordPress?
Gdy dodasz odnośnik w WordPressie, twój motyw automatycznie określi kolor tego odnośnika. Czasami domyślne kolory twojego motywu WordPress będą dokładnie takie, jak chcesz, ale możesz potrzebować większej kontroli nad wyglądem odnośników.
Na przykład, możesz chcieć zmienić kolor odnośnika, aby pasował do twojej marki lub konfiguratora logo. Możesz też zwiększyć kontrast kolorów, aby uczynić twoją witrynę bardziej dostępną dla czytelników z ograniczonym wzrokiem.
W przypadku niektórych motywów można zmienić kolor odnośnika w panelu opcji motywu lub konfiguratorze motywu WordPress, więc upewnij się, że najpierw sprawdziłeś te miejsca. Warto również zapoznać się z dokumentacją twojego motywu.
W związku z tym zobaczmy, jak zmienić kolor odnośników na twojej witrynie internetowej WordPress, bez względu na używany motyw. Wystarczy skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:
Metoda 1: Zmiana koloru poszczególnych odnośników
Czasami warto zmienić kolor poszczególnych odnośników. Na przykład, możesz chcieć zwrócić uwagę odwiedzającego na wezwanie do działania na stronie docelowej.
Aby to zrobić, po prostu zaznacz odnośnik, który chcesz dostosować. Następnie kliknij ikonkę strzałki na mini pasku narzędzi i wybierz „Podświetl”.

Możesz teraz wybrać „Tło” lub „Tekst” w zależności od zmiany, którą chcesz wprowadzić.
Gdy to zrobisz, wybierz kolor, którego chcesz użyć.

Aby dostosować więcej odnośników, wystarczy powtórzyć te kroki.
Kiedy będziesz zadowolony z wyglądu odnośników, kliknij „Aktualizuj” lub „Opublikuj”, aby wprowadzić zmiany.
Metoda 2: Zmiana koloru odnośników w WordPressie za pomocą WPCode (zalecane)
Najprostszym sposobem na zmianę koloru odnośnika jest dodanie własnego CSS do twojej witryny WordPress.
Często można znaleźć fragmenty kodu w poradnikach WordPress z instrukcjami dodawania ich do pliku functions.php twojego motywu.
Największym problemem jest to, że nawet drobny błąd we własnym fragmencie kodu może zepsuć twoją witrynę WordPress i uczynić ją niedostępną. Utracisz również wszystkie własne konfiguratory przy następnej aktualizacji motywu WordPress.
I tu z pomocą przychodzi WPCode.
Ta darmowa wtyczka ułatwia dodawanie własnych CSS bez narażania twojej witryny na ryzyko.
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.

Tutaj wystarczy najechać kursorem myszy na „Add Your Custom Code (New Snippet)”.
Następnie kliknij przycisk „+ Dodaj własny fragment kodu”, gdy się pojawi.

Następnie należy wybrać „Fragment kodu CSS” jako rodzaj kodu z listy opcji wyświetlanych na ekranie.

Następnie wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.

Możesz teraz dodać własny fragment kodu CSS do pola kodu. Przyjrzyjmy się kilku różnym fragmentom kodu, których można użyć.
Zmień kolor odnośników na twojej witrynie internetowej WordPress
Na początek warto dostosować ogólny kolor odnośnika. Jest to kolor, który odwiedzający zobaczą przed kliknięciem odnośnika.
Aby to zrobić, wystarczy dodać następujący fragment kodu do pola kodu WPCode:
1 2 3 | a { color : #FFA500 ; } |
W powyższym przykładzie kod szesnastkowy # zmieni kolor odnośnika na pomarańczowy, więc należy zmienić#FFA500
na kolor, którego chcesz użyć.
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.
Tymczasem, jeśli potrzebujesz pomocy w wyborze koloru odnośnika, zapoznaj się z naszym przewodnikiem na temat tego, jak wybrać idealny schemat kolorów.
Gdy będziesz zadowolony z wyglądu twojego kodu, kliknij przełącznik „Nieaktywny”, aby zamiast tego wyświetlił się „Aktywny”. Na koniec kliknij „Save Snippet”, aby aktywować fragment kodu CSS.

Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz nowy kolor odnośnika w działaniu.
Zmiana koloru odnośnika w WordPressie
Inną opcją jest zmiana koloru odnośnika. Jest to kolor, który pojawia się, gdy odwiedzający najedzie kursorem myszy na odnośnik, więc jest to świetny sposób na przyciągnięcie jego uwagi i poprawę współczynnika klikalności.
Aby dokonać tej zmiany, wystarczy wkleić poniższy fragment kodu do edytora WPCode:
1 2 3 4 | a:hover { color : #FF0000 ; text-decoration : underline ; } |
Powyższy kod zmieni kolor odnośnika na czerwony i podkreśli tekst po najechaniu na niego. Tak jak poprzednio, możesz zmienić kod szesnastkowy #FF0000
na dowolny kolor, którego chcesz użyć.
Gdy będziesz gotowy do uruchomienia, możesz opublikować fragment kodu, wykonując ten sam proces opisany powyżej.
Zmiana koloru odnośnika po przejściu na WordPress
Następnie warto zmienić kolor odnośnika po jego kliknięciu przez użytkownika. Może to pomóc odwiedzającym znaleźć drogę na twoim blogu WordPress, pokazując, które odnośniki już kliknęli.
Możesz użyć poniższego kodu CSS, aby zmienić kolor odnośnika:
1 2 3 | a:visited { color : #0000FF ; } |
Jak zawsze, upewnij się, że zmieniłeś niebieski kod #0000FFhex
na kolor, którego chcesz używać w swoich odnośnikach.
Po wykonaniu tej czynności kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”. Następnie kliknij przycisk „Zapisz fragment kodu”, aby umieścić kod na twojej witrynie, blogu lub w sklepie internetowym.

Zmień kolor twoich odnośników nawigacyjnych w WordPressie
Wreszcie, możesz także dostosować odnośniki w twoim menu nawigacyjnym.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat stylizacji menu nawigacyjnego WordPress.
Metoda 3: Zmiana koloru odnośnika bez edytowania CSS
Zamiast dodawać kod CSS bezpośrednio do twojej witryny internetowej, możesz użyć wtyczki do stylizacji CSS, aby wizualnie edytować swoją witrynę.
Zalecamy korzystanie z wtyczki CSS Hero. Jest ona bardzo przyjazna dla początkujących i pozwala wizualnie dostosować twoją witrynę internetową, podobnie jak kreator stron typu „przeciągnij i upuść„.
Po zainstalowaniu wtyczki kliknij przycisk „Przejdź do aktywacji produktu”, aby ją włączyć i połączyć twoje konto.

Spowoduje to przejście do ekranu, na którym wpiszesz swoją nazwę użytkownika i hasło.
Następnie wystarczy postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby zweryfikować twoje konto. Następnie CSS Hero automatycznie przeniesie cię z powrotem do kokpitu WordPress.
Następnie kliknij przycisk „Dostosuj za pomocą CSS Hero” u góry paska narzędzi administratora WordPress.

Spowoduje to otwarcie twojej witryny internetowej z uruchomionym CSS Hero.
CSS Hero korzysta z edytora WYSIWYG (What You See is What You Get). Oznacza to, że można kliknąć dowolną treść, aby otworzyć pasek narzędzi, który pozwala dostosować tę treść.
Aby rozpocząć, kliknij przykład odnośnika, który chcesz edytować. W tym przewodniku zajmiemy się dostosowaniem odnośników wpisów na blogu.

Po wybraniu odnośnika kliknij pozycję menu „Typografia” i wybierz nowy kolor dla twoich odnośników.
Możesz wybrać kolor z listy lub dodać kod szesnastkowy.

Zmień kolor twojego menu nawigacyjnego WordPress
Następnie można użyć CSS Hero do stworzenia własnego menu nawigacyjnego poprzez zmianę koloru odnośnika.
Wystarczy najechać kursorem na twoje menu nawigacyjne i kliknąć dowolną pozycję menu.

Następnie wybierz opcję „Typografia”.
Możesz teraz wybrać kolor, którego chcesz użyć.

Po zakończeniu zmiany kolorów odnośników wystarczy kliknąć przycisk „Zapisz i opublikuj”, aby wprowadzić twoje zmiany.
Film instruktażowy
Jeśli nie lubisz postępować zgodnie z pisemnymi instrukcjami, możesz zapoznać się z naszym filmem instruktażowym:
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak zmienić kolor odnośnika w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat zmiany koloru tekstu w WordPressie lub naszym eksperckim wyborem najlepszych przykładów projektów WordPress, które powinieneś sprawdzić.
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.
Chris
The code was able to change the link colours in the side bar but not the links in the article. How do I change the colour of the link in the article?
WPBeginner Support
The code if for all links, if it only changes the link color for you in one spot it means that your specific theme has more specific CSS rules than the code then it would override our CSS. To find the CSS affecting your content we would recommend using Inspect Element following our guide below!
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Abdul Rehman Asad
Thanks for sharing this.
WPBeginner Support
You’re welcome!
Admin
Shaun Mendonsa
Very useful article and just what I needed.
WPBeginner Support
Glad our article was helpful!
Admin
Chloe
Thank you, this is so helpful! Is there a way you can share how to add bolded links in CSS? I’d like to make all my links bold.
WPBeginner Support
You should be able to add bold in the post editor for your links the same as you would for other text in your paragraphs without needing to edit your CSS.
Admin
Tom Maglienti
Great Article! When using CSS Hero to change link colors for example, if I change the color on one blog post link does it change all links on the site the same way inserting the CSS code directly does?
Thanks!