Så här anpassar du ditt WordPress-tema (5 steg-för-steg-sätt)

Om du har installerat ett WordPress-tema men det inte är rätt för dig kan du känna dig frustrerad. Det finns många alternativ tillgängliga för att anpassa dina WordPress-teman.

Utmaningen är att hitta rätt sätt att göra det.

I det här inlägget styr jag dig genom alternativ för att anpassa ditt WordPress-tema, hjälpa dig att bestämma vilken som är rätt för dig och visa dig hur du gör det säkert och effektivt.

Föredrar du att titta på vår videoversion? Klicka på play nedan:

Alternativ för att anpassa ett tema

Innan vi dyker in och börjar göra ändringar i ditt tema, lönar det sig att förstå vad alternativen är, eftersom de passar olika situationer.

Här är en översikt över de tillgängliga alternativen:

• Om du vill lägga till funktionalitet i ditt tema, installera ett plugin.
• Använd Anpassning på dina WordPress-administratörsskärmar för att anpassa teckensnitt, färger och kanske också layout, beroende på ditt tema.
• Om du arbetar med ett sidbyggartema använder du dess funktioner för att anpassa utformningen av din webbplats.
• Om du har installerat ett ramtema, använd ett av de tillgängliga underordnade teman för att anpassa din webbplats, tillsammans med alla anpassningsalternativ som är livskraftiga, förvalt administratörsskärmarna.
• Om ditt tema är specifika för din webbplats och du är bekväm med att göra det, redigera temakoden direkt.
• Om du vill redigera koden för ett tredje parts tema skapar du ett underordnat tema.

Om du vill redigera koden , du har ett antal alternativ tillgängliga för dig, från att använda blockredigeraren till anpassaren, ända till att redigera filerna. Vi kommer att titta på dem alla i det här inlägget, men låt oss börja med det enklaste alternativet: installera ett plugin.

Behöver du verkligen anpassa ditt tema?

Ibland behöver du inte ’ du behöver inte anpassa ditt tema alls: istället måste du installera ett plugin.

Teman dikterar utformningen av din webbplats: hur den ser ut och hur den visar innehåll. Plugins lägger till extra funktionalitet.

Om de ändringar du vill göra är inriktade på funktionalitet snarare än design, överväg att installera ett plugin själv. Det här kan vara ett plugin du behöver skriva, en som du laddar ner från plugin-katalogen eller en du köper.

Om du befinner dig att vilja redigera functions.php-filen i ditt tema, fråga dig själv:

Skulle jag vilja behålla den här funktionen om jag bytte teman i framtiden?

Om svaret är ja, ska den koden finnas i ett plugin, inte ditt tema.

Bra exempel på vad du skulle använda ett plugin istället för ett tema inklusive att lägga till widgets, registrera anpassade inläggstyper och taxonomier , skapa anpassade fält och lägga till extra funktioner som en butik eller SEO-förbättringar.

Anpassa ditt WordPress-tema via WordPress-administratörsskärmar

Om ändringarna du vill göra är designfokuserade och relativt enkelt kan du kanske göra dem via administratörsskärmarna. Anpassaren ger dig en mängd olika alternativ för att justera ditt tema: vad som är tillgängligt för dig beror på ditt tema. Och du kan se något som heter Editor i menyn Utseende. Undvik detta, av skäl som jag kommer att beskriva inom kort.

Anpassa ditt tema via anpassaren

Det enklaste sättet att anpassa ditt WordPress-tema är att använda WordPress Customizer.

Du får åtkomst till detta på ett av två sätt:

• När du visar din webbplats (när du är inloggad) klickar du på länken Anpassa i administratörsfältet högst upp på skärmen.
• På administratörsskärmarna klickar du på Utseende > Anpassa.

Detta tar dig till anpassaren.

I skärmdumpen ovan har jag installerat ett gratis tema som heter ColorMag som har många anpassningsalternativ. Det har lagts till avsnitt till Customizer för designfunktioner inklusive en rubrikbild, sociala medier, kategorifärger och en flik Designalternativ som tar dig till ännu fler flikar där du kan göra ändringar i layout och design på din webbplats.

Olika teman har olika anpassningsalternativ, men nyare teman verkar lägga till fler och fler av dem hela tiden. Om du hittar ett tema som du gillar men som inte passar dig, kanske du tycker att anpassning av det ger dig exakt den design och layout du behöver.

Temaredigeraren (och varför inte användas det)

På dina administratörsskärmar kanske du märker ett alternativ som kallas temaredigeraren, som du aktiverar via Utseende > Temaredigerare.

Detta ger dig tillgång till filerna i ditt tema , vilket innebär att du kan redigera dem direkt.

Gör det inte.

Även om du är bekväm med att skriva CSS eller PHP är det mycket dåligt att redigera filerna i ditt tema av två skäl:

• Om du har köpte eller laddade ner ett tema från tredje part förloras alla ändringar du gör nästa gång du uppdaterar temat (och du bör hålla ditt tema uppdaterat av säkerhetsskäl).
• Ännu viktigare, om du gör en ändring som bryter din webbplats, kommer den inte att spåras och den tidigare versionen av filen kommer inte att ändras. Du kan oåterkalleligt bryta webbplatsen.

Om du vill redigera koden i ditt tema bör du göra det med en kodredigerare (kolla in de bästa gratis HTML-redigerarna), och du borde inte Du kan inte redigera filerna på din livewebbplats förrän du har testat dem på en iscensättningswebbplats. Om du behöver redigera ett tredje parts tema bör du göra det via ett underordnat tema. Mer om båda dessa senare i det här inlägget.

WordPress vet hur osäkert det är att använda temaredigeraren: det ger dig till och med en varning när du försöker komma åt den.

Så ta WordPress-råd: gör inte använda temaredigeraren!

Använda sidbyggare och ramar för att anpassa ditt WordPress-tema

En stor del av WordPress-teman har anpassningsalternativ, vilket innebär att du kan göra ändringar i design och layout via Customizer.

Men vissa teman tar detta längre och är utformade för att utvidgas och väsentligt anpassas. Dessa teman kallas temaramar.

Ett annat alternativ är att använda ett plugin som låter dig designa din webbplats med ett användarvänligt gränssnitt: de kallas sidbyggare.

Använda en sida Builder för att anpassa ditt tema

Page Builder-plugins är utformade för att göra det enkelt för dig att ställa in designen på din webbplats med ett gränssnitt som låter dig se vad du får.

Du installerar ett plugin för sidbyggare med ett kompatibelt tema och använder sedan alternativen för att utforma din webbplats precis som du vill ha den.

En av de mest kända sidbyggarna är Elementor, men du kan ta reda på några alternativ i vår sammanställning av sidbyggare.

Sidbyggare låter dig redigera dina inlägg och sidor med ett dra-och-släpp-gränssnitt, vilket innebär att du kan se hur ditt innehåll kommer att se ut och kan göra varje sida unika.

Nedan använder jag Elementor-sidbyggaren med Hello Elementor-temat, vilket är kompatibelt med det.

Sidbyggare ger dig mycket flexibilitet med layout och design på dina sidor. Om du är van vid en webbplatsbyggare som Wix kan de underlätta övergången till WordPress. Och om du föredrar ett WYSIWYG-gränssnitt för ditt WordPress-innehåll kan de hjälpa dig att designa dina sidor snabbt.

Att använda ett temaramverk för att anpassa ditt tema

Ett alternativ till sidbyggare är tema ramar. Dessa är sviter med teman som är utformade för att arbeta tillsammans. Det finns ett överordnat tema som är ramverket och ett urval av underordnade teman som du kan använda för att anpassa huvudtemat och få det att se ut som du vill.

Ett exempel på temaramar är Divi, som har anpassningsalternativ som gör att du kan anpassa designen för ditt barns tema ännu mer, inklusive ett dra-och-släpp-gränssnitt som liknar sidbyggarna.

Redigera ditt WordPress-temas kod

Om du är bekväm med att redigera CSS och / eller PHP kan du redigera koden i ditt tema för att anpassa ditt tema.

Detta ger dig största kontrollen.

Om du redigerar ditt eget tema, som är specifikt för din webbplats och utvecklades speciellt för det, då kan du redigera temat direkt. Men om du arbetar med ett tredje parts tema och vill redigera det bör du skapa ett underordnat tema för att undvika att förlora dina ändringar nästa gång du uppdaterar temat.

Redigera temafiler

Det första steget för att redigera ditt WordPress-tema är att förstå vilka temafiler som styr vad och vilka du måste redigera.

Stilarket

Varje WordPress-tema har en stilark, kallad style.css. Den innehåller all kod för att utforma din webbplats: layout, teckensnitt, färger och mer.

Om du till exempel vill ändra färgerna i ditt tema skulle du göra ändringar i stilarket. Om du vill lägga till ett nytt teckensnitt använder du stilarket för att tillämpa det på olika element, till exempel brödtexten och rubrikerna.

Var uppmärksam när du redigerar formatmallen: specificitet betyder att koden för ett element inte alltid kommer från var du tror det är.Element kommer att ärva styling från andra element som ligger ovanför dem i sidans hierarki såvida du inte lägger till styling som är specifik för det nedre elementet.

För att upptäcka vad CSS påverkar vilka element på sidan kan du använd inspektören i din webbläsare för att visa CSS (Chrome DevTools i det här exemplet):

Du kan sedan använda den för att skriva ny CSS som riktar sig till enskilda element eller ett antal element eller klasser på sidan.

Om allt detta om element, klasser och specificitet är nytt för dig kanske du vill undvika direkt redigering av temat CSS. Åtminstone tills du har lärt dig mer om CSS och hur det fungerar.

Funktionsfilen

En annan fil som i stort sett alla teman kommer att ha är funktionsfilen (functions.php) . Det här är filen som gör att en massa saker fungerar i ditt tema. Inuti den kan du hitta kod för att registrera temafunktioner som utvalda bilder, widgets och mer.

Om du är frestad att lägga till funktionell kod till ditt tema, kommer du att lägga till den här. Men se upp: i de flesta fall borde du verkligen skriva ett plugin. Fråga dig själv:

Vill jag behålla den här funktionen om jag byter tema i framtiden?

Om svaret är ja, skriv ett plugin istället för att lägga till kod i funktionsfilen. Plugins behöver inte vara stora: det finns inget som hindrar dig från att skapa en för ett par kodrader.

Funktionsfilen är alla skrivna i PHP, så du måste känna till det där. Kopiera inte koden du hittar via en Google-sökning: ta dig tid att ta reda på vad den koden gör och förstå den. På det sättet är det mindre troligt att du lägger till kod som inte är så bra som den borde vara.

Temamallfilerna

De flesta av filerna i ett tema är temamallfiler . Det här är filer som avgör vilket innehåll WordPress matar ut på en viss sida och väljs enligt mallhierarkin.

Om du vill ändra hur innehållet matas ut på en viss posttyp, sida eller arkiv måste du antingen redigera en av dessa filer eller skapa en ny.

Anta till exempel att ditt tema har en archive.php-fil som används för att mata ut arkivsidor för kategorier och taggar. Du vill göra ändringar i hur taggar matas ut. Så du skapar en fil som heter ”tag.php”, som skulle baseras på archive.php med dina tweaks.

Återigen, var noga med att redigera filerna: de kan bryta din webbplats. Testa alltid på en lokal installation med ett verktyg som DevKinsta och / eller iscensättningswebbplats först.

Vilken av dessa filtyper du behöver redigera, bör du göra det ordentligt. Läs avsnittet nedan om bästa metoder för att ta reda på hur du redigerar din kod på ett sätt som inte kommer att bryta din webbplats och inte kommer att orsaka dig säkerhetshuvudvärk.

Anpassa ett tema från tredje part med ett barns tema

Om det tema du är som körs på din webbplats kommer från en tredje part och du vill redigera koden måste du skapa ett underordnat tema.

Detta beror på att om du redigerar temat direkt och sedan uppdaterar det ( som du borde) kommer du att förlora alla ändringar du gjort.

Att skapa ett underordnat tema består av fyra steg:

1. Skapa en ny mapp i wp-content / teman.
2. Skapa ett formatmall i den mappen, tel l WordPress att detta är ett underordnat tema för ditt befintliga tema.
3. Lägg till kopior av filerna som du vill redigera till underordnat tema och redigera dem där.
4. Aktivera underordnat tema i din webbplats.

WordPress använder alltid en fil från det underordnade temat för att mata ut innehåll såvida det inte finns en fil högre i hierarkin i det överordnade temat. Om det finns två versioner av samma fil använder den den från underordnat tema. Det betyder att din nya fil i underemnet kommer att åsidosätta den från det överordnade temat.

Bästa praxis för anpassning av WordPress-teman

Så du planerar att anpassa ditt tema. Innan du fortsätter och gör ändringarna, följ dessa tips för att säkerställa att du gör det säkert och att du inte kommer att bryta din webbplats, göra den sårbar för attacker eller förlora din kod.

Om möjligt , Anpassa utan att redigera kod

Om du kan göra dina anpassningar via Customizer eller någon annanstans på administratörsskärmarna är det säkrare än att redigera koden.

Redigera bara koden om du vill känner till CSS (för formatmallen) och PHP (för andra temafiler) och du vet hur du gör det säkert.

Använd en lokal utvecklingswebbplats för att göra dina ändringar

Om du redigerar koden i ditt tema eller skapar ett underordnat tema för att göra ändringar bör du göra utvecklingsarbetet på en lokal installation av WordPress med ditt tema installerat och ditt innehåll kopieras från din livewebbplats.

På det här sättet har du en spegel av din livewebbplats för att testa dina ändringar. Att arbeta på en lokal webbplats kommer inte att påverka din livewebbplats och kan gå snabbare.

Även om du använder anpassaren kan det vara bra att använda en lokal version av din webbplats för att testa som du kan publicera dina ändringar och testa dem utan att påverka live-webbplatsen.

När du har testat ändringarna i ditt tema kan du ladda upp den till din live-webbplats eller, ännu bättre, du kan testa den på en staging-webbplats och tryck sedan på den för att leva.

Använd versionskontroll

När du gör ändringar i ditt tema bör du använda versionskontroll för att spåra dina ändringar.

På det enklaste sättet betyder det att du ändrar temans versionsnummer och behåller kopior av båda versionerna. Men om din gong ska göra versionskontroll ordentligt måste du använda en tjänst som GitHub för att spåra dina ändringar.

På det här sättet, om en ändring orsakar problem, kan du enkelt rulla tillbaka den utan att behöva göra manuell redigeringar.

Versionskontroll är ännu mer användbart om du arbetar som en del av ett team, eftersom du kan se vad andra medlemmar gör. Se till att läsa vår git vs Github-guide.

Använd en staging-webbplats för att testa dina ändringar

Om du har tillgång till en staging-webbplats (som Kinstas gratis staging som kommer med alla planer), att testa detta innan du aktiverar den nya versionen av ditt tema (eller det nya underordnade temat) på din livewebbplats är det säkraste sättet att gå vidare.

Detta beror på att varje lokal webbplats kommer att ha vissa skillnader från din live-webbplats: den är på en annan server (en skapad på din lokala maskin), kan den köra en annan version av PHP eller något av de andra verktygen som kör din webbplats.

Gör en kopia av din livewebbplats på din iscenserver och ladda sedan upp och aktivera din nya tema. Testa din webbplats noggrant för att vara säker på att allt fungerar, och sedan kan du trycka på dina ändringar på din livewebbplats.

Gör ditt tema lyhört

Eventuella ändringar du behöver göra i ditt tema bör arbeta både på mobilen och på skrivbordet.

Med fler och fler som går åt internet via mobiltelefon och Mobile-first-indexet från Google är det nog viktigare nu för ditt tema att arbeta på mobilen än det gör på skrivbordet. Så alla ändringar du gör i ditt tema måste vara mobilvänliga eller helst mobila först där det är relevant.

Detta gäller främst alla ändringar du gör i din styling eller layout: kontrollera att den nya layouten fungerar på mobilen och att du har lagt till mediefrågor så att layouten anpassas till olika skärmstorlekar.

Om ditt tema inte är lyhört påverkar det din sökmotorrankning och omvandlingsfrekvens negativt.

Om du inte har tillgång till många olika mobila enheter att testa kan du använda ett verktyg som BrowserStack för att se hur din webbplats ser ut på olika enheter. Du kan också använda utvecklarverktygen i din webbläsare och de responsiva vyerna i Customizer.

Se till att dina anpassningar inte påverkar tillgängligheten

Ändringar i ditt tema måste också vara tillgängliga för användare med funktionshinder eller sensoriska funktionsnedsättningar .

Det handlar inte bara om att din webbplats fungerar på skärmläsare: andra överväganden som färgscheman och teckensnittsstorlekar är viktiga för ett stort antal personer.

Om ändringarna du gör till ditt tema är att göra färgerna ljusare eller texten mindre, tänk igen: det kan göra det svårt för människor att läsa eller interagera med din webbplats.

Innan du gör några ändringar live, använd en tillgänglighetschecker för att testa din webbplats och se till att den inte exkluderar människor.

Håll dig till WordPress-kodningsstandarderna

Om du redigerar koden i ditt tema eller skapar en chi ld-tema, måste du se till att din kod är i linje med WordPress-kodningsstandarderna.

Dessa standarder finns för att säkerställa enhetlig och kvalitativ kod och för att undvika kod som är en röra. Det finns standarder för PHP, CSS och JavaScript, så ta dig tid att kontrollera de som är relevanta för dig och se till att du följer dem.

Om ditt befintliga WordPress-tema är välkodat och du skriver några nya kod på ett sätt som överensstämmer med det, är du på väg att se till att din kod är kompatibel. Se till att du lägger till kommentarer till alla ändringar du gör i temat så att du eller andra vet vad du gjorde när du kommer tillbaka till arbetet med koden i framtiden.Du kanske tror att du inte kommer att glömma men efter några månader har det gått förvånansvärt lätt att glömma varför du redigerade en kodrad.

Behöver du anpassa ditt #WordPress-tema för att göra det unikt? Det finns många alternativ! Välj rätt för dig i vår fördjupade guide! 👚👔Klicka för att Tweeta

Sammanfattning

Att anpassa ditt WordPress-tema är inte så svårt. Ibland är det enkelt att använda Customizer för att göra ändringar i teckensnitt eller färger (se till att läsa vår fördjupade guide om WordPress-teckensnitt). Andra gånger måste du skapa ett nytt underordnat tema för att lägga till en ny mallfil till ett tema.

Alternativen du har för att anpassa ditt tema inkluderar att använda ett plugin eller Customizer, redigera WordPress-temakoden direkt , eller skapa ett underordnat tema.

Identifiera rätt alternativ för dig och gör dina anpassningar säkert, allt utan att bryta din webbplats.