Hur man använder WordPress Theme Customizer som en proffs (Ultimate Guide)

Visste du att WordPress kommer med en inbyggd tematilpassare som gör att du enkelt kan göra ändringar i din webbplatsdesign i realtid.


Medan alla teman har en viss nivå för stöd för standardanpassningsalternativen, innehåller många teman ytterligare flikar och alternativ till WordPress-tematilpassaren, så att du enkelt kan anpassa ditt tema utan någon kodningskunskap.

I den här artikeln kommer vi att leda dig genom standardpanelerna och visa hur du använder WordPress-tematilpassare som en proffs.

Hur man använder WordPress Theme Customizer Ultimate Guide

Hur du kommer åt WordPress Theme Customizer

Tematilpassare är en WordPress-standardfunktion och den är en del av varje WordPress-webbplats.

Du kan komma åt det genom att logga in på ditt WordPress admin-område och sedan gå till Utseende » Anpassa från vänster sida i din WordPress adminpanel. Detta öppnar Customizer-gränssnittet med ditt aktuella tema.

Hur du kommer åt WordPress Customizer

Du kan också använda WordPress-temanpassningssidan för något av de installerade teman på din webbplats även om de inte är aktiva.

Detta gör att du kan se en direktförhandsvisning av det temat och göra ändringar innan du aktiverar det.

För att göra det måste du gå till Utseende » teman sida.

Håll sedan muspekaren över alla installerade teman och klicka på Live förhandsvisning -knappen för att öppna WordPress-temanpassningssidan.

WordPress Theme Live Preview Alternativ

Hur man använder WordPress Theme Customizer

När du har öppnat WordPress-tematilpassaren ser du alla anpassningsinställningar på vänster sida av skärmen och liveförhandsvisningen av din webbplats på höger sida.

WordPress Theme Customizer

WordPress-tematilpassare kommer med en uppsättning standardpaneler oavsett vilket tema du använder.

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

Notera: avancerade WordPress-teman lägger till ytterligare inställningspaneler för extra anpassningsalternativ (mer om detta senare).

Låt oss titta på de standardalternativ som finns tillgängliga i WordPress-tematilpassaren.

Webbplatsidentitetspanel: Lägg till titel, logotyp och favorit

De Webbplatsidentitet i WordPress-temanpassaren kan du lägga till eller ändra titeln och taglinjen på din webbplats.

Som standard lägger WordPress till “Just Another WordPress Site” som webbplatsens taglinje.

Det rekommenderas att ändra det efter att du installerat WordPress på din webbplats. Du kan också hålla den så tom om du vill.

Inställningar för webbplatsidentitet för att ändra webbplatsens titel, tagline, logo och favicon

Panelen Site Identity i WordPress-tematilpassaren låter dig också lägga till din webbplatslogotyp. Klicka bara på Välj logotyp alternativet att ladda upp logotypen på din webbplats.

Vill du lägga till en favorit på din webbplats? Du kan göra det genom att klicka på Välj webbplatsikon alternativ. För detaljerade instruktioner kan du följa vår guide om hur du skapar och lägger till ett favicon på din webbplats.

WordPress Theme Customizer: Byt färger på din webbplats

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

Till exempel ger tjugo sjutton-temat dig möjlighet att välja huvudtextfärg och välja ett färgschema för hela webbplatsen.

Byt färger på din webbplats

Andra WordPress-teman kan erbjuda olika färgalternativ för webbplatselement som: rubriker, länkar, karaktärstext, bakgrund på din webbplats osv.

Lägga till navigationsmenyer i Theme Customizer

De menyer panelen låter dig skapa navigationsmenyer och kontrollera deras plats på din webbplats.

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

Menypanel i tematillpassning

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

Efter det måste du ge ett namn till din meny, så att du enkelt kan hantera den senare. Du kan också välja menyplats och sedan klicka på Nästa att fortsätta.

Skapa en ny navigationsmeny

För att lägga till objekt till den här menyn måste du klicka på Lägg till artiklar för att öppna en ny panel. Du kan nu lägga till anpassade länkar, sidor, inlägg, kategorier och taggar som menyalternativ.

Lägg till objekt i navigationsmenyn

Om du vill ordna om föremålen kan du klicka på Ändra ordning länk och använd sedan pilikonerna för att justera menyalternativen.

Kontrollera widgets på din webbplats i Theme Customizer

De widgets panelen låter dig lägga till och hantera widgets på din webbplats.

Om du klickar på den visas de olika platserna där du kan lägga till widgetar. Detta kommer att variera beroende på vilket tema du använder.

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

Widgets-panelen

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

För att lägga till en ny widget måste du klicka på knappen “Lägg till en widget”. Detta öppnar en ny panel där du ser en lista över alla tillgängliga widgetar.

Lägg till widgetar på din webbplats

Du måste klicka på den som vill lägga till. Du kan också göra ändringar av de nyligen tillagda widgetarna och justera dess position genom att dra dem upp eller ner.

Startsidan Inställningspanel i tematillpassning

Som standard visar WordPress de senaste blogginlägg på din hemsida.

Men för företagswebbplatser föredrar användare att använda en anpassad hemsida. Det låter dig ha en korrekt målsida som visar dina produkter och tjänster.

För att använda en anpassad hemsida måste du välja alternativknappen “En statisk sida” på Hemsidainställningar panel.

Startsidainställningar i tematilpassare

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

Om du inte har sidorna på din webbplats kan du skapa en ny genom att klicka på länken “+ Lägg till ny sida” under rullgardinsmenyn. Detta skapar en tom sida med namnet du väljer.

Ytterligare CSS-panel för att lägga till anpassad CSS

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

Intermediära och avancerade WordPress-användare anpassar ofta sin webbplats genom att lägga till CSS-kod direkt till stilen.css-filen i deras tema. Detta lägger till ytterligare steg som att ha FTP-åtkomst till din WordPress-värd, ändra temafiler osv.

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

Lägg till anpassad CSS-kod i Extra CSS-fönster;

När du börjar skriva någon CSS-kod kommer WordPress automatiskt att föreslå attribut till dig baserat på bokstäverna du skriver. Det kommer också att visa felmeddelanden om du inte har skrivit ett korrekt CSS-uttalande.

Obs: Om du vill anpassa din webbplats utan att skriva någon kod, fortsätt att läsa. Vi delar två nybörjarvänliga alternativ som gör att du enkelt kan anpassa ditt tema och till och med skapa ett anpassat WordPress-tema.

Andra tematillpassningsalternativ

Vissa gratis- och premiumtema erbjuder fler temaanpassningsalternativ.

Beroende på vilket tema du använder kan du kanske ändra teckensnittstil, lägga till en bakgrundsbild, ändra layout, ändra färger, lägga till slumpmässiga rubrikbilder och mycket mer.

Du kan också lägga till specifika funktioner i din tematilpassare med hjälp av plugins. Till exempel kan du lägga till anpassade teckensnitt i WordPress med hjälp av insticksprogrammet Easy Google Fonts.

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

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

Tack vare WordPress-tematilpassaren kan du enkelt kontrollera hur din webbplats ser ut på olika skärmstorlekar.

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

Förhandsgranska webbplatsen med olika skärmupplösningar

Med dessa ikoner kan du testa din webbplats på olika skärmupplösningar som skrivbord, surfplatta och mobila enheter.

De Dölj kontroller länken är användbar för att dölja WordPress Customizer-panelen så att du kan visa din webbplats ordentligt på skrivbordsläget.

Publicera, spara eller schemalägga dina kundinställningar

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

Gå vidare och klicka på Publicera för att tillämpa ändringarna. När du är klar kan du klicka på stängningsknappen, närvarande i det övre vänstra hörnet på skärmen, för att avsluta tematilpassaren.

Publicera WordPress Customizer-inställningar

Tänk om du behöver mer tid för att slutföra din nya design? I så fall kan du spara det som ett utkast och till och med dela din nya design med någon utan att ge dem tillgång till ditt administrationsområde.

För att göra det måste du klicka på kugghjulsikonen bredvid Publicera knapp. Detta öppnar Åtgärdspanelen.

WordPress Customizer Spara utkastalternativ

Här hittar du tre alternativ: Publicera, Spara utkast och schema.

Du måste välja Spara utkast radioknappen på åtgärdspanelen och klicka sedan på 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.

Å andra sidan, Schema Med alternativet kan du publicera dina ändringar på ett specifikt datum och tid. Du kan använda det här alternativet för att schemalägga dina temaförändringar för att gå live vid den tidpunkt då du får minst trafik.

Planera Customizer-inställningar på ett specifikt datum

Slutligen, om du vill återställa de opublicerade ändringarna, kan du klicka på Ignorera ändringar länk på Åtgärdspanelen.

Förhandsgranska olika teman utan att gå live

Det finns tillfällen när du vill kontrollera hur ett nytt tema ser 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.

På Customizer-panelen hittar du namnet på ditt aktiva tema och Förändra knapp.

Ändra WordPress Theme från Customizer

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å Live förhandsvisning knapp.

Förhandsgranska installerade teman på Theme Customizer

Du kan också förhandsgranska teman från WordPress Themes Repository. För att göra det måste du markera kryssrutan ”WordPress.org-teman” på vänster panel.

Detta visar teman från WordPress.org-katalogen. Du kan klicka på “Installera & Förhandsgranska ”-knappen för att kontrollera det tema du gillar.

WordPress temakatalog

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

Notera: Vi rekommenderar att du använder en WordPress-staging-webbplats för att testa nya teman istället för att använda anpassningen på en live-webbplats.

Importera eller exportera teman anpassningsinställningar

Visste du att du kan importera och exportera dina teman anpassningsinställningar?

Detta är oerhört användbart när du gör ändringar av ditt tema på din lokala server eller en iscenesättningssida. Istället för att kopiera inställningarna manuellt till din live-webbplats kan du helt enkelt exportera inställningarna för tematilpassare för att spara din tid.

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

WordPress Theme Customizer Alternatives

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

Tänk om du gillar ditt tema, men önskar att det hade extra anpassningsalternativ?

I så fall är den bästa lösningen att använda en av de två anpassningsplugins som fungerar tillsammans med WordPress-tematilpassaren.

CSS Hero

CSS Hero-plugin

CSS Hero är ett WordPress-plugin som låter dig anpassa din webbplats utan att skriva en enda kodrad. Du har friheten att utforma varje element på din webbplats utan problem.

Vill du anpassa inloggningssidan på din WordPress-webbplats? Med CSS Hero kan du göra det inom några minuter.

Du kan också redigera och förhandsgranska ändringarna i frontend för att se till att din design ser perfekt ut på alla enheter.

Beaver Builder

Beaver Builder-plugin

Beaver Builder är en av de bästa pluginprogrammen för WordPress-sidbyggare på marknaden. Det 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 arbetar med nästan alla WordPress-teman. Detta gör att du kan använda det med ditt aktuella tema.

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

Du kan också använda Beaver Builder för att skapa ett helt anpassat WordPress-tema utan att skriva någon kod.

Vi hoppas att den här guiden hjälpte dig att lära dig att använda WordPress Theme Customizer som en proffs. Du kanske också vill se vår guide om de bästa WordPress-plugins och verktyg för din webbplats.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map