Om du har installerat ett WordPress-tema men det inte känns helt rätt för dig, kan du känna dig frustrerad. Det finns gott om alternativ tillgängliga för att anpassa ditt WordPresstema.
Utmaningen är att hitta rätt sätt att göra det.
I det här inlägget ska jag styra dig genom alternativen för att anpassa ditt WordPress-tema, hjälpa till att avgöra vilket 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å videoversionen?
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å vilka alternativen är, eftersom de passar olika situationer.
Här är en översikt över de alternativ som är tillgängliga för dig:
- Om du vill lägga till funktionalitet till ditt tema, installera ett plugin.
- Använd Customizer i dina WordPress-adminskärmar för att anpassa typsnitt, färger och kanske layout också, beroende på ditt tema.
- Om du arbetar med ett sidbyggartema, använd dess funktioner för att anpassa utformningen av din webbplats.
- Om du har installerat ett ramtema, använd ett av de tillgängliga barnteman för att anpassa din webbplats, tillsammans med eventuella anpassningsalternativ via adminskärmarna.
- Om ditt tema är specifikt för din webbplats och du är bekväm att göra det, redigera temats kod direkt.
- Om du vill redigera koden för ett tema från tredje part skapar du ett barntema.
Om du vill redigera koden har du ett antal alternativ tillgängliga för dig, från att använda blockredigeraren till Customizern, ända fram till att redigera filerna. Vi tittar 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 faktiskt anpassa ditt tema?
Ibland behöver du inte anpassa ditt tema alls: istället måste du installera ett plugin.
Teman dikterar utformningen av din webbplats: hur det ser ut och hur det visar innehåll (använd vårt temadetektorverktyg för att identifiera det underliggande temat för en design som du gillar). 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. Detta kan vara ett plugin du behöver skriva, ett du laddar ner från pluginkatalogen, eller ett du köper.
Om du vill 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, borde koden stå i ett plugin, inte ditt tema.
Bra exempel på vad du skulle använda ett plugin i stället för ett tema för, inkluderar att lägga till widgets, registrera anpassade inläggstyper och taxonomier, skapa egna fält och lägga till extra funktioner som en butik eller SEO-förbättringar.
Anpassa ditt WordPresstema via WordPress-adminskärmarna
Om de ändringar du vill göra är designfokuserade och relativt enkla, kanske du kan göra dem via adminskärmarna. Customizer ger dig en mängd olika alternativ för att finjustera ditt tema: vad som är tillgängligt för dig beror på ditt tema. Och du kan se något som heter Redigerare i menyn Utseende. Håll dig borta från detta, av skäl jag ska beskriva inom kort.
Anpassa ditt tema via Customizer
Det enklaste sättet att anpassa ditt WordPresstema är att använda WordPress Customizer.
Du kommer åt 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.
- Klicka på Utseende > Anpassa på administratörsskärmarna.
Detta tar dig till Customizer.
I skärmdumpen ovan har jag installerat ett gratis tema som heter ColorMag som har många anpassningsalternativ. Det lägger till sektioner till Customizer för designfunktioner, inklusive en headerbild, sociala medier, kategorifärger och fliken Designalternativ som tar dig till ännu fler flikar där du kan göra ändringar i layouten och designen av 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 det inte är helt rätt för dig, kanske du tycker att anpassa det ger dig exakt den design och layout du behöver.
Temaredigeraren (och varför du inte ska använda den)
På dina administratörsskärmar kan du märka ett alternativ som heter Temaredigeraren, som du kommer åt via Utseende > Temaredigerare.
Detta ger dig tillgång till filerna i ditt tema, vilket innebär att du kan redigera dem direkt.
Gör inte det.
Även om du är bekväm med att skriva CSS eller PHP, är att redigera filerna i ditt tema så här en mycket dålig idé, av två skäl:
- Om du har köpt eller hämtat ett tema från tredje part kommer eventuella ändringar du gör att gå förlorade 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 förändring som bryter din webbplats, kommer det inte 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 hjälp av en kodredigerare (kolla in de bästa gratis HTML-redigerarna), och du bör inte redigera filerna i din livewebbplats förrän du har testat den på en staging-webbplats. Om du behöver redigera ett tema från tredje part, bör du göra det via ett barntema. 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 även en varning när du försöker komma åt den.
Så ta WordPress råd: Använd inte temaredigeraren!
Använd Sidbyggare och Ramverk för att anpassa ditt WordPresstema
En stor andel av WordPress-teman har anpassningsmöjligheter, vilket innebär att du kan göra ändringar i design och layout via Customizer.
Men vissa teman tar detta vidare och är utformade för att förlängas och anpassas avsevärt. 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änd en sidbyggare för att anpassa ditt tema
Sidbyggarplugins är utformade för att göra det enkelt för dig att designa din webbplats, med hjälp av ett gränssnitt som låter dig se vad du får.
Du installerar ett sidbyggarplugin med ett kompatibelt tema, och använder sedan de alternativ som det ger dig att designa 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 jämförelse 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 få varje sida att se unik ut.
Nedan använder jag Elementor sidbyggaren med Hello Elementor-temat, som är kompatibelt med det.
Sidbyggare ger dig massor av flexibilitet med layout och design av dina sidor. Om du är van vid en webbplatsbyggare som Wix, kan de hjälpa till att 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.
Använd ett temaramverk för att anpassa ditt tema
Ett alternativ till sidbyggare är temaramverk. Dessa är sviter av teman som är utformade för att fungera tillsammans. Det finns ett föräldertema, eller överordnat tema, som är ramen, och ett urval av barnteman som du kan använda för att anpassa huvudtemat och få det att se ut som du vill.
Ett exempel på ett temaramverk är Divi, som har anpassningsmöjligheter som låter dig justera utformningen av ditt barntema ännu mer, inklusive ett dra och släpp-gränssnitt som liknar de som finns i sidbyggare.
Rekommenderad läsning: Divi vs Elementor: Jämförelse av WordPress sidbyggar-plugins
Redigera ditt WordPresstemas 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 den största graden av kontroll.
Om du redigerar ditt eget tema, vilket är specifikt för din webbplats och utvecklades speciellt för det, kan du göra ändringar i temat direkt. Men om du arbetar med ett tredjepartstema och vill redigera det, bör du skapa ett barntema 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 behöver redigera.
Stilmallen
Varje WordPresstema har en stilmall, kallad styles.css. Den innehåller all kod för att styla din webbplats: layout, typsnitt, färger och mycket mer.
Om du vill ändra färgerna i ditt tema, till exempel, skulle du göra ändringar i stilmallen. Om du vill lägga till ett nytt typsnitt, skulle du använda stilmallen för att tillämpa det på olika element såsom text och rubriker.
Var uppmärksam när du redigerar stilmallen: specificitet innebär att koden för ett element inte alltid kommer från var du tror att den ska. Element kommer att ärva styling från andra element som ligger ovanför dem i hierarkin på sidan om du inte lägger till styling som är specifik för det nedre elementet.
För att upptäcka vilken CSS som påverkar vilka element på sidan kan du använda inspektören i din webbläsare för att visa CSS (Chrome DevTools i det här exemplet):
Du kan sedan använda detta för att skriva ny CSS som riktar in sig på enskilda element eller en rad element eller klasser på sidan.
Om allt detta tal om element, klasser och specificitet är nytt för dig, kanske du vill undvika att direkt redigera ditt temas CSS. Åtminstone tills du har lärt dig mer om CSS och hur det fungerar.
Funktionsfilen
En annan fil som i princip varje tema kommer att ha är funktionsfilen (functions.php). Det här är filen som gör att en massa saker fungerar i ditt tema. I den kan du hitta kod för att registrera temafunktioner som utvalda bilder, widgets och mer.
Om du är frestad att lägga till funktionskod till ditt tema, är det här du lägger till det. Men se upp: i de flesta fall borde du verkligen skriva ett plugin. Fråga dig själv:
Skulle jag vilja behålla den här funktionen om jag bytte teman 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 ett bara för ett par rader kod.
Funktionsfilen är helt skriven i PHP, så du måste vara bekant med det. Kopiera inte blint koden du hittar via en Google-sökning: ta dig tid att räkna ut vad den koden gör och förstå den. På så sätt är det mindre risk att du lägger till kod som inte är så bra som den borde vara.
Temats mallfiler
De flesta av filerna i ett tema är temats mallfiler. Det här är filer som bestämmer vilket innehåll WordPress visar på en viss sida och väljs enligt mallhierarkin.
Om du vill ändra hur innehållet visas på en viss inläggstyp, sida eller arkiv, måste du antingen redigera en av dessa filer eller skapa en ny.
Säg till exempel att ditt tema har an archive.php-fil som används för att mata ut arkivsidor för kategorier och taggar. Du vill göra ändringar i hur taggarna visas. Så du skapar en fil som heter ”tag.php”, som skulle baseras på archive.php med dina finjusteringar.
Återigen, var försiktig med att redigera filerna: de kan bryta din webbplats. Testa alltid en lokal installation med ett verktyg som DevKinsta och/eller iscensättningswebbplatsen först.
Oavsett vilken av dessa filtyper du behöver redigera, bör du göra det på rätt sätt. Läs avsnittet nedan om bästa praxis 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 säkerhetshuvudvärk.
Anpassa ett tema från tredje part med ett barntema
Om temat du kör på din webbplats är från tredje part och du vill redigera koden måste du skapa ett underordnat tema, eller barntema.
Detta beror på att om du redigerar temat direkt och sedan uppdaterar det (vilket du borde göra), förlorar du alla ändringar du gjort.
Att skapa ett barntema består av fyra steg:
- Skapa en ny mapp i wp-content/themes.
- I den mappen skapar du en stilmall. I den stilmallen, tala om för WordPress att detta är ett barntema till ditt befintliga tema.
- Lägg till kopior av de filer du vill redigera till barntemat och redigera dem där.
- Aktivera barntemat på din webbplats.
WordPress kommer alltid att använda en fil från barntemat för att mata ut innehåll om det inte finns en fil högre upp i hierarkin i det överordnade temat. Om det finns två versioner av samma fil, kommer det att använda en från barntemat. Det betyder att din nya fil i barntemat kommer att åsidosätta den från det överordnade temat.
Bästa praxis för att anpassa WordPressteman
Så du planerar att anpassa ditt tema. Innan du går vidare och gör ändringarna, följ dessa tips för att säkerställa att du gör det på ett säkert sätt 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å adminskärmarna är det säkrare än att redigera koden.
Redigera bara koden om du är bekant med CSS (för stilmallen) och PHP (för andra temafiler) och om du vet hur man gör det på ett säkert sätt.
Använd en lokal utvecklingsplats för att göra dina ändringar
Om du redigerar koden i ditt tema eller skapar ett barntema 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 kopierat från din live-webbplats.
På så sätt har du en spegel av din livewebbplats för att testa dina ändringar på. Att jobba på en lokal webbplats kommer inte att ha någon effekt på din livewebbplats och kan vara snabbare.
Även om du använder Customizer, kan det vara bra att använda en lokal version av din webbplats för testning som du kan publicera dina ändringar och testa dem utan att påverka livewebbplatsen.
När du har testat ändringarna i ditt tema kan du ladda upp den till din livewebbplats eller, ännu bättre, testa den på en stagingsajt och sedan ta den live.
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.
I sin enklaste förklaring innebär detta att ändra versionsnumret på temat och behålla kopior av båda versionerna. Men om du ska göra versionskontroll korrekt, måste du använda en tjänst som GitHub för att spåra dina ändringar.
På så sätt, om en förändring orsakar problem, kan du enkelt rulla tillbaka den utan att behöva göra manuella ändringar.
Versionskontroll är ännu mer hjälpsamt om du arbetar som en del av ett team, eftersom du kommer att kunna se vad andra medlemmar gör. Se till att du läser vår git vs Github-guide.
Använd en Stagingsajt för att testa dina ändringar
Om du har tillgång till en stagingsajt (som Kinstas gratis staging som kommer med alla planer), är testning på denna innan du aktiverar den nya versionen av ditt tema (eller det nya barntemat) på din livewebbplats det säkraste sättet att gå vidare.
Detta beror på att en lokal webbplats kommer att ha vissa skillnader från din live-webbplats: den är på en annorlunda server (en som är skapad på din lokala maskin), den kan 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 stagingserver och ladda sedan upp och aktivera ditt nya tema. Testa din webbplats noggrant för att vara säker på att allt fungerar, och sedan kan du för över dina ändringar till din livewebbplats.
Gör ditt tema responsivt
Eventuella ändringar du behöver göra till ditt tema bör fungera på både mobil och dator.
Med fler och fler människor som har tillgång till internet via mobiltelefon, och Mobile-first index från Google, är det förmodligen nu viktigare att ditt tema fungerar på mobilen än det gör på dator. Så eventuella ändringar du gör till ditt tema måste vara mobilvänliga eller helst mobile-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 medieförfrågningar så att layouten anpassar sig till olika skärmstorlekar.
Om ditt tema inte är responsivt, kommer det att påverka din sökmotorranking och konverteringsfrekvenser negativt.
Om du inte har tillgång till massor av olika mobila enheter att testa på, 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 visningarna i Customizer.
Se till att dina anpassningar inte påverkar tillgängligheten
Eventuella ä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 se till att din webbplats fungerar på skärmläsare: andra överväganden som färgscheman och teckenstorlekar är viktiga för ett stort antal människor.
Om de ändringar du gör till ditt tema är att göra färgerna ljusare eller texten mindre, tänk om: detta kan göra det svårt för människor att läsa eller interagera med din webbplats.
Innan du tar några ändringar live, använd en tillgänglighetskontroll för att testa din webbplats och se till att den inte exkluderar personer.
Håll dig till WordPress kodningsstandarder
Om du redigerar koden i ditt tema eller skapar ett barntema, måste du se till att din kod följer WordPress kodningsstandarder.
Dessa standarder finns för att säkerställa konsekvent och kvalitet på koden och för att undvika kod som är en enda röra. Det finns standarder för PHP, CSS och JavaScript så ta dig lite tid att kolla de som är relevanta för dig och se till att du följer dem.
Om ditt befintliga WordPress-tema är väl kodat och du skriver ny kod på ett sätt som överensstämmer med det, är du på god väg att se till att din kod är kompatibel. Se till att du lägger till kommentarer till eventuella ändringar du gör till temat så att du eller andra vet vad du gjorde när du går tillbaka för att arbeta med koden i framtiden. Du kanske tror att du inte kommer att glömma men efter några månader är det förvånansvärt lätt att glömma varför du redigerade en rad kod.
Sammanfattning
Att anpassa ditt WordPresstema är inte så svårt. Ibland är det smidigt att använda Anpassaren för att göra ändringar i teckensnitt, färger eller din favicon (se till att läsa vår djupgående guide om WordPress-teckensnitt). Andra gånger måste du skapa ett nytt barntema för att lägga till en ny mallfil till ett tema.
De alternativ du har för att anpassa ditt tema inkluderar att använda ett plugin eller Customizer, redigera WordPresstemats kod direkt, eller skapa ett barntema.
Identifiera rätt alternativ för dig och gör dina anpassningar säkert, helt utan att bryta din webbplats.
Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.
Lämna ett svar