Hur man ändrar standardfärgen för textmarkering i WordPress

Har du märkt hur text ser ut när besökare markerar den på din webbplats? Vi måste ibland uppdatera färgen för textmarkering på de webbplatser vi arbetar med för att matcha varumärkesfärgerna, och många användare har frågat hur man gör detta.

De goda nyheterna är att det är enklare än du kanske tror att anpassa detta ofta förbisedda designelement. Oavsett om du vill matcha dina varumärkesfärger eller förbättra läsbarheten, kan ändring av färgen på markerad text förbättra din webbplats användarupplevelse.

I den här guiden visar vi dig exakt hur du ändrar standardfärgen för markerad text i WordPress.

Varför ändra standardfärgen för textmarkering i WordPress?

Textvalsfärg hänvisar till textfärgen i WordPress som visas när du markerar en textdel i innehållet. Som detta:

I vissa fall kanske du vill ändra den här färgen eftersom den inte ser bra ut med din WordPress-webbplatsdesign. Färgschema spelar en viktig roll för att din webbplats ska se bra ut och för att upprätthålla en konsekvent varumärkesupplevelse.

Om du driver en WordPress-blogg, kanske du också vill ändra standardfärgen för textmarkering om du tycker att den inte sticker ut tillräckligt från resten av innehållet, vilket gör den svår att läsa.

Med det sagt, låt oss se hur du kan ändra teckensnittsfärgen för textmarkering i WordPress. Använd helt enkelt länkarna nedan för att hoppa till den metod du vill använda:

• Metod 1: Använda kod för att ändra färg på textmarkering (fungerar med alla teman)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Metod 1: Använda kod för att ändra färg på textmarkering (fungerar med alla teman)

Vissa WordPress-teman erbjuder en inbyggd funktion för att ändra färgen på markerad text, men det gör inte alla. Därför rekommenderar vi att använda anpassad CSS-kod eftersom metoden är mycket mer universell.

Ofta hittar du CSS-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 bryta din WordPress-webbplats helt. För att inte tala om att du kommer att förlora all din anpassade kod när du uppdaterar WordPress-temat.

Det är där WPCode kommer in. Detta plugin för kodavsnitt gör det enkelt att lägga till anpassad kod i WordPress utan att orsaka några fel eller göra din webbplats otillgänglig.

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 Kodavsnitt » Lägg till kodavsnitt i din WordPress-adminpanel.

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

När den visas, klicka på knappen '+ Lägg till anpassad kodsnutt'.

Sedan måste du välja en kodtyp från listan med alternativ som visas på skärmen.

För den här handledningen, välj 'CSS-utdrag'.

På nästa sida, skriv in en titel för kodsnutten.

Detta kan vara vad som helst som hjälper dig att identifiera utdraget i WordPress-instrumentpanelen senare, som 'Ändra färg på markerad text'.

Du kan sedan lägga till följande CSS i rutan Kodförhandsgranskning:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Lägg märke till att vi lade till två stilar. CSS-väljaren ::moz-selection fungerar med Firefox-webbläsaren, och CSS-väljaren ::selection fungerar med andra populära webbläsare som Google Chrome, Safari, IE9+ och Opera.

I exemplet ovan ändrar # hex-koden länken till grön, så du måste ändra bakgrundsfärg: #008000 till den färg du vill använda för den markerade texten.

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

När du är nöjd med hur din kod ser ut, klickar du bara på växlingsknappen 'Inaktiv' för att visa 'Aktiv' istället.

Klicka sedan på ‘Spara kodavsnitt’ för att göra CSS-kodavsnittet aktivt.

Du kan nu besöka din webbplats för att se ändringarna i praktiken.

Så här såg det ut på vår demonstrationswebbplats.

Metod 2: Använda WordPress-temainställningar (varierar beroende på klassiskt tema)

Vissa WordPress-teman låter dig ändra inställningarna för din typografi och teckensnitt, inklusive färgen på markerad text. För att kontrollera om detta är fallet för ditt tema måste du gå till Utseende » Anpassa.

Notera: Denna metod är inte tillämplig för blockteman.

Leta här efter inställningar märkta 'Färger'.

Om du ser en flik som heter 'Allmänt', 'Globalt' eller liknande, innehåller den ofta tematets färginställningar.

Till exempel, om du använder Astra WordPress-temat, måste du välja fliken 'Global'.

Klicka sedan på 'Färger' för att se alla olika färger som utgör detta WordPress-tema.

Klicka sedan på 'Accent'.

Detta öppnar en färgväljare där du kan välja en ny färg för markerad text.

Du kan nu se hur teckensnittsfärgen ändras eftersom förhandsgranskningen i realtid uppdateras automatiskt. Så du kan prova olika inställningar för att se vad som ser bäst ut för din WordPress-webbplats.

När du är nöjd med dina ändringar, klicka bara på 'Publicera' för att göra dem live.

Därefter ser du den nya färgen för markerad text live på din WordPress-blogg eller webbplats.

Även om du inte ser några färginställningar i WordPress temaanpassare, är det ändå värt att kontrollera ditt temas dokumentation för att se om det finns ett sätt att ändra standardfärgen för textmarkering.

Du kan till och med kontakta tematets utvecklare för hjälp. För mer information, se vår guide om hur du korrekt ber om WordPress-support och får den.

Upptäck fler WordPress-typsnittstips och tricks

Vill du anpassa typsnitten på din WordPress-webbplats, men vet inte hur? Kolla in dessa guider för att komma igång:

• Bästa WordPress typografiplugginer för att förbättra din design
• Hur du enkelt ändrar teckenstorlek i WordPress
• Vad är ett webbsäkert typsnitt + Bästa webbsäkra typsnitten (Börjar-guide)
• Hur man enkelt lägger till ikonfonter i ditt WordPress-tema
• Hur man lägger till initialer i WordPress-inlägg

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du ändrar standardfärgen för markerad text i WordPress. Du kanske också vill se vår guide om de bästa dra-och-släpp-sidbyggarna för WordPress och hur man säljer typsnitt online med WordPress.

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.