Jak zmienić kolor linku w WordPressie (przewodnik dla początkujących)

„Jak sprawić, by moje linki się wyróżniały?” To pytanie, które regularnie słyszymy od naszych czytelników WPBeginner.

Chociaż może się to wydawać drobnym szczegółem, kolory linków odgrywają ważną rolę w użyteczności i współczynnikach konwersji Twojej witryny. Dlatego w WPBeginner używamy koloru pomarańczowego dla linków.

Dobra wiadomość jest taka, że zmiana kolorów linków w WordPress stała się znacznie łatwiejsza niż kiedyś. Nie musisz być ekspertem od CSS ani zatrudniać programisty – istnieją teraz proste rozwiązania, z których może skorzystać każdy, niezależnie od swoich umiejętności technicznych.

W tym przewodniku przeprowadzimy Cię przez dokładne kroki, aby zmienić kolory linków w WordPress.

Dlaczego zmieniać kolor linku w WordPress?

Kiedy dodajesz link w WordPress, motyw automatycznie określi jego kolor. Czasami domyślne kolory motywu WordPress będą dokładnie tym, czego chcesz, ale możesz potrzebować większej kontroli nad wyglądem linków.

Na przykład możesz chcieć zmienić kolor linku, aby pasował do Twojej marki lub niestandardowego logo. Lub możesz chcieć zwiększyć kontrast kolorów, aby Twoja witryna była bardziej dostępna dla czytelników z ograniczoną wzrokiem.

Biorąc to pod uwagę, zobaczmy, jak zmienić kolor linku na Twojej stronie WordPress, niezależnie od używanego motywu. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Jak zmienić kolor linków w klasycznych motywach WordPress
• Jak zmienić kolor linków w motywach blokowych WordPress
• Jak zmienić kolory poszczególnych linków w edytorze blokowym
• Jak zmienić kolor linku w WordPress za pomocą kodu (wszystkie motywy)
• Samouczek wideo

Jak zmienić kolor linków w klasycznych motywach WordPress

Niektóre klasyczne motywy mają wbudowane opcje zmiany kolorów linków, ale najpierw musisz sprawdzić ustawienia swojego konkretnego motywu.

Aby sprawdzić, czy Twój motyw ma tę opcję, przejdź do Wygląd » Dostosuj. Następnie poszukaj ustawienia o nazwie „Kolory” lub czegoś podobnego. W motywie Sydney jest on oznaczony po prostu jako „Kolory”.

Następnie znajdź ustawienie, które pozwala na zmianę kolorów linków.

Sydney ułatwia to dzięki opcjom „Kolor linku” zarówno dla stanów domyślnych, jak i najazdu myszką.

Kolor najazdu myszką na link to ten, który pojawia się, gdy odwiedzający najeżdża kursorem na link, więc jest to świetny sposób, aby przyciągnąć jego uwagę i poprawić współczynnik klikalności.

Następnie możesz kliknąć „Opublikuj”, aby zapisać zmiany.

Pamiętaj, że niektóre motywy, takie jak Neve, nie mają bezpośrednich ustawień koloru linku. Zamiast tego kolor linku może być powiązany z globalnymi kolorami podstawowymi lub wtórnymi Twojego motywu.

Jeśli Twój motyw nie oferuje bezpośredniej personalizacji koloru linków, nie martw się! Możesz przejść do czwartej metody, gdzie pokażemy Ci, jak zmienić kolor linków za pomocą kodu.

Jak zmienić kolor linków w motywach blokowych WordPress

Jeśli używasz motywu blokowego, będziesz musiał użyć edytora pełnej witryny, aby dostosować kolory linków.

Przejdź do Wygląd » Edytor w swoim panelu WordPress.

Zobaczysz wszystkie menu do personalizacji wyglądu swojej witryny.

Tutaj kliknij „Style”.

Zobaczysz domyślne style swojego motywu.

Poszukaj i kliknij przycisk ołówka „Edytuj”, aby rozpocząć dostosowywanie.

Edytor całej witryny otworzy się z paskiem bocznym do edycji stylów Twojego motywu.

Kliknij „Kolory” w tym bocznym pasku, aby uzyskać dostęp do opcji dostosowywania kolorów.

Znajdź opcję Link i kliknij ją, aby wyświetlić ustawienia kolorów zarówno dla stanów domyślnych, jak i najazdu myszką. Upewnij się, że Twoje wybory kolorów pasują do projektu Twojej strony internetowej.

Gdy będziesz zadowolony ze zmian, po prostu kliknij „Zapisz”, aby je opublikować na swojej stronie.

Jak zmienić kolory poszczególnych linków w edytorze blokowym

Czasami możesz chcieć zmienić kolor poszczególnych linkó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 link, który chcesz dostosować. Następnie kliknij ikonę 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ć.

Po wykonaniu tej czynności wybierz kolor, którego chcesz użyć.

Aby dostosować więcej linków, po prostu powtórz te kroki.

Gdy będziesz zadowolony z wyglądu linków, kliknij „Zapisz”, aby wprowadzić zmiany na żywo.

Jak zmienić kolor linku w WordPress za pomocą kodu (wszystkie motywy)

Jeśli Twój motyw nie oferuje opcji zmiany koloru linków, najłatwiejszym sposobem jest dodanie niestandardowego CSS do swojej witryny WordPress.

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

Największym problemem jest to, że nawet najmniejszy błąd w niestandardowym fragmencie kodu może zepsuć Twoją witrynę WordPress i uczynić ją niedostępną. Stracisz również wszystkie swoje dostosowania przy następnej aktualizacji motywu WordPress.

Właśnie dlatego WPCode jest przydatne.

Po dokładnym przetestowaniu doszliśmy do wniosku, że jest to najbezpieczniejszy i najłatwiejszy sposób na dodanie niestandardowego kodu do Twojej witryny. Szczegółowe informacje znajdziesz w naszej recenzji WPCode.

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.

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

Następnie kliknij przycisk „+ Dodaj niestandardowy fragment”, gdy się pojawi.

Następnie musisz wybrać „Fragment kodu CSS” jako typ kodu z listy opcji wyświetlanych na ekranie.

Po tym wpisz tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu WordPress.

Możesz teraz dodać niestandardowy fragment kodu CSS do pola kodu. Przyjrzyjmy się kilku różnym fragmentom, których możesz użyć.

Zmień kolor linku na całej swojej stronie WordPress

Na początek możesz chcieć dostosować ogólny kolor linków. Jest to kolor, który odwiedzający zobaczą przed kliknięciem na link.

Aby to zrobić, po prostu dodaj następujący fragment do pola kodu WPCode:

a {
     color: #FFA500;
}

W powyższym przykładzie kod szesnastkowy # zmieni kolor linku na pomarańczowy, więc będziesz musiał zmienić#FFA500 na kolor, którego chcesz użyć.

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świetlał się „Aktywny”. Na koniec kliknij „Zapisz fragment”, aby fragment CSS stał się aktywny.

Teraz, jeśli odwiedzisz swoją stronę WordPress, zobaczysz nowy kolor linku w akcji.

Zmień kolor najazdu na link w WordPress

Aby zmienić kolor najazdu na link, po prostu wklej poniższy fragment do edytora WPCode:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Powyższy kod zmieni kolor linku na czerwony i podkreśli tekst, gdy odwiedzający najedzie na niego kursorem. Jak poprzednio, możesz zmienić kod szesnastkowy #FF0000 na dowolny kolor, którego chcesz użyć.

Kiedy będziesz gotowy do publikacji, możesz opublikować fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Zmień kolor linku po odwiedzeniu w WordPress

Następnie możesz chcieć zmienić kolor linku po kliknięciu przez użytkownika. Może to pomóc odwiedzającym w poruszaniu się po Twoim blogu WordPress, pokazując, które linki już kliknęli.

Możesz użyć poniższego kodu CSS, aby zmienić kolor odwiedzonego linku:

a:visited {
     color: #0000FF;
}

Jak zawsze, upewnij się, że zmieniasz niebieski kod szesnastkowy #0000FF na kolor, którego chcesz użyć w swoich linkach.

Po wykonaniu tej czynności kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”. Następnie po prostu kliknij „Zapisz fragment”, aby kod stał się aktywny na Twojej stronie, blogu lub sklepie internetowym.

Samouczek wideo

Jeśli nie lubisz postępować zgodnie z pisemnymi instrukcjami, możesz zamiast tego obejrzeć nasz samouczek wideo:

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zmienić kolor linków w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat zmiany koloru tekstu w WordPress lub naszym ostatecznym przewodnikiem po najskuteczniejszych elementach projektowania witryn 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.