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?

De främsta anledningarna till att ändra länk-färger i WordPress är att matcha ditt varumärkesidentitet och förbättra läsbarheten av ditt innehåll. Genom att anpassa dessa färger styr du dina besökares uppmärksamhet till de viktigaste delarna av din sida.

Här är några specifika fördelar med att anpassa dina länkar:

• Bättre tillgänglighet: Att öka färgkontrasten mellan text och bakgrunden gör din webbplats lättare att läsa för personer med synnedsättning.
• Varumärkeskonsekvens: Du kan anpassa dina länkar till din logotyp och övergripande färgschema för ett professionellt utseende.
• Högre klickfrekvens: Att använda en distinkt färg för länkar (som knappar eller uppmaningar till handling) uppmuntrar besökare att klicka, vilket ökar konverteringarna.

Med det sagt, låt oss titta på hur man ändrar länkarfärg på din WordPress-webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du föredrar:

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 inte har direkta inställningar för länkarfärg. Istället kan länkarfärgen vara kopplad 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. Du bör välja en färg som matchar din webbplatsdesign.

Det är dock också viktigt att se till att det finns hög kontrast mellan bakgrunden och länkarfärgen. Detta säkerställer att din webbplats är tillgänglig och lätt för alla att läsa.

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 den specifika länken du vill anpassa.

Klicka sedan på pilikonen i verktygsfältet och välj 'Markera' från rullgardinsmenyn.

Klicka sedan på fliken 'Text'. Du kan nu välja färg för den specifika länken.

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;
}

Notera: Denna CSS-kod ändrar länkarfärgen för hela din webbplats. Detta inkluderar navigeringsmenyer, knappar och länkar i sidfoten.

I exemplet ovan ändrar # hex-koden länkarfärgen 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änkarfärg vid hover, klistra helt enkelt in följande kodavsnitt i WPCode's redigerare:

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:

Vanliga frågor om att ändra länkarfärg i WordPress

Här är några frågor som våra läsare ofta har ställt om att ändra länkar på sin webbplats:

Kan jag ändra färgen på en hyperlänk?

Ja, de flesta WordPress-teman låter dig ändra hyperlänkfärger globalt via Inställningar eller Webbplatsredigeraren. Du kan också ändra färgen på enskilda länkar direkt i inläggsredigeraren genom att markera länken och välja en färg från verktygsfältet.

Hur anpassar jag en länk i WordPress?

Du kan anpassa en länk genom att markera den i blockredigeraren och använda verktygsfältets alternativ. Detta gör att du kan ändra destinations-URL:en, ställa in den att öppnas i en ny flik eller justera färg- och stilinställningarna i sidopanelen till höger.

Hur anpassar jag min URL-länk?

För att ändra själva URL-texten (sluggen), gå till 'Inläggs'-inställningarna i sidopanelen till höger och leta efter avsnittet 'URL'. Om du vill ändra hur länken ser ut visuellt, som teckensnitt eller färg, använd 'Stil'-inställningarna i blockredigeraren.

För mer information, se vår handledning om hur du ändrar din WordPress-webbplats URL:er.

Hur ändrar man länkar i WordPress?

Klicka helt enkelt på den befintliga länken i innehållsredigeraren och välj knappen 'Redigera' (pennaikon) i den flytande verktygsfältet. Därifrån kan du klistra in en ny URL eller ändra texten du vill visa för dina besökare.

Hur kan jag ändra min sidlänk?

Du kan ändra en sidlänk genom att redigera permalänks-sloggen i sidans inställningsfält under sektionen 'URL'. Om sidan redan är publicerad rekommenderar vi att du konfigurerar en 301-omdirigering så att besökare som använder den gamla länken skickas till rätt ny sida.

Hur ändrar man länksymbolen i WordPress?

WordPress har ingen standardinställning för att lägga till eller ändra länksymboler, så du behöver vanligtvis använda ett plugin. Plugins som External Links kan automatiskt lägga till ikoner till utgående länkar, eller så kan du manuellt lägga till ikoner med FontAwesome och anpassad CSS.

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.