Vill du skapa ett anpassat WordPress-tema från grunden?
Tidigare var du tvungen att följa komplicerade WordPress-handledningar och ha goda kodkunskaper för att bygga ett anpassat WordPress-tema. Men tack vare nya WordPress-temabyggare kan du nu enkelt skapa ett utan att lära dig några programmeringsfärdigheter.
I den här artikeln visar vi hur du enkelt skapar ett anpassat WordPress-tema utan att skriva någon kod.
Här är listan över ämnen vi kommer att täcka i den här artikeln.
- Skapa ett anpassat WordPress-tema för nybörjare
- Skapa ett anpassat tema med SeedProd Theme Builder
- Redigera ett tema med SeedProd Theme Builder
- Ändra webbplatsomfattande design för ditt tema
- Tillämpa och publicera ditt anpassade WordPress-tema
- Skapa andra layouter för ditt anpassade WordPress-tema
Redo? Låt oss börja.
Videohandledning
Om du föredrar skriftliga instruktioner, fortsätt bara att läsa.
Skapa ett anpassat WordPress-tema för nybörjare
En WordPress-webbplats använder ett tema för webbplatsens layout och design. Dessa teman består av mallfiler skrivna i PHP, HTML, CSS och JavaScript.
Vanligtvis skulle du behöva ha en god förståelse för alla dessa webbdesignspråk eller anlita en webbutvecklare för att skapa ett anpassat WordPress-tema.
Om du anlitade en utvecklare eller byrå, kan kostnaden för ett anpassat WordPress-tema uppgå till tusentals dollar.
Eftersom många småföretagare inte hade råd med de höga kostnaderna för ett anpassat WordPress-tema, nöjde sig många av dem bara med standardteman. De som inte ville nöja sig använde antingen en WordPress-sidbyggare eller ett temaramverk för att bygga ett anpassat tema.
Medan WordPress tema-ramverk gjorde det enklare att bygga ett WordPress-tema, är de en lösning för utvecklare, inte en genomsnittlig webbplatsägare.
Å andra sidan gjorde WordPress-plugins för sidbyggare det superenkelt att skapa anpassade sidlayouter med ett dra-och-släpp-gränssnitt, men de var begränsade till endast layouter för enstaka sidor. Du kunde inte bygga anpassade teman med dem.
Det är här SeedProd kommer in.
Det är det bästa pluginet för att bygga WordPress-teman som låter dig enkelt skapa ett anpassat WordPress-tema utan att skriva någon kod.
SeedProd är en dra-och-släpp WordPress-sidbyggare för företag, bloggare och webbplatsägare. Den levereras också nu med en ny anpassad temadesigner som låter dig bara peka och klicka för att redigera vilket element som helst.
Du kan också lägga till vanliga designelement i ditt tema med dra och släpp.
Det bästa med SeedProd tema-byggare är att den är tema-agnostisk. Det betyder att den inte förlitar sig på ditt befintliga WordPress-tema för stil eller funktionalitet, vilket ger dig fullständig frihet och kontroll över din webbplatsdesign.
Om du letar efter ett alternativ kan du också enkelt skapa ett anpassat WordPress-tema med pluginet Thrive Theme Builder.
Med det sagt, låt oss titta på hur du skapar ditt anpassade WordPress-tema utan att skriva någon kod med SeedProd.
Skapa ett anpassat tema med SeedProd Theme Builder
Att konfigurera SeedProd tema-byggaren är ganska enkelt, eftersom det fungerar med alla WordPress-webbplatser som använder vilket tema som helst.
Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Notera: Du behöver minst Pro- eller Elite-planen för att låsa upp temabyggaren.
Efter aktivering, gå till sidan SeedProd » Inställningar för att ange din plugin-licensnyckel. Du hittar denna information under ditt konto på SeedProd-webbplatsen.
Efter att ha angett din licensnyckel är du nu redo att skapa ditt anpassade WordPress-tema med SeedProd-temabyggaren.
Att skapa ditt eget anpassade WordPress-tema med SeedProd är ganska enkelt.
Först måste du gå till sidan SeedProd » Theme Builder. Här ser du listan över mallar för ditt nuvarande SeedProd anpassade tema. Eftersom vi inte har börjat än, har vi bara en Global CSS-mall. Vi visar dig hur du använder detta senare i handledningen.
För att komma igång har du två alternativ.
- Använd ett av de färdiga SeedProd-teman som utgångspunkt
- Skapa temamallar manuellt från grunden
Låt oss titta på hur dessa alternativ fungerar.
1. Börja med ett färdigt tema (rekommenderas)
Vi rekommenderar att du börjar med ett befintligt tema. Detta gör att SeedProd automatiskt kan generera alla mallfiler. Dessa är kompletta professionellt designade teman, vilket ger dig en bra start för att redigera mallarna efter dina egna krav.
Klicka helt enkelt på knappen Teman och välj ett av de tillgängliga temana. Det finns olika teman för olika typer av webbplatser, så du kan välja ett som bäst passar dina behov.
Oroa dig inte för mycket om design och layout just nu. Alla dessa teman är helt redigerbara, så du kan ändra varje aspekt av det inuti temabyggaren.
När du har valt ett tema kommer SeedProd att generera alla temamallar.
Detta är utkastversionen av ditt anpassade WordPress-tema.
Senare i den här handledningen visar vi hur du redigerar dessa temafiler för att designa ditt tema och sedan publicera ditt tema för att tillämpa det på din webbplats.
2. Skapa manuellt temamallar från grunden
Alternativt kan du starta ditt tema från grunden genom att klicka på knappen 'Lägg till ny temamall'. Du måste ge din mall ett namn och sedan välja en av malltyperna för att komma igång.
För närvarande har du möjlighet att välja mellan följande malltyper:
- Sidhuvud
- Sidfot
- Enskilt inlägg
- Enkel sida
- Arkiv
- Sökresultat
- Global Del
- Anpassad sida
Du kan också ställa in villkor för att använda en mall. Till exempel kan du tillämpa den på hela webbplatsen eller en specifik del av din webbplats.
När du sparar mallen öppnar SeedProd den i temabyggaren där du kan börja redigera den.
Redigera ett tema med SeedProd Theme Builder
När du har genererat dina temamallar kan du redigera dem med SeedProd Theme Builder.
Klicka helt enkelt på länken Redigera design under en mallfil för att redigera den.
Detta startar mallfilen i SeedProd tema-byggare.
Du kommer att se en liveförhandsgranskning av mallen i den högra kolumnen med en redigeringspanel i den vänstra kolumnen.
För att ändra ett objekt i din mallfil kan du helt enkelt peka och klicka för att redigera det.
Beroende på objekttyp ser du olika redigeringsalternativ i den vänstra kolumnen. Du kan ändra teckensnitt, färger, bakgrund, avstånd och mer.
För att lägga till nya element kan du lägga till SeedProd-block från vänster kolumn. Den levereras med en mängd blocktyper som du kan lägga till i din mall.
1. Mall-taggblock
Mall-taggblock är de dynamiska block som låter dig generera temaelement i farten från din WordPress-databas.
Du kan till exempel använda blocket Inlägg för att lista dina senaste inlägg eller blocket Innehåll för att visa innehållet i det inlägg eller den sida som för närvarande visas.
2. Standardblock
Därefter har du dina standardblock för att lägga till vanliga webbdesignelement i ditt temas mall.
Du kan använda dem för att lägga till text, media, knappar, kolumner, avdelare och mer.
3. Andra block
Andra avancerade block låter dig lägga till kontaktformulär, sociala profiler, delningsknappar, WordPress-kortkoder, Google Maps, prislistor, nedräkningstimer och mer.
SeedProd kommer också med fullständig WooCommerce-integration.
Om du driver en onlinebutik, kan du använda WooCommerce-block i ditt tema.
Du kan skapa helt anpassade WooCommerce-mallar med en anpassad kundvagnssida och kassaflöde.
Använda sektioner för snabba temalayouts
Förutom block kan du också lägga till kompletta sektioner i din tema-mall.
Byt helt enkelt till fliken Sektioner under Designpanelen.
Sektioner är grupper av block för olika områden av webbdesign. Till exempel hittar du färdiga sektioner för din header, footer, call to action, funktioner och mer.
Klicka helt enkelt på en sektion för att lägga till den i din temamall och redigera den sedan efter dina egna behov.
Använda AI-webbplatsbyggaren för att omedelbart generera innehåll
SeedProd erbjuder också en kraftfull AI Website Builder som automatiskt skapar skrivet innehåll för din temamall. Du kan omedelbart generera engagerande rubriker, beskrivningar, uppmaningar till handling, brödtext och mer.
Klicka bara på en rubrik eller textblock från SeedProd-byggaren för att öppna inställningspanelen på vänster sida. Klicka sedan på knappen ‘Generera AI-text’.
Skriv sedan en prompt i textfältet, vilket i princip är en beskrivning av vad du vill att AI-assistenten ska skriva åt dig. Eller så kan du välja en föreslagen prompt från listan.
Därefter klickar du på knappen 'Generera text'.
På bara några sekunder kommer SeedProd automatiskt att skapa innehållet åt dig. Därifrån kan du optimera texten, ändra tonen och till och med översätta texten till över 50 språk.
När du är nöjd med innehållet klickar du på knappen 'Infoga' för att lägga till det i din temamall.
Du kan också använda AI Website Builders DALL-E-integration för att automatiskt generera originella bilder för ditt tema.
Dra bara ett Bild-block till din sida och klicka på det för att öppna inställningspanelen. Klicka sedan på knappen 'Lägg till med AI'.
Skriv sedan en beskrivning av bilden du vill skapa och klicka på knappen 'Generera bild'.
När bilden har genererats kommer SeedProd att visa den. För att lägga till bilden i din temamall klickar du på knappen 'Infoga'.
Du kan också redigera bilden med AI, samt generera variationer av bilden, så att den matchar den exakta vision du hade i åtanke.
Spara och publicera din mall
När du är nöjd med designen kan du helt enkelt klicka på knappen Spara och välja Publicera för att spara din mall.
Upprepa processen för att redigera andra mallfiler med ditt eget innehåll och designbehov.
Ändra webbplatsomfattande design för ditt tema
När du redigerar dina temamallar vill du se till att din design är konsekvent över hela din webbplats.
Till exempel skulle du troligen vilja använda samma typografistil, textstorlekar, färger och andra visuella stilar på varje sida.
I traditionella WordPress-teman var du tvungen att göra det manuellt genom att redigera komplexa CSS-filer. Denna process krävde att man använde webbläsarens Inspektera-verktyg, hittade CSS-klasser, lärde sig kod och mer.
SeedProd gör detta också mycket enkelt.
Istället för att skriva CSS-kod kan du helt enkelt redigera mallen för global CSS.
Den globala CSS-mallen låter dig förhandsgranska vanliga webbplatselement, och sedan kan du bara peka och klicka på dem för att redigera deras egenskaper.
Tillämpa och publicera ditt anpassade WordPress-tema
När du är nöjd med ditt anpassade WordPress-tema är det sista steget att aktivera det på din WordPress-webbplats.
SeedProd låter dig tillämpa ditt anpassade WordPress-tema med en enkel växling.
Gå helt enkelt till sidan SeedProd » Tema-byggare och växla omkopplaren bredvid alternativet 'Aktivera SeedProd-tema' till 'Ja'.
SeedProd kommer nu att ersätta det befintliga WordPress-temat med det anpassade WordPress-tema som du har skapat.
Du kan nu besöka din webbplats för att se ditt anpassade WordPress-tema i aktion.
Skapa andra layouter för ditt anpassade WordPress-tema
Nu när du har skapat ditt anpassade WordPress-tema har du möjlighet att utöka dess funktionalitet och skapa fler designer och layouter baserade på ditt tema.
SeedProd gör det extremt enkelt.
Du kan fortfarande finjustera ditt anpassade WordPress-tema och skapa flera mallar för olika delar av din webbplats.
Till exempel kanske du vill lägga till en ny rubrikmall i ditt tema som bara visas för specifika kategorier.
På samma sätt kanske du vill skapa en mall för specifika sidor eller inlägg.
Du kan lägga till det i ditt tema också.
Vad sägs om att skapa anpassade landningssidor?
SeedProd har även det täckt.
Du kan helt enkelt gå till SeedProd » Landningssidor och klicka på knappen Lägg till ny landningssida för att skapa en.
För mer information, se vår handledning om hur man skapar en landningssida med WordPress.
Genom att använda SeedProds nybörjarvänliga dra-och-släpp-temabyggare kan du enkelt skapa vilken typ av anpassad layout du behöver.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett anpassat WordPress-tema utan att behöva lära dig koda. Du kanske också vill se vår guide om hur du snabbar upp din WordPress-webbplats för bättre SEO och användarupplevelse, eller våra val av de bästa analyslösningarna för WordPress.
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.
Mrteesurez
Det här är fantastiskt, vilket fantastiskt verktyg från ett fantastiskt team. Seedprod är verkligen kraftfullt för att skapa ett WordPress-tema utan kodning eller att behöva hantera teknisk jargong, det har till och med startmallar för teman att börja med.
Men är det möjligt att jag installerar temat eller använder det på en annan WordPress-sida?
WPBeginner Support
Du kan exportera dina temafiler för att använda på en annan webbplats med SeedProd.
Admin
Mrteesurez
Kul att höra att jag kan exportera min temafil och använda den någon annanstans, tack för att du tog dig tid att svara. Det betyder att jag behöver ha Seedprod installerat på webbplatsen där jag tänker använda temat.
Jiří Vaněk
Det är en bra idé, Mrteesurez, som faktiskt aldrig slog mig, och jag är glad att WPBeginner-teamet bekräftade att det är möjligt. Jag har också SeedProd, och jag är intresserad av den här idén. Finns det en guide för detta någonstans, eller planerar du att skapa en?
Ayanda Temitayo
Wow, hela tiden har jag trott att det bara är riktigt bra PHP-programmerare som kan bygga WordPress-teman. Jag hade aldrig trott att man kunde bygga ett tema med ett annat WordPress-plugin. Detta är en stor utveckling för WordPress och tack till WordPress och dess entusiastiska utvecklarcommunity för att de gör det fantastiskt för varje dag som går.
SeedProd är så kraftfullt. Jag lär mig dess funktioner och jag kommer också att försöka implementera det.
Fantastisk artikel
WPBeginner Support
Thank you and glad we could share how to make a theme without the requirement of coding knowledge
Admin
Mrteesurez
Jag kände likadant från början! Det är otroligt hur WordPress har utvecklats och gjort temaskapande tillgängligt för fler människor utan att behöva vara en kodningsexpert. SeedProd är verkligen en "game-changer" med sin dra-och-släpp-byggare och färdiga mallar. Det hjälper till att snabbt skapa anpassade teman, vilket skulle ha tagit mycket längre tid om man var tvungen att koda allt från grunden. Framåt ser jag fram emot möjligheterna att integrera AI-drivna designverktyg i WordPress. Det är fantastiskt hur plattformen fortsätter att innovera och göra den enklare och kraftfullare för användare på alla nivåer.
Moinuddin Waheed
Hittills har det surrats på WordPress-marknaden om sidbyggande och här kommer mer utveckling i form av anpassad temautveckling även utan någon kodkunskap.
Tack WordPress och dess entusiastiska utvecklarcommunity som gör det fantastiskt för varje dag som går.
SeedProd är så kraftfullt. Jag lär mig dess funktioner och implementerar dem på mina webbplatser.
Satish
Hur designade wpbeginner sin hemsida?
WPBeginner Support
We created a theme for ourselves
Admin
Fahad
Kan vi sälja dessa teman?
WPBeginner Support
Du skulle vilja koda ett tema manuellt istället för att använda denna metod om du ville sälja ett tema.
Admin
Flox
Tack för inlägget. Det är verkligen till hjälp för mig att skapa en webbplats. Tack...
WPBeginner Support
You’re welcome, glad our article was helpful
Admin
Hosli
Hej team,
Kan jag skapa en landningssida med detta?
WPBeginner Support
Även om du inte behöver Beaver Themer för tillfället, kan du använda Beaver Builder för att skapa en landningssida.
Admin
Irene
Tack för handledningen. Snabb fråga: kan jag också lägga till mina sidofält igen efter att ha byggt ett nytt anpassat tema med Beaver. Om så är fallet, hur kan jag göra det, snälla.
WPBeginner Support
Du skulle behöva gå tillbaka till anpassaren för att lägga till sidofältet igen
Admin
Louise Findlay
Vilka är fördelarna med att använda Beaver Themer jämfört med bara Beaver Builder?
WPBeginner Support
Det skiljer sig beroende på vad det redigerar, Beaver Builder är för att redigera innehållsområdet medan Beaver Themer är för platser utanför innehållsområdet
Admin
Kathy Smith
När jag har skapat ett tema, kan jag använda det för andra webbplatser utan att behöva Beaver Builder?
WPBeginner Support
För tillfället skulle det kräva Beaver Builder för att även fungera på andra webbplatser.
Admin
Athena
Lite av en nybörjarfråga..vad händer med allt mitt befintliga innehåll som sidor och widgets (använder för närvarande Asta-temat) etc. medan jag gör detta, eller bygger jag först en separat webbplats inuti WordPress och om så är fallet, hur överför jag den sedan?
Tack
WPBeginner Support
Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas
Admin
Vince
Har inte provat Beaver Builder, men fungerar det som Divi? Är de lika? Om det är det, så skulle jag säga att hittills, oavsett vilken typ av tema, har jag inte hittat ett tema som ger 0% kodning.
Ja, det är möjligt att bygga en sida eller ett tema med 0 % kodning. MEN, normalt finns det funktioner som ett tema inte har men som kunden skulle kräva för sin webbplats och därför skulle behöva kodas.
WPBeginner Support
If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works
Admin
Sayed Ezhar
Bra grejer! Vi ska prova detta. Tack.
WPBeginner Support
You’re welcome
Admin
Zulqar
Hej,
Jag är nybörjare och ett fan av WP Beginner-webbplatsen. Jag kan ingen kod, så det här inlägget är en ögonöppnare för mig!
En snabb fråga – jag har försökt att förstå Generate Press. Det verkar för mig som att jag behöver lära mig lite kodning för att leka med layouten eller skapa knappar. Har du några råd till mig?
Tack för att du hjälper WP Beginner-communityt!
Mvh.
WPBeginner Support
Om du går till Generate Press webbplats har de en dokumentationssida som hjälper dig som utgångspunkt för deras plugin.
Admin
kat
för närvarande använder jag Adobe Muse för att bygga flera klientwebbplatser, eftersom det är snabbt och enkelt, och wysiwyg.
men, Adobe har lagt ner det. Jag måste konvertera ALLA mina klientwebbplatser till en annan programvara. min hosting har C-panel, så jag kan få wordpress-appen och publicera på domänerna.
låter denna process mig återskapa designerna jag redan har byggt som kunderna vill ha, och hur komplex kan en webbplats bli med detta?
jag spelar i Wordpress, jag ARBETAR inte i WP.
WPBeginner Support
You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs
Admin
Mohamed Hassan
Tack för den bra informationen!
WPBeginner Support
You’re welcome
Admin
Sy
Ännu ett bra inlägg! Tack.
Undrar bara varför WPBeginner alltid verkar undvika Elementor?
Att bygga ett tema med Elementor är mycket likt att bygga det med Beaver Builder, men Elementor är snabbare och du har mycket fler alternativ med styling och element/moduler.
Älskar ditt innehåll!
WPBeginner Support
Att Elementor Pro inte är GPL-kompatibelt är en av de större bekymren med att rekommendera det beroende på användningsfallet för användaren.
Admin
Monique
Fantastisk handledning. Precis vad jag behövde. Tack!
WPBeginner Support
You’re welcome
Admin
Captaiing
Tack, jag ska prova det
WPBeginner Support
We hope our article makes it easier for you
Admin
Muhammad Waqar
Tack för att du lärde mig om detta plugin som är mycket hjälpsamt för mig. Den här webben är mycket hjälpsam för mig. Tack igen
WPBeginner Support
Glad our article could help
Admin
sajid
tack för att du delade, mycket informativt.
WPBeginner Support
You’re welcome
Admin
Louise Findlay
Jag överväger att ta mig an ett projekt där jag migrerar en webbplats från WordPress.com till den självhostade versionen och använder Divi för att renovera den.
Efter att ha läst din artikel om de bästa WordPress-sidbyggarna, vad skulle du rekommendera, Beaver Builder eller Divi?
Med Divi får du en rad teman och plugins från ElegantThemes, men jag har läst negativa recensioner om att teman låser in och är för restriktiva. Har du någon personlig erfarenhet av det?
Med Beaver Builder verkar sidbyggarfunktionaliteten vara perfekt, även om den verkar mer komplex med alla alternativ spridda över flera sidor och du får inga teman eller plugins med prenumerationen.
Redaktionell personal
Båda är utmärkta alternativ, och de finns bland våra topp 5.
Divi Page Builder-pluginet fungerar även med andra teman, så du är inte låst till ElegantThemes. Men som med alla teman, om du byter från ett tema till ett annat, kan du förlora vissa funktioner. Men det är därför du måste se till att det nya temat har en jämförbar funktionsuppsättning.
Så länge du använder Divi Page Builder-pluginet behåller du dra-och-släpp-funktionerna.
Fördelen med Divi är de extra teman/layouter som ElegantThemes erbjuder. Fördelen med Beaver Builder är dock de avancerade anpassningsmöjligheterna.
Admin
Richard Ross
För att inte tala om att Beaver Builder inte använder kortkoder för att fylla innehållsområdena.
Chris Nieass
Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie
Rob Dewing
@Chris Nieass, ja, att inte använda kortkoder är en stor bonus med Beaver. Bara ibland, även i de bästa installationerna, går en sidbyggare som Divi eller Beaver sönder. När Divi går sönder hamnar du med sidinnehåll som ser dödfulllt ut med kortkoder som visas bokstavligen överallt på sidan. Om samma sak skulle hända med Beaver, får du bara ditt innehåll staplat och läsbart i en serie block ner på sidan istället för snygga kolumner.
Divi är för designers som älskar dess lättanvända färgglada gränssnitt och det faktum att alla deras kompisar använder det. Beaver är för personer som bryr sig om hur väl webbplatsen körs, enkelhet i djupare anpassningar etc. etc.