Hur man ändrar länkfärg i WordPress (nybörjarguide)

'Hur gör jag mina länkar tydliga?' Det är en fråga vi regelbundet får från våra WPBeginner-läsare.

Även om det kan verka som en liten detalj, spelar länkarnas färger en viktig roll för din webbplats användbarhet och konverteringsgrad. Det är därför vi använder färgen orange för länkar på WPBeginner.

De goda nyheterna är att det har blivit mycket enklare att ändra länkfärger i WordPress än vad det brukade vara. Du behöver inte vara en CSS-expert eller anlita en utvecklare – det finns nu enkla lösningar som vem som helst kan använda, oavsett sina tekniska färdigheter.

I den här guiden kommer vi att gå igenom de exakta stegen för att ändra dina länkarfärger i WordPress.

Varför ändra länkfärgen i WordPress?

När du lägger till en länk i WordPress, bestämmer ditt tema automatiskt färgen på den länken. Ibland är ditt WordPress-temas standardfärger exakt vad du vill ha, men du kan behöva mer kontroll över hur länkarna ser ut.

Du kanske till exempel vill ändra länkarfärgen så att den matchar ditt varumärke eller anpassade logotyp. Eller så kanske du vill öka färgkontrasten för att göra din webbplats mer tillgänglig för läsare med begränsad syn.

Med det sagt, låt oss se hur du ändrar länkarfärgen på din WordPress-webbplats, oavsett vilket tema du använder. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Hur man ändrar länkfärg i WordPress klassiska teman
• Hur man ändrar länkfärg i WordPress blockteman
• Hur man ändrar individuella länkarfärger i blockredigeraren
• Hur man ändrar länkar i WordPress med kod (alla teman)
• Videohandledning

Hur man ändrar länkfärg i WordPress klassiska teman

Vissa klassiska teman har inbyggda alternativ för att ändra länkfärger, men du måste först kontrollera ditt specifika temas inställningar.

För att se om ditt tema har detta alternativ, gå till Utseende » Anpassningsverktyg. Leta sedan efter en inställning som säger 'Färger' eller något liknande. I temat Sydney kallas det helt enkelt 'Färger'.

Hitta sedan en inställning som låter dig ändra länkar.

Sydney gör detta enkelt med 'Länkfärg'-alternativ för både standard- och hover-lägen.

Länkens hover-färg är den som visas när en besökare för muspekaren över en länk, så det är ett utmärkt sätt att fånga deras uppmärksamhet och förbättra din klickfrekvens.

Du kan sedan klicka på 'Publicera' för att spara dina ändringar.

Tänk på att vissa teman, som Neve, inte har direkta inställningar för länkar. Istället kan länkar vara kopplade till ditt temas primära eller sekundära färger globalt.

Om ditt tema inte erbjuder direkt anpassning av länkar, oroa dig inte! Du kan gå till den fjärde metoden, där vi visar dig hur du ändrar din länkfärg med kod.

Hur man ändrar länkfärg i WordPress blockteman

Om du använder ett blocktema, behöver du använda redigeraren för hela webbplatsen för att anpassa dina länkar färger.

Gå till Utseende » Redigerare i din WordPress-instrumentpanel.

Du kommer att se alla menyer för att anpassa din webbplats utseende.

Klicka här på 'Stilar'.

Du kommer att se ditt temas standardstilar visas.

Leta efter och klicka på pennikonen 'Redigera' för att börja anpassa.

Redigeraren för hela webbplatsen öppnas med en sidopanel för att redigera din temas stilar.

Klicka på 'Färger' i sidofältet för att komma åt alternativ för färgjustering.

Hitta alternativet 'Länk' och klicka på det för att visa färginställningar för både standard- och hover-lägen. Se till att dina färgval matchar din webbplats design.

När du är nöjd med dina ändringar klickar du helt enkelt på 'Spara' för att göra dem live på din webbplats.

Hur man ändrar individuella länkarfärger i blockredigeraren

Ibland kanske du vill ändra färgen på enskilda länkar. Du kanske till exempel vill dra besökarens uppmärksamhet mot uppmaningen till handling på en landningssida.

För att göra detta, markera helt enkelt länken du vill anpassa. Klicka sedan på pilikonen i miniverktygsfältet och välj 'Markera'.

Du kan nu antingen välja 'Bakgrund' eller 'Text' beroende på vilken ändring du vill göra.

När det är gjort, fortsätt och välj den färg du vill använda.

För att anpassa fler länkar, upprepa helt enkelt dessa steg.

När du är nöjd med hur länkarna ser ut, klicka på 'Spara' för att göra dina ändringar live.

Hur man ändrar länkar i WordPress med kod (alla teman)

Om ditt tema inte erbjuder möjligheten att ändra din länkfärg, är det enklaste sättet att lägga till anpassad CSS på din WordPress-webbplats.

Ofta hittar du kodavsnitt i WordPress-handledningar med instruktioner om att lägga till dem i ditt temas functions.php fil.

Det största problemet är att även ett litet misstag i kodavsnittet kan förstöra din WordPress-webbplats och göra den otillgänglig. Du kommer också att förlora alla dina anpassningar nästa gång du uppdaterar ditt WordPress-tema.

Det är där WPCode kommer in.

Efter grundliga tester har vi kommit fram till att det är det säkraste och enklaste sättet att lägga till anpassad kod på din webbplats. För mer information, se vår WPCode-recension.

Det första du behöver göra är att installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Code Snippets » Add Snippet.

Här, för muspekaren över 'Lägg till din anpassade kod (nytt kodavsnitt)'.

Klicka sedan på knappen ‘+ Lägg till anpassat avsnitt’ när den visas.

Därefter måste du välja 'CSS-avsnitt' som kodtyp från listan med alternativ som visas på skärmen.

Skriv sedan in en titel för kodavsnittet. Det kan vara vad som helst som hjälper dig att identifiera avsnittet i WordPress-instrumentpanelen.

Du kan nu lägga till ett anpassat CSS-utdrag i kodrutan. Låt oss titta på några av de olika utdrag du kan använda.

Ändra länkfärgen över hela din WordPress-webbplats

Till att börja med kanske du vill anpassa den övergripande länkfärgen. Detta är färgen som besökare kommer att se innan de klickar på en länk.

För att göra detta, lägg helt enkelt till följande kodavsnitt i WPCode-kodrutan:

a {
     color: #FFA500;
}

I exemplet ovan ändrar # hexkoden länken till orange, så du måste ändra#FFA500 till den färg du vill använda.

Om du är osäker på vilken hexkod du ska använda, kan du utforska olika färger och få deras koder på webbplatsen HTML Color Codes.

När du är nöjd med hur din kod ser ut, klicka på växlingsknappen 'Inaktiv' så att den visar 'Aktiv' istället. Klicka slutligen på 'Spara kodavsnitt' för att göra CSS-kodavsnittet live.

Nu, om du besöker din WordPress-webbplats, kommer du att se den nya länkfärgen i aktion.

Ändra länkar i WordPress

För att ändra länken vid hovring, klistra bara in följande kodavsnitt i WPCode-redigeraren:

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

Koden ovan ändrar länken till röd och understryker texten när besökare hovrar över den. Som tidigare kan du ändra hexkoden #FF0000 till vilken färg du vill använda.

När du är redo att gå live kan du publicera kodavsnittet genom att följa samma process som beskrivs ovan.

Ändra länkar i WordPress efter besök

Därefter kanske du vill ändra länkfärgen efter att en användare har klickat på länken. Detta kan hjälpa besökare att navigera på din WordPress-blogg genom att visa vilka länkar de redan har klickat på.

Du kan använda CSS-koden nedan för att ändra färgen på besökta länkar:

a:visited {
     color: #0000FF;
}

Som alltid, se till att du ändrar den blå #0000FF hexkoden till den färg du vill använda i dina länkar.

När det är gjort, klicka på växlingsknappen ‘Inaktiv’ så att den ändras till ‘Aktiv’. Klicka sedan bara på ‘Spara avsnitt’ för att göra koden live på din webbplats, blogg eller onlinebutik.

Videohandledning

Om du inte gillar att följa skriftliga instruktioner kan du istället titta på vår videoguide:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ändrar länkfärg i WordPress. Du kanske också vill se vår guide om hur man ändrar textfärg i WordPress eller vår ultimata guide till de mest effektiva designelementen för WordPress-webbplatser.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.