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 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 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.

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.

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.

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.

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 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".

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.