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

Temats anpassningsfunktion är en standardfunktion för klassiska WordPress-teman som låter dig styra utseendet på din webbplats. 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. Navigera sedan till Utseende » Anpassa från vänster sidofält 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 anpassningsverktyg för teman ser du alla anpassningsinställningar på vänster sida av skärmen. En förhandsgranskning 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:

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 ha installerat WordPress på din webbplats. Men om din webbplats logotyp redan innehåller ditt varumärkesnamn kan du lämna sloganen tom för att undvika upprepning.

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 ett färgschema 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 rubrikfärger, navigeringsmenyer, knappar eller specifika sektioner av webbplatsen.

Lägga till navigeringsmenyer i temaanpassaren

Panelen '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

Panelen 'Widgets' låter dig lägga till och hantera widgets på din webbplats. Att klicka på den visar 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 Sydney-temat fem widgetplatser, medan ett standard klassiskt tema kan ha endast 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 kan lägga till block (som stycken, bilder eller listor) i dessa widget-områden.

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 alternativet ‘En statisk sida’ i panelen ‘Startsidesinställningar’.

Detta öppnar två nya nedrutemenyer 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 lägger ibland till CSS-kod direkt i sitt temas style.css-fil.

Vi rekommenderar inte denna metod för nybörjare eftersom uppdateringar av ditt tema kommer att radera dessa ändringar. Dessutom kräver det extra steg, som att ha FTP-åtkomst till din WordPress-värd och modifiera temafiler, bland annat.

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.

För detaljer, se vår guide om hur du enkelt lägger till anpassad CSS-kod på din WordPress-webbplats.

Andra temaanpassningsalternativ

Vissa gratis och premiumteman erbjuder fler Tematanpassningsalternativ.

Beroende på vilket tema du använder kan du kanske ändra teckensnittsstil, lägga till en bakgrundsbild, ändra layout, 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 anpassade 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 varje 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 simulera hur din webbplats ser ut på stationära datorer, surfplattor och mobila enheter. Även om detta är en bra utgångspunkt, rekommenderar vi alltid att du kontrollerar din webbplats på en faktisk mobiltelefon för att säkerställa att den ser 100% perfekt ut.

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 alternativet 'Spara utkast' i panelen 'Åtgärd'. Klicka sedan på knappen 'Spara utkast' för att spara 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 användbart 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 använda ett plugin för att 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 temaanpassningsinställningar 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 AI-webbplats- och sidbyggaren för WordPress. Du kan använda den för att enkelt skapa anpassade WordPress-teman och sidlayouter – utan att redigera någon kod, på under 60 sekunder.

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ärdiga sidlayouter för landningssidor, försäljningssidor, anmälningssidor för webbinarier, 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-temabyggarplugin för WordPress. 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 sidhuvudet, sidfoten, 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 på din WordPress-webbplats? CSS Hero låter dig göra det inom 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 omfattande, och du kan ta reda på allt i vår kompletta Beaver Builder-recension.

Beaver Builder stöder användningen 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. Många klassiska WordPress-teman stöder fortfarande Theme Customizer och erbjuder olika designalternativ. Teman baserade på block 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?

Nej, de raderas inte, men de förs inte över. Inställningar i Customizer är knutna till det specifika temat du använder. När du byter till ett nytt tema börjar du om från början med det temats standardinställningar.

Dina gamla inställningar sparas dock i databasen. Om du någonsin byter tillbaka till ditt tidigare tema, kommer dina gamla designinställningar att återställas automatiskt.

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

Om du inte ser alternativet Utseende » Anpassa i din instrumentpanel, använder du förmodligen ett blockbaserat tema (Full Site Editing). Dessa teman använder Webbplatsredigeraren, som du hittar under Utseende » Redigerare.

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 barntema 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 Theme Customizer eftersom de inte publiceras 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 tema-anpassare 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 hittar och översätter ett översättningsklart WordPress-tema
• Hur man testar ditt WordPress-tema mot de senaste standarderna
• Bästa enkla WordPress-teman du bör prova

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