Articles

Hur man anpassar ett WordPress-temas färger

Publicerat i Marknadsföring, WordPress av WP Engine

Sist uppdaterat den 23 december, 2020

customize wordpress theme colors

customize wordpress theme colors

En av de bästa delarna med att använda WordPress är att du får tillgång till tusentals teman som du kan använda för att anpassa stilen på din webbplats. Men ibland hittar du det perfekta temat, bara för att inse att det inte har ett färgschema som du gillar.

Detta kan vara frustrerande, men det behöver inte spåra ur dina planer. Med lite arbete kan du ändra temats färgalternativ och få din webbplats att se ut precis som du vill.

I den här artikeln kommer vi att utforska två sätt du kan anpassa ett WordPress-temas färger, inklusive en manuell metod och en plugin-metod. Nu sätter vi igång!

Hur du ändrar WordPress-temats färger

I det här avsnittet ska vi visa dig hur du ändrar dina WordPress-temafärger på det manuella sättet. För att göra detta vill du använda ett ”underbarnstema”, så att du inte förlorar några av de ändringar du gör när det ”överordnade” temat uppdateras.

Det är dessutom nästan alltid en smart idé att sätta upp ett underbarnstema om du planerar att göra några anpassade ändringar i ramverket för din webbplats. Låt oss tala om hur du får jobbet gjort.

Steg 1: Skapa ett underbarnstema

Ett underbarnstema är en kopia av ett föräldratema, som ärver samma stilar. Du kan göra ändringar i dess kod utan att påverka det överordnade temat, och de kommer inte att skrivas över när du behöver uppdatera temat. Det här tillvägagångssättet gör att du kan redigera stilen på din webbplats på ett säkert sätt, så att om du gör några misstag kan du återgå till det överordnade temat och börja om från början.

När det gäller att skapa ett underordnat tema finns det två sätt du kan gå tillväga på. För det första kan du följa det manuella tillvägagångssättet, som vi tar upp i den här artikeln och som kan sammanfattas i fyra steg:

  1. Ansluta till din webbplats via File Transfer Protocol (FTP), med hjälp av en klient som FileZilla.
  2. Navigera till din mapp WordPress Themes.
  3. Skapa en ny mapp för ditt underbarnstema.
  4. Inställ en style.css-fil för ditt underbarnstema.

Hur som helst kan du istället välja att använda ett insticksprogram om du inte är bekväm med att redigera WordPress-filer manuellt. För det här scenariot rekommenderar vi Child Theme Configurator. Med det här insticksprogrammet kan du generera ett underbarnstema och konfigurera dess inställningar med hjälp av en enkel meny.

Du är naturligtvis fri att använda vilken metod du föredrar. När ditt underbarnstema är konfigurerat kan du aktivera det och gå vidare till nästa steg.

Steg 2: Logga in i WordPress och öppna anpassningsverktyget

För att du ska kunna ändra färgerna på ditt WordPress-tema måste du logga in på din instrumentpanel. När du är där navigerar du till fliken Appearance > Editor:

how to customize wordpress themes

how to customize wordpress themes

Där hittar du en enkel textredigerare som gör att du kan ändra filerna för ditt underbarnstema. Tänk på att du också kan göra detta med FTP och din favorittextredigerare, men resultatet blir detsamma på båda sätten.

Om du hellre vill förhandsgranska de ändringar du gör live kan du också redigera ditt temas färger med hjälp av WordPress Customizer. För att göra det navigerar du till fliken Utseende > Anpassa och öppnar sedan avsnittet Ytterligare CSS:

change wordpress theme colors

change wordpress theme colors

I båda fallen måste du använda Cascading Style Sheets (CSS) för att ändra färgerna i ditt tema. Det är där vårt sista steg kommer in.

Steg 3: Ändra färgerna på ditt WordPress-tema

Detta steg är ganska enkelt om du redan är bekant med CSS. Varje element i ditt tema har ett eget namn eller ”klass” som du kan rikta in dig på med hjälp av CSS-kod. Du måste veta vad den relevanta klassen är och sedan använda HEX-färgkoder för att ändra den.

Om du till exempel vill ändra temats bakgrundsfärg kan du lägga till ett CSS-utdrag som detta i ditt undertema (med hjälp av någon av metoderna i det sista avsnittet):

background-color: #XXXXXX;

Den första delen av koden är inriktad på rätt klass för det element som du vill ändra. Därefter behöver du bara ange den HEX-färg du vill använda. När du är klar, glöm inte att spara ändringarna i ditt temas formatmall.

Tyvärr kan du, eftersom du använder ett barntema, experimentera fritt utan att behöva oroa dig för att något på din webbplats ska gå sönder. Om du är nybörjare inom CSS kan du läsa den här guiden om hur du identifierar element på din webbplats. Sedan kan du leka med HEX-färgkoder tills du hittar en kombination som du gillar.

Plugins som ändrar WordPress-temafärger

Om du föredrar att använda plugins i stället för CSS kommer du att bli glad att veta att det finns flera alternativ som du kan använda för att anpassa WordPress-temafärger. Låt oss gå igenom två av våra favoritverktyg.

Plugin 1: Child Theme Configurator

change font color in wordpress

change font color in wordpress

Child Theme Configurator är vårt förstahandsval, eftersom det gör det möjligt för dig att både skapa ett undertema och anpassa dess färgschema. Det betyder att du kan hoppa över många av de steg vi täckte tidigare och börja experimentera med färgpaletter mycket snabbare. Med det här insticksprogrammet kan du ändra teckensnittsfärger, bakgrundstoner och mycket mer.

Plugin 2: Central Color Pallete

how to change wordpress color scheme

how to change wordpress color scheme

Som namnet antyder gör Central Color Pallete det möjligt för dig att ändra ditt temas färgpalett. Det här insticksprogrammet integreras väl med många populära teman och insticksprogram och låter dig hoppa över processen att använda WordPress-redigeraren för att välja och byta färger. Två av de plugins som Central Color Palette fungerar smidigt med är Beaver Builder och Elementor.

Uppdatera din digitala WordPress-upplevelse med WP Engine

Oavsett vilket tema du väljer behöver du ett webbhotell som ger dig den stabilitet och prestanda som du behöver för att driva och anpassa din webbplats. Med WP Engine får du båda dessa funktioner och tillgång till ett fantastiskt supportteam.

Om du är mer av en ”gör-det-själv”-typ publicerar vi också många handledningar som du kan använda för att felsöka eller göra ändringar på din webbplats. Kolla in våra planer och ge oss ett försök!