Hur man enkelt skapar ett anpassat WordPress-tema (utan kod)

Vill du skapa ett anpassat WordPress-tema frÄn början?

Tidigare var du tvungen att följa WordPress codex och ha anstÀndig kodningskunskap för att skapa ett anpassat WordPress-tema. Men tack vare nya WordPress-temageneratorer kan vem som helst skapa ett helt anpassat WordPress-tema pÄ en timme (ingen kodningskunskap krÀvs).

I den hÀr artikeln kommer vi att visa dig hur du enkelt kan skapa ett anpassat WordPress-tema utan att skriva nÄgon kod.

Skapa ett anpassat WordPress-tema utan att skriva nÄgon kod

Skapa ett anpassat WordPress-tema för nybörjare

Till skillnad frÄn statiska HTML-webbplatser Àr WordPress-teman en uppsÀttning mallfiler skriven i PHP, HTML, CSS och JavaScript. Vanligtvis skulle du behöva ha en anstÀndig förstÄelse för alla dessa webbdesignsprÄk eller anstÀlla en webbutvecklare för att skapa ett anpassat WordPress-tema.

Om du anlitade en utvecklare eller byrÄ kan kostnaderna för ett anpassat WordPress-tema rÀknas in i tusentals dollar.

Eftersom mÄnga Àgare av smÄföretag inte hade rÄd med de höga kostnaderna för ett anpassat WordPress-tema, nöjde sig mÄnga av dem med standardtema som medföljer WordPress.

De som inte ville bli instÀllda och ville ha anpassningar, anvÀnde en WordPress-drag-and-drop-sidbyggare eller anvÀnde ett temaramverk för att skapa ett anpassat tema.

Medan WordPress-temaramverk gjorde det enkelt att skapa ett WordPress-tema, Àr de en lösning för utvecklare, inte en genomsnittlig webbplatsÀgare.

Å andra sidan gjorde WordPress-sidbyggare-plugins det mycket enkelt att skapa anpassade sidlayouter med ett dra-och-slĂ€pp-grĂ€nssnitt, men de var bara begrĂ€nsade till layouter. Du kan inte skapa anpassade teman med det.

Till och med Beaver Builder, en av de bÀsta WordPress-sidbuilder-pluginsna bestÀmde sig för att lösa detta problem med dess plugin som heter Beaver Themer.

Beaver Builder, den bÀsta WordPress-sidgenerator-plugin

Beaver Themer Àr en plugin för webbplatsbyggnad som lÄter dig skapa anpassade temadesign med ett dra och slÀpp-grÀnssnitt och utan att lÀra dig att koda.

LÄt oss ta en titt pÄ hur du anvÀnder Beaver Themer för att enkelt skapa ett WordPress-tema.

Videohandledning

Prenumerera pÄ WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, lÀs vidare.

Konfigurera Beaver Themer för att skapa ett anpassat tema

Beaver Themer Àr ett extra plugin för Beaver Builder, sÄ du behöver bÄda plugins för den hÀr artikeln.

Först mÄste du installera och aktivera Beaver Builder och Beaver Themer plugins. Mer information finns i vÄr steg-för-steg-guide för hur du installerar ett WordPress-plugin.

Beaver Themer lÄter dig skapa ett anpassat tema, men du behöver fortfarande ett tema för att komma igÄng. Vi rekommenderar att du anvÀnder ett lÀtt tema som innehÄller en sidmall i full bredd för att fungera som ditt starttema.

Du kan hitta mÄnga av dessa teman i temakatalogen WordPress.org. De flesta moderna WordPress-teman innehÄller en mall med full bredd. VÄra bÀsta alternativ Àr:

Astra – Ett gratis och lĂ€tt WordPress-tema för alla Ă€ndamĂ„l som kommer med inbyggt stöd för Beaver Builder.

OeanWP – Ett annat populĂ€rt WordPress-tema med flera funktioner som kommer med helhetsbyggnadssupport.

StudioPress-teman: Alla dina teman Àr Beaver Builder-kompatibla och fungerar bra med Beaver Themer.

För denna tutorial kommer vi att anvÀnda Astra, som Àr ett lÀtt och lÀttanpassat WordPress-tema.

StÀll in ditt tema för Beaver Themer

NÀr du skapar ett anpassat WordPress-tema med Beaver Themer Àr det viktigt att se till att Beaver Themer har tillgÄng till hela sidan (frÄn kant till kant).

Detta Àr Astras standardlayout. Som ni ser innehÄller denna design en sidofÀlt som kan vara svÄr att arbeta med nÀr du anvÀnder Beaver Themer.

Standardtemalayout med en sidofÀlt

Du kan Àndra det genom att besöka adminpanelen pÄ din webbplats och sedan navigera till Utseende »Anpassa sida. HÀrifrÄn bör du byta till Design »SidostÀnger flik.

disable barras lateralt i ditt tema

VÀl dÀr vÀljer du "Ingen sidofÀlt" i standardlayoutalternativet och klickar pÄ knappen Publicera för att spara Àndringarna.

Ditt tema börjar nu anvÀnda en layout utan barras sida. Detta Àr den bÀsta designen att anvÀnda med Beaver Themer.

Tema design utan barras sida

Denna hel-sida-layout gör det möjligt för Beaver Themer att anvÀnda varje tum pÄ skÀrmen, sÄ att du kan skapa en vacker visuell upplevelse frÄn slutet till slut.

De flesta WordPress-teman inkluderar en mallfil för sidor i full bredd. Om du anvÀnder nÄgot annat tema kan du hitta ett alternativ för att ta bort barras sidor i dina temainstÀllningar.

Om du inte hittar det, kontakta din temautvecklare sÄ kan de hjÀlpa dig med det.

NÀr du har konfigurerat ditt tema i en breddlayout Àr du redo att skapa ditt anpassade WordPress-tema med Beaver Themer.

Grunderna för Quick Beaver Themer

Beaver Themer arbetar pÄ Beaver Builder. Som ett tillÀgg till sidbyggaren lÄter Beaver Builder dig dra och slÀppa element till en sida för att skapa anpassade layouter.

Den har följande element som du kan anvÀnda i dina mönster:

Mall – En samling kolumner, rader och moduler som utgör en hel sida layout. Kolumner – vertikala layoutmoduler som hjĂ€lper till att justera innehĂ„ll horisontellt. Rader: horisontell samling av flera moduler Modul: ett element som genererar specifik information sĂ„som titel, textblock, tabell, galleri, etc.

Redigera bara en sida i Beaver Builder och klicka sedan pÄ knappen LÀgg till i det övre högra hörnet. Sedan kan du dra och slÀppa kolumner, rader, moduler till din sida och börja redigera dem direkt.

AnvÀnda Beaver Builder

Om du inte vill börja frÄn början vÀljer du en lista med förlagda mallar till att börja med.

Beaver Builder mallar

Beaver Builder lÄter dig ocksÄ spara dina mönster och sedan anvÀnda dem senare som mallar.

Mer information finns i vÄr artikel om hur du skapar en anpassad sidlayout med Beaver Builder.

Vi vill dock inte bara skapa sidlayouter. Vi vill skapa ett komplett anpassat tema.

Detta Àr nÀr Beaver Themer kommer in.

LĂ€gg till ett annat element till Beaver Builder som heter "Themer Layout".

Themer design

Med Themer-layouter kan du skapa anpassade layouter för sidhuvud, sidfot, innehÄllsomrÄden, 404-sida och andra delar av mallen.

Dessa Àr byggstenarna för alla WordPress-teman, och genom att anvÀnda dem kan du skapa ett anpassat tema som uppfyller dina behov.

AnvÀnda Beaver Themer-mallar för att skapa ett anpassat WordPress-tema

I följande instruktioner kommer vi att leda dig genom stegen som krÀvs för att skapa de mest populÀra anpassade temaelement. NÀr du Àr klar kommer du att ha omvandlat ditt bastema till ett helt anpassat WordPress-barntema.

Skapa en anpassad rubrik för ditt tema

LÄt oss börja med rubrikomrÄdet pÄ din webbplats. En anpassad rubrik Àr en vÀsentlig komponent i ett tema, och att bygga ett kan vara svÄrt med traditionella metoder.

Lyckligtvis har Beaver Themer inbyggda huvudfunktioner. Du kan anvÀnda den i förvÀg skapade mallen eller anvÀnda menyn och bildmodulerna med en tvÄ kolumnlayout.

För att komma till detta rubrikomrÄde mÄste vi först konfigurera en rubriklayout i Beaver Themer. besök Beaver Builder »LÀgg till nytt och ge en titel för din rubrik.

Skapa en anpassad rubriklayout

VÀlj sedan "Themer Layout" som typ och "Header" som layoutalternativ. NÀr du Àr klar klickar du pÄ knappen "LÀgg till Themer Design" för att fortsÀtta.

Detta tar dig till layoutkonfigurationssidan. HÀrifrÄn mÄste du vÀlja "Hela webbplatsen" som plats dÀr rubrikmallen kommer att visas.

Layoutalternativ

Klicka sedan pÄ "Start Beaver Builder" -knappen för att öppna generatorgrÀnssnittet.

Beaver Builder kommer att starta med en enkel grundlÀggande kolumn och en tvÄ-radig rubriklayout som utgÄngspunkt.

Header design

Du kan anvÀnda samma dra-och-slÀpp-verktyg som Beaver Builder för att Àndra bakgrund, fÀrger, text etc. Du kan ocksÄ lÀgga till andra moduler, ladda premade mallar och lÀgga till rader / kolumner genom att klicka pÄ knappen LÀgg till i det övre högra hörnet.

NÀr du Àr nöjd med designen klickar du pÄ knappen Klar för att spara eller publicera din design.

Du kan nu besöka deras webbplats för att se rubriken för ditt anpassade tema i aktion. Som ni ser har vi anvÀnt rubriklayouten pÄ vÄrt anpassade tema.

Anpassad rubrik pÄ ditt anpassade tema

Utöver rubriken kommer det fortfarande inte att visa nÄgot innehÄll och du kommer förmodligen att se sidfoten för bastemat.

LÄt oss Àndra detta.

Skapa en anpassad sidfot för ditt tema

Du kan skapa en anpassad sidfot för ditt tema med Beaver Themer precis som du skapade en anpassad sidhuvud.

GÄ till Beaver Builder »LÀgg till nytt och ge en titel för din sidfotlayout. VÀlj sedan "Themer Layout" som typ och "Footer" som layoutalternativ.

Sidfotens layout

Klicka pÄ knappen "LÀgg till design" för att fortsÀtta.

Detta tar dig till layoutkonfigurationssidan. HÀrifrÄn mÄste du vÀlja "Full webbplats" som plats dÀr mallen visas.

SidinstÀllningar för sidfot

Klicka sedan pÄ "Start Beaver Builder" -knappen för att öppna generatorgrÀnssnittet.

Beaver Builder kommer att lanseras med en sidfotslayout med tre kolumner. Du kan anvÀnda denna design som utgÄngspunkt och börja redigera.

Redigera sidfotens layout

Du kan lÀgga till moduler, textblock eller annat du vill. Du kan alltid Àndra fÀrger, teckensnitt, lÀgga till en bakgrundsbild och mer.

NÀr du Àr nöjd med designen klickar du pÄ knappen Klar för att spara eller publicera din design.

Skapa innehÄllsomrÄde för inlÀgg och sidor

Nu nÀr vi har skapat sidhuvud och sidfot för varje sida och inlÀgg pÄ webbplatsen Àr det dags att skapa inlÀgget eller sidan pÄ sidan (innehÄllsomrÄdet).

Vi börjar pÄ samma sÀtt som vi bygger sidhuvud och sidfot genom att lÀgga till "Singular" -layouten pÄ sidan LÀgg till ny.

Skapa inlÀgg och sidlayouter

Du vÀljer sedan var du vill visa denna design. Du kan vÀlja singular att anvÀnda för alla inlÀgg och enskilda sidor, eller du kan vÀlja inlÀgg eller bara sidor.

Unik designuppsÀttning

Klicka sedan pÄ "Start Beaver Builder" -knappen för att öppna generatorgrÀnssnittet.

Unik designutgÄva

Beaver Builder laddar en unik provlayout med inlÀgget / sidtiteln överst, följt av innehÄll, författarens bioruta och kommentaromrÄde.

Du kan peka och klicka för att redigera nÄgot av dessa objekt eller lÀgga till nya moduler, kolumner och rader efter behov.

NÀr du Àr nöjd med designen klickar du pÄ Klar för att spara och publicera dina Àndringar.

Du kan nu besöka deras webbplats för att se den i aktion.

Tema design med innehÄll.

Skapa fillayouter för ditt anpassade tema

Nu nÀr ditt anpassade tema har börjat formas kan du fortsÀtta skapa layouter för andra delar av din webbplats. Arkivsidor Àr dÀr WordPress visar dina kategorier, taggar, författare och mÄnatliga filer.

LÄt oss skapa en filsideslayout pÄ ditt anpassade tema.

Du börjar med att besöka Beaver Builder »LÀgg till nytt och ge en titel för din fillayout.

Skapa en fillayout för ditt anpassade tema

VÀlj dÀrefter "Themer Layout" som typ och "File" som layoutalternativ. Klicka pÄ knappen "LÀgg till design" för att fortsÀtta.

Detta tar dig till layoutkonfigurationssidan. HÀrifrÄn mÄste du vÀlja "Alla filer" som plats dÀr mallen kommer att visas. Du kan ocksÄ skapa separata layouter för varje enskild filtyp som datum, sökresultat, kategori, taggar etc.

InstÀllningar för fillayout

Klicka sedan pÄ "Start Beaver Builder" -knappen för att öppna generatorgrÀnssnittet.

Beaver Builder startar med en grundlÀggande layout för en kolumn. Den visar filtiteln överst, följt av inlÀgg.

Redigera fillayouten för ditt tema

Du kan peka och klicka pÄ valfritt objekt för att redigera dess egenskaper. Du kan ocksÄ lÀgga till nya moduler, rader och kolumner efter behov.

Klicka sedan pÄ knappen "Klar" för att spara och publicera dina Àndringar.

Skapa andra mönster för ditt anpassade WordPress-tema

Beaver Themer lÄter dig ocksÄ skapa layouter för andra sidor i mallhierarkin, till exempel sida 404, malldelar, sökresultatsida och mer.

Med hjÀlp av Beaver Builder's inbyggda drag-and-drop-funktion kan du enkelt skapa ditt eget WordPress-tema frÄn början utan att behöva skriva kod. Detta Àr verkligen den mest nybörjarvÀnliga metodutvecklingsmetoden för WordPress dÀr ute.

Vi hoppas att den hÀr artikeln har hjÀlpt dig att lÀra dig att skapa ett anpassat WordPress-tema utan att lÀra dig att koda. Du kan ocksÄ kolla in vÄr guide för hur du kan pÄskynda din WordPress-webbplats för en bÀttre anvÀndarupplevelse och SEO.

Om du gillade den hÀr artikeln, prenumerera pÄ vÄr kanal YouTube för att titta pÄ WordPress sjÀlvstudievideo. Du kan ocksÄ hitta oss pÄ Twitter och Facebook.