Jak zmienić kolor odnośnika w WordPress (przewodnik dla początkujących)

Chcesz dowiedzieć się, jak zmienić kolor odnośnika w WordPressie?

Zmiana koloru odnośników może ułatwić odwiedzającym odnalezienie się na twojej witrynie internetowej. Stworzenie unikatowego schematu kolorów może również pomóc wyróżnić twoją witrynę.

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:

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

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 „Dodaj własny kod”.

Gdy się pojawi, kliknij „Użyj fragmentu kodu”.

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.

Następnie otwórz listę rozwijaną „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

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:

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:

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:

a:visited {
     color: #0000FF;
}

Jak zawsze, upewnij się, że zmieniłeś niebieski kod #0000FFhexna 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.

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.