Hur man använder WordPress temaanpassare som ett proffs (ultimat guide)

Har du någonsin öppnat WordPress Theme Customizer, tittat på alla alternativ och känt dig helt överväldigad?

Det finns dussintals inställningar för färger, typsnitt och layouter, vilket kan kännas överväldigande när du bara försöker få din webbplats att se bra ut. Du ändrar några saker, men på något sätt ser din webbplats sämre ut än när du började.

Vi har sett många nybörjare stöta på samma problem, och de goda nyheterna är att det är lättare att fixa än du kanske tror.

I den här guiden går vi igenom hur du använder WordPress Theme Customizer steg för steg så att du kan skapa en polerad, användarvänlig webbplats utan förvirring. Vi kommer också att dela med oss av några tips som sparar dig timmar av försök och misstag. 🙌

Hur man kommer åt WordPress temaanpassare

Temaanpassaren är en standardfunktion i WordPress som låter dig styra utseendet på ditt tema. Den kommer med alla klassiska teman och inkluderar en inställningspanel för webbplatsomfattande kontroller som typografi, rubrikdesign och mer.

Du kan komma åt den genom att logga in på ditt WordPress-adminområde. Gå sedan till Utseende » Anpassa från sidofältet till vänster i ditt adminpanel.

Detta öppnar anpassningsgränssnittet med ditt aktuella tema.

Du kan också använda WordPress temaanpassare för alla dina webbplatsens installerade teman, även om de är inaktiva. Den här funktionen låter dig se en liveförhandsgranskning av temat och göra ändringar innan du aktiverar det.

För att göra det måste du gå till sidan Utseende » Teman. Håll sedan muspekaren över ett installerat tema och klicka på knappen 'Förhandsgranska' för att öppna sidan för anpassning av WordPress-teman.

Hur man använder WordPress Theme Customizer

Efter att ha öppnat WordPress temaanpassare ser du alla anpassningsinställningar på vänster sida av skärmen. Förhandsgranskningen av din webbplats visas på höger sida.

WordPress temaanpassare levereras med en uppsättning standardpaneler oavsett ditt tema.

Du måste klicka på de enskilda panelerna för att göra ändringar i dem. Du kan också klicka på någon av de blå pennikonerna på höger sida av skärmen för att öppna inställningarna för det specifika objektet.

I de följande avsnitten visar vi de standardalternativ som finns tillgängliga i WordPress temaanpassare, samt delar med oss av några anpassningstips och alternativ.

Om du är intresserad av ett visst ämne kan du klicka på länken för att hoppa framåt i artikeln:

• Panel för webbplatsidentitet: Lägg till titel, logotyp och favicon
• WordPress Temanpassare: Ändra färger på din webbplats
• Lägga till navigeringsmenyer i temaanpassaren
• Kontrollera widgets på din webbplats i temaanpassaren
• Panel för startsidesinställningar i Temanpassaren
• Panel för ytterligare CSS för att lägga till anpassad CSS
• Andra temaanpassningsalternativ
• Förhandsgranska din webbplats i olika skärmupplösningar
• Publicera, spara eller schemalägg dina anpassningsinställningar
• Förhandsgranska olika teman utan att gå live
• Importera eller exportera inställningar för temaanpassaren
• Bonus Tip: WordPress Theme Customizer Alternatives
• Vanliga frågor om att använda WordPress temaanpassaren
• Fortsätt utforska: Designa och anpassa som ett proffs

Redo? Låt oss börja.

Panel för webbplatsidentitet: Lägg till titel, logotyp och favicon

Panel 'Webbplatsidentitet' i WordPress temaanpassare låter dig lägga till eller ändra din webbplats titel och tagline.

Som standard lägger WordPress till 'Just Another WordPress Site' som webbplatsens slogan. Vi rekommenderar att du ändrar den efter att du har installerat WordPress på din webbplats, men du kan också lämna den tom om du vill.

Panel 'Webbplatsidentitet' i WordPress temaanpassaren låter dig också lägga till din webbplatslogotyp. Klicka bara på alternativet Välj logotyp för att ladda upp din webbplatslogotyp.

Vill du lägga till en favicon på din webbplats? Du kan göra det genom att klicka på alternativet 'Välj webbplatsikon'.

För detaljerade instruktioner kan du följa vår guide om hur du skapar och lägger till en favicon på din webbplats.

WordPress Temanpassare: Ändra färger på din webbplats

Kontrollerna i panelen 'Färger' varierar oftast beroende på vilket WordPress-tema du använder.

Till exempel tillåter Sydney-temat dig att välja en färgpalett för hela din webbplats under Globala färgalternativ. Det låter dig också ändra bakgrund, text, länkar, rubriker, formulärfält och sidofält.

Andra WordPress-teman kan ha olika färgalternativ, såsom separata kontroller för sidhuvudsfärger, navigeringsmenyer, knappar eller specifika delar av webbplatsen.

Lägga till navigeringsmenyer i temaanpassaren

Panel 'Menyer' låter dig skapa navigeringsmenyer och styra deras placering på din webbplats.

På den här fliken hittar du alla befintliga WordPress-menyer som du har skapat tidigare. Du kan klicka på knappen 'Visa alla platser' för att kontrollera de tillgängliga menyplatserna som ditt tema stöder.

För att skapa en ny meny måste du klicka på knappen 'Skapa ny meny'.

Därefter behöver du ge din meny ett namn så att du enkelt kan hantera den senare. Du kan också välja menyplatsen och klicka på 'Nästa' för att fortsätta.

För att lägga till objekt i den här menyn måste du först klicka på knappen 'Lägg till objekt'. Detta öppnar en ny panel.

Du kan nu lägga till anpassade länkar, sidor, inlägg, kategorier och taggar som menyalternativ i respektive fält.

För att ändra ordningen på objekten kan du klicka på länken 'Ändra ordning' och sedan använda pilikonerna för att justera menyalternativen.

Kontrollera widgets på din webbplats i temaanpassaren

'Widgets'-panelen låter dig lägga till och hantera widgets på din webbplats. Om du klickar på den visas de olika platser där du kan lägga till widgets.

Och igen, detta kommer att variera beroende på vilket WordPress-tema du använder.

Till exempel erbjuder temat Sydney fem widget-platser, medan temat Twenty Nineteen bara har en plats.

När du klickar på någon av dem ser du de widgets du tidigare har lagt till på den platsen.

För att lägga till en ny widget kan du klicka på knappen 'Lägg till en widget'. Detta öppnar en ny panel där du ser en lista över alla tillgängliga widgets.

Sedan behöver du klicka på det du vill lägga till. Du kan också göra ändringar i de nyligen tillagda widgets och justera deras position genom att dra dem upp eller ner.

Panel för startsidesinställningar i Temanpassaren

Som standard visar WordPress de senaste blogginläggen på din startsida.

De flesta användare föredrar dock att använda en anpassad startsida för företagswebbplatser. Detta gör att du kan ha en ordentlig landningssida som visar dina produkter och tjänster.

För att använda en anpassad startsida vill du välja alternativknappen 'En statisk sida' i panelen 'Startsidesinställningar'.

Detta kommer att öppna två nya rullgardinsmenyer som du kan använda för att välja en sida för din startsida och en annan för att visa dina blogginlägg.

Om du inte har sidor på din webbplats kan du skapa en ny genom att klicka på länken '+ Lägg till ny sida' som finns under rullgardinsmenyn. Detta skapar en tom sida med det namn du väljer.

Panel för ytterligare CSS för att lägga till anpassad CSS

Vill du lägga till anpassad CSS-kod för att styla din webbplats? Du kan göra det i panelen 'Ytterligare CSS'.

Mellanliggande och avancerade WordPress-användare anpassar ofta sina webbplatser genom att lägga till CSS-kod direkt i style.css-filen i sitt tema. Denna metod kräver ytterligare steg som att ha FTP-åtkomst till din WordPress-hosting, modifiera temafiler, etc.

En enklare lösning för nybörjare är att lägga till din anpassade CSS-kod i panelen Ytterligare CSS i WordPress temaanpassare. Detta gör att du kan göra ändringar på din webbplats och se dem live på höger sida av skärmen.

När du börjar skriva CSS-kod kommer WordPress automatiskt att föreslå attribut baserat på de bokstäver du skriver. Det kommer också att visa felmeddelanden om du inte har skrivit en korrekt CSS-sats.

Andra temaanpassningsalternativ

Vissa gratis och premiumteman erbjuder fler alternativ för temaanpassning.

Beroende på vilket tema du använder kan du kanske ändra typsnitt, lägga till en bakgrundsbild, ändra layouten, modifiera färger, lägga till slumpmässiga sidhuvudsbilder och mycket mer.

Du kan också lägga till specifika funktioner i din temaanpassare med hjälp av plugins.

Du kan till exempel lägga till egna teckensnitt i WordPress med hjälp av pluginet Easy Google Fonts.

Förhandsgranska din webbplats i olika skärmupplösningar

Det är viktigt för alla webbplatsägare att se till att deras webbplats är mobilanpassad och ser bra ut på alla skärmstorlekar.

Tack vare WordPress temaanpassare kan du enkelt se hur din webbplats ser ut på olika skärmstorlekar.

Längst ner i Theme Customizer-panelen hittar du tre ikoner och länken 'Dölj kontroller'.

Dessa ikoner låter dig testa din webbplats på olika skärmupplösningar, som stationära datorer, surfplattor och mobila enheter.

Länken 'Dölj kontroller' är användbar för att dölja WordPress anpassningspanel så att du kan se din webbplats ordentligt på en dator.

Publicera, spara eller schemalägg dina anpassningsinställningar

När du har gjort nödvändiga ändringar måste du tillämpa dem på din webbplats. Annars kommer allt ditt hårda arbete att gå förlorat.

Klicka på knappen 'Publicera' för att tillämpa ändringarna. När processen är klar kan du klicka på stängningsknappen längst upp till vänster på skärmen för att avsluta temaanpassaren.

Vad händer om du behöver mer tid för att slutföra din nya WordPress-design? I så fall kan du spara din nya design som ett utkast och till och med dela den med någon utan att ge dem åtkomst till ditt adminområde.

För att göra det måste du klicka på kugghjulsikonen precis bredvid knappen 'Publicera'. Detta öppnar panelen 'Åtgärd'.

Här hittar du tre alternativ: 'Publicera', 'Spara utkast' och 'Schemalägg'.

Välj helt enkelt radio-knappen 'Spara utkast' i panelen 'Åtgärd'. Klicka sedan på knappen 'Spara utkast' för att lagra dina ändringar.

Du kan nu kopiera förhandsgranskningslänken och dela den med andra för att få feedback.

Alternativet 'Schemalägg' låter dig publicera dina ändringar på ett specifikt datum och tid. Du kan till exempel schemalägga dina temaanpassningar för att gå live vid den tidpunkt då du har minst trafik.

Slutligen, om du vill återställa de opublicerade ändringarna kan du klicka på länken 'Kasta ändringar' i åtgärdspanelet.

Förhandsgranska olika teman utan att gå live

Det finns tillfällen då du vill kontrollera hur ett nytt tema skulle se ut på din webbplats. Du vill dock inte aktivera dem på din live-webbplats.

I så fall kan du öppna WordPress Customizer för att testa nya teman utan att gå live.

I anpassningspanelen hittar du namnet på ditt aktiva tema och knappen 'Ändra'.

Om du klickar på den knappen kommer WordPress att visa alla dina installerade teman på höger sida av sidan.

För att kontrollera ett visst tema måste du klicka på knappen 'Förhandsgranska'.

Du kan också förhandsgranska teman från WordPress temaförråd.

För att göra det måste du välja kryssrutan 'WordPress.org-teman' i den vänstra panelen. Detta visar teman från WordPress.org-katalogen.

Klicka bara på knappen ‘Installera & Förhandsgranska’ för att kontrollera det tema du gillar.

Du kan också filtrera teman genom att klicka på knappen 'Filtrera teman' längst upp till höger på skärmen.

Importera eller exportera inställningar för temaanpassaren

Visste du att du kan importera och exportera dina inställningar för temaanpassaren?

Detta är extremt hjälpsamt när du gör ändringar i ditt tema på din lokala server eller en staging-webbplats. Istället för att kopiera inställningarna manuellt till din live-webbplats kan du helt enkelt exportera inställningarna för temaanpassaren för att spara tid.

För detaljerade instruktioner kan du följa vår guide om hur man importerar och exporterar inställningar för temaanpassaren i WordPress.

Bonustips: Alternativ till WordPress temaanpassare

Även om WordPress anpassare låter dig göra ändringar på din webbplats, kommer antalet kontroller att variera beroende på vilket tema du använder.

Vad händer om du gillar ditt tema men önskar att det hade extra anpassningsalternativ?

I så fall är den bästa lösningen att använda ett av de tre anpassningsplugins som fungerar tillsammans med WordPress temaanpassare.

SeedProd

SeedProd är den bästa dra-och-släpp-sidbyggaren för WordPress. Du kan använda SeedProd för att enkelt skapa anpassade WordPress-teman och sidlayouter utan att redigera någon kod.

Några av våra partner varumärken har använt SeedProd för att bygga sina webbplatser. Nyfiken på vår erfarenhet? Dyk ner i vår detaljerade SeedProd-recension för mer insikter.

SeedProd erbjuder hundratals förgjorda sidlayouter för landningssidor, försäljningssidor, webbinarieregistreringssidor, kommande sidor, sidor för underhållsläge och mycket mer.

Anpassning är enkel med färdiga block som opt-in-formulär, sociala profiler, knappar, nedräkningstimer, kontaktformulär och mer.

Du kan också ställa in färgscheman, spara tecknikombinationer och återanvända sidor och sidelement så att du inte behöver skapa dem igen.

Thrive Theme Builder

Thrive Theme Builder är ett annat utmärkt dra-och-släpp-plugin för WordPress-temabyggare. Du kan använda det för att enkelt skapa ett anpassat WordPress-tema, ingen kodning krävs.

Den levereras med fyra olika färdiga temamallar för att komma igång snabbt. Varje temamall innehåller en mängd förgjorda sidor som du kan lägga till på din webbplats.

För en djupgående genomgång kan du gå till vår fullständiga recension av Thrive Themes Suite.

Med detta plugin kan du redigera varje del av ditt tema, inklusive rubrik, sidfot, blogginlägg, kategorisidor och mer, helt enkelt genom att peka och klicka.

Dessutom finns det över 100 design- och webbplatsbyggnadselement som du snabbt kan lägga till ditt tema genom att dra och släppa dem på plats.

CSS Hero

CSS Hero är ett WordPress-plugin som låter dig anpassa din webbplats utan att skriva en enda rad CSS-kod. Du har friheten att styla varje element på din webbplats utan krångel.

Vill du anpassa inloggningssidan för din WordPress-webbplats? CSS Hero låter dig göra det på några minuter.

Du kan också redigera och förhandsgranska ändringarna på framsidan för att säkerställa att din design ser perfekt ut på alla enheter.

Beaver Builder

Beaver Builder är en annan av de bästa sidbyggarna för WordPress. Den låter dig bygga fantastiska sidor för din webbplats med ett dra-och-släpp-gränssnitt.

Det bästa är att Beaver Builder fungerar med nästan alla WordPress-teman. Detta gör att du kan använda det med ditt nuvarande tema. Vi har testat det grundligt, och du kan läsa allt om det i vår kompletta recension av Beaver Builder.

Beaver Builder stöder användning av kortkoder och widgets. Det erbjuder också olika typer av moduler som du kan använda för att enkelt styla din webbplats. Du kan se vår guide om hur du skapar anpassade layouter i WordPress för detaljerade instruktioner.

Vanliga frågor om att använda WordPress temaanpassaren

Har du fortfarande frågor om hur du får ut mesta möjliga av Theme Customizer? Här är några vanliga frågor vi hör från WordPress-användare.

Kan jag anpassa varje tema med WordPress temaanpassare?

Inte alla teman. De flesta WordPress-teman stöder fortfarande Theme Customizer och erbjuder olika designalternativ. Blockbaserade teman som använder Full Site Editing (FSE) förlitar sig dock på Site Editor istället, och Customizer kommer inte att visas i dessa teman.

Kommer byte av tema att radera mina Customizer-inställningar?

Ja, det kan det. Anpassningsinställningar är vanligtvis temaspecifika, så att byta till ett nytt tema kan återställa eller ta bort dessa ändringar. För säkerhets skull, anteckna dina inställningar eller använd import/export-verktyget om ditt tema stöder det.

Vad ska jag göra om jag inte hittar temaanpassaren i WordPress?

Om du inte ser alternativet Utseende » Anpassa i din instrumentpanel, kanske du använder ett blockbaserat tema (Full Site Editing). Dessa teman använder webbplatsredigeraren, som du hittar under Utseende » Redigerare. För mer information, se vår guide om hur du åtgärdar den saknade temaanpassaren i WordPress-instrumentpanelen.

Hur kan jag lägga till extra anpassningsalternativ till mitt tema?

Om ditt nuvarande tema känns för begränsat kan du prova att skapa ett barn-tema eller använda sidbyggarplugins som SeedProd, Thrive Theme Builder eller CSS Hero. Dessa verktyg erbjuder mer designkontroll utan att röra någon kod.

Är det säkert att göra ändringar i temaanpassaren på en live-webbplats?

Ja, det är säkert att göra ändringar i temaanpassaren eftersom de inte blir synliga förrän du klickar på 'Publicera'. Med det sagt, om du planerar större redigeringar är det bäst att testa dem först i en staging-miljö för att undvika att störa din live-webbplats.

Fortsätt utforska: Designa och anpassa som ett proffs

Vi hoppas att den här guiden hjälpte dig att lära dig hur du använder WordPress Theme Customizer som ett proffs.

Om du fann detta hjälpsamt, kanske du också vill se våra andra guider om:

• Hur du anpassar ditt WordPress-tema
• Hur man lägger till en parallaxeffekt till vilket WordPress-tema som helst
• Hur man lägger till nästa/föregående länkar i WordPress 
• Sätt att skapa en mobilvänlig WordPress-webbplats
• Hur man hittar och översätter ett översättningsklart WordPress-tema
• Gratis vs. premium WordPress-teman
• Bästa enkla WordPress-teman du bör prova
• Hur man testar ditt WordPress-tema mot de senaste standarderna

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.