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 en anständig kodningskunskap för att bygga ett anpassat WordPress-tema. Men tack vare nya WordPress-temageneratorer kan nu vem som helst skapa ett helt anpassat WordPress-tema inom en timme (ingen kodningskunskap behö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 av 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 nå tusentals dollar.

Eftersom många småföretagare inte hade råd med de höga kostnaderna för ett anpassat WordPress-tema, nöjer sig många av dem bara med de standardtema som medföljde WordPress..

De som inte ville bosätta sig och ville ha anpassningar använde antingen ett drag & släpp WordPress-sidbyggaren, eller så använde de en temaram för att bygga ett anpassat tema.

Medan WordPress-temramar underlättade att bygga ett WordPress-tema är de en lösning för utvecklare, inte en genomsnittlig webbplatsägare.

Å andra sidan gjorde WordPress-sidbyggare-plugins det superlätt att skapa anpassade sidlayouter med en dra & släppgränssnittet, men de var begränsade till layouter bara. Du kunde inte bygga anpassade teman med det.

Fram till Beaver Builder, en av de bästa WordPress sidbyggaren plugins beslutade att lösa detta problem med deras tillägg som heter Beaver Themer.

Beaver Builder bästa WordPress sidbyggare plugin

Beaver Themer är ett tillägg för webbplatsbyggare som låter dig skapa anpassade temainformationer med ett dra-och-släpp-gränssnitt och utan att lära dig att koda.

Låt oss titta 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 fortsätter du att läsa.

Ställa in Beaver Themer för att bygga ett anpassat tema

Beaver Themer är ett tilläggsprogram 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 pluginprogrammen Beaver Builder och Beaver Themer. 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 kommer fortfarande att behöva ett tema till att börja med. Vi rekommenderar att du använder ett tema med lätt vikt som innehåller en sidmall i full bredd för att fungera som ditt starttema.

Du kan hitta många sådana teman i temakatalogen WordPress.org. De flesta moderna WordPress-teman har en mall i full bredd. Våra toppval är:

  • Astra – Ett gratis lätt viktigt WordPress-tema som kommer med inbyggt stöd för Beaver Builder.
  • OeanWP – Ett annat populärt gratis mångsidig WordPress-tema som kommer med stöd för fullsidebyggare.
  • StudioPress-teman – Alla deras teman är kompatibla med Beaver Builder och skulle fungera bra med Beaver Themer.

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

Ställa in ditt tema för Beaver Themer

När du bygger 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 standard Astra-layouten. Som du ser att denna layout innehåller en sidofält som kan vara svårt 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 måste du byta till Layout »Sidofält flik.

Stänga av sidofält i ditt tema

När du väl är där väljer du helt enkelt ‘Ingen sidofält’ under standardlayoutalternativet och klickar på knappen Publicera för att spara dina ändringar.

Ditt tema börjar nu använda en layout utan sidofält. Detta är den bästa layouten att använda med Beaver Themer.

Temainformation utan sidofält

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.

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 sidofält i dina temainställningar.

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

När du har ställt in ditt tema till en layout i full bredd är du redo att skapa ditt anpassade WordPress-tema med Beaver Themer.

Quick Beaver Themer Fundamentals

Beaver Themer arbetar ovanpå Beaver Builder. Som en sidbyggare-plugin kan Beaver Builder dra och släppa objekt till en sida för att skapa anpassade layouter.

Den har följande objekt som du kan använda i dina layouter:

  • Mall: En samling kolumnerader och moduler som utgör en hel sidlayout.
  • Kolumner: Vertikala layoutmoduler som hjälper till att justera innehåll horisontellt.
  • Rader: Horisontell samling av flera moduler
  • Modul: Ett objekt som matar ut specifik information som titel, textblock, tabell, galleri osv.

Redigera bara en sida i Beaver Builder och klicka sedan på knappen Lägg till i det övre högra hörnet. Du kan sedan 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 från en lista med färdiggjorda mallar till att börja med.

Beaver Builder mallar

Beaver Builder låter dig också spara dina layouter och sedan använda dem senare som mallar.

För mer information se 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.

Den lägger till en annan artikel till Beaver Builder som heter ‘Themer Layout’.

Themer Layout

Med Themer-layouter kan du skapa anpassade layouter för sidhuvud, sidfot, innehållsområden, 404-sidor och andra malldelar.

Detta är byggstenarna för alla WordPress-teman och genom att använda dem kan du skapa ett anpassat tema som passar dina behov.

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

I följande instruktioner kommer vi att gå igenom stegen som krävs för att bygga de mest populära anpassade temaelementen. När du är klar kommer du att ha omvandlat ditt bastema till ett helt anpassat WordPress-barntema.

Bygga en anpassad rubrik för ditt tema

Låt oss börja med webbplatsens rubrikområde. 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 rubrikfunktioner inbyggda. Du kan antingen använda den förskapade 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 temaarlayout” för att fortsätta.

Detta leder dig till sidan med layoutinställningar. Härifrån måste du välja “Hela webbplatsen” som plats där rubrikmallen visas på.

Layout inställningar

Klicka sedan på knappen “Starta Beaver Builder” för att öppna gränssnittet för byggare.

Beaver Builder kommer att starta med en grundläggande enkel kolumn och tvåra radshuvudlayout som utgångspunkt.

Sidhuvudlayout

Du kan använda samma Beaver Builder dra- och släppverktyg för att ändra bakgrund, färger, text osv. Du kan också lägga till andra moduler, ladda förlagda mallar och lägga till rader / kolumner genom att klicka på knappen Lägg till längst upp till höger. hörn.

När du är nöjd med designen klickar du på knappen Klar för att spara eller publicera din layout.

Du kan nu besöka din webbplats för att se din anpassade temahuvud i aktion. Som ni ser har vi använt rubriklayouten på vårt anpassade tema.

Anpassad rubrik i ditt anpassade tema

Bortsett från sidhuvudet kommer det inte att visas något innehåll ännu, och du kommer troligtvis se fotfotområdet för ditt bastema.

Låt oss ändra detta.

Bygga 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å över 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 temaarlayout” för att fortsätta.

Detta leder dig till sidan med layoutinställningar. Härifrån måste du välja “Hela webbplatsen” som den plats som mallen kommer att visas på.

Sidinställningar för sidfot

Efter det klickar du på knappen “Starta Beaver Builder” för att öppna gränssnittet för byggare.

Beaver Builder startar med en sidfotlayout med tre kolumner. Du kan använda denna layout 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 layout.

Bygga 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 bygga inlägget eller sidkroppen (innehållsområdet).

Vi börjar på ungefär samma sätt som vi byggde sidhuvud och sidfot genom att lägga till ‘Singular’ -layouten på sidan Lägg till ny.

Skapa inlägg och sidlayouter

Därefter väljer du var du vill visa denna layout. Du kan välja singular för att använda det för alla enstaka inlägg och sidor, eller du kan välja inlägg eller bara sidorna.

Inställningar för enkelformad layout

Efter det klickar du på knappen “Starta Beaver Builder” för att öppna gränssnittet för byggare.

Redigering av enkel layout

Beaver Builder laddar ett exempel på en enkel layout med post / sidtitel längst upp, följt av innehåll, bio-ruta för författare 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 layouten klickar du på knappen Klar för att spara och publicera dina ändringar.

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

Temainformation med innehåll

Skapa arkivlayouter för ditt anpassade tema

Nu när ditt anpassade tema har börjat formas kan du gå vidare till att skapa layouter för andra delar av din webbplats. Arkivsidor är där WordPress visar dina kategorier, taggar, författare och månatliga arkiv.

Låt oss skapa en layout för arkivsidor i ditt anpassade tema.

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

Skapa en arkivlayout för ditt anpassade tema

Välj sedan “Themer Layout” som typ och “Archive” som layoutalternativ. Klicka på knappen “Lägg till temaarlayout” för att fortsätta.

Detta leder dig till sidan med layoutinställningar. Härifrån måste du välja “Allt arkiv” som den plats som mallen kommer att visas på. Du kan också skapa separata layouter för varje enskild arkivtyp som datum, sökresultat, kategori, taggar osv.

Arkivera layoutinställningar

Efter det klickar du på knappen “Starta Beaver Builder” för att öppna gränssnittet för byggare.

Beaver Builder kommer att lanseras med en grundläggande arkivlayout för en kolumn. Den visar arkivtitel längst upp, följt av inlägg.

Redigera arkivlayouten 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 layouter för ditt anpassade WordPress-tema

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

Med hjälp av den inbyggda drag-and-drop-funktionen i Beaver Builder kan du enkelt skapa ditt eget WordPress-tema från början utan att skriva kod. Detta är verkligen den mest nybörjare vänliga WordPress temautvecklingsmetod som finns.

Vi hoppas att den här artikeln hjälpte dig att lära dig att skapa ett anpassat WordPress-tema utan att lära dig att koda. Du kanske också vill se vår guide för hur du kan påskynda din WordPress-webbplats för bättre SEO och användarupplevelse.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map