Sedan sin ursprungliga lansering 2003 har WordPress utvecklats från ett enkelt bloggverktyg till en kraftfull och populär webbplatsbyggare och ett omfattande CMS (content management system) som används av cirka 38% av webbplatserna på webben! Med tanke på dess popularitet måste du skapa WordPress-tema som är unikt för din webbplats om din webbplats behöver sticka ut från mängden.
I verkligheten är det inte konstigt att WordPress lyckades göra det så långt och bli så populärt.
Mängden flexibilitet det har och de funktioner det är värd för, gör det möjligt att använda det på olika webbplatstyper. Dessutom är WordPress ganska lätt att använda med liten eller ingen tidigare erfarenhet av kodning eller webbutveckling alls.
Detta är orsakerna bakom WordPress framgångshistoria och är just anledningarna till nästan 40 procent av alla webbplatser på Internet drivs av denna programvara.
WordPress har en rad praktiska funktioner som gör webbutveckling och programmering less komplicerat och mer tillgängligt för alla.
Introduktion till WordPress Theme Development
En annan populär funktion som gör WordPress så populär är dess teman. Temat är helt enkelt en samling stilark och mallar som definierar hur en WP-driven webbplats kommer att se ut och visas.
Programvaran ger användaren ett brett utbud av olika redigeringsalternativ när det gäller teman från WP-adminområdet.
Hundratals WordPress-teman är helt gratis eller med många andra till ett rimligt pris på några tiotals dollar.
Faktum är att WordPress.org är värd för en enorm databas med teman i sin temakatalog.
Andra webbplatser som Themeforest erbjuder också massor av premiumteman från olika utvecklare.
Var och en av dessa teman har olika layout, designmönster och funktioner.
Det är upp till användaren att hitta en som passar bäst på deras webbplats. I de flesta fall skapas teman med särskilda branscher eller yrken i åtanke, vilket innebär att till exempel restaurangägare enkelt kan hitta teman med bokningsfunktioner.
Även om det finns många fantastiska teman som kan passa dina behov, är det säkert att säga att om du vill göra något enastående måste du ganska mycket göra det själv. Om du inte kan programmera, ett bra alternativ alternativet skulle vara att gå till en frilans mjukvaruutvecklare (priserna kan variera beroende på olika faktorer).
I den här artikeln kommer vi dock att gå igenom ALLA de steg som krävs för att skapa ditt eget WordPress-tema för din WP-drivna webbplats. Vi kommer att titta på alla viktiga aspekter för att se till att du får det bästa som WordPress har att erbjuda.
Att komma igång med att skapa ditt eget tema som nybörjare kan vid första anblicken verka som en enorm uppgift.
Att skapa ett anpassat tema från grunden är dock inte så komplicerat i WP. Du behöver inte vara en webbutvecklare, om du har grunderna i kodning med PHP kan du enkelt lära dig att skapa ett WordPress-tema.
Dessutom kan det vara ganska givande att skapa ditt eget tema, särskilt när du ser slutresultatet live på din webbplats.
Skapa ditt första anpassade WordPress-tema
För att komma igång med att skapa ett WordPress-tema behöver du några grundläggande saker:
- En WordPress-webbplats
- En bra värdplan
- Lite tidigare erfarenhet av saker som lokala scenmiljöer
- Grundläggande förståelse för CSS- och PHP-kodningsspråk
- Ett starttema
Förstå WordPress-hierarkin
I WordPress är mallfiler (byggstenarna för ditt tema) modulära och återanvändbara.
Mallfiler ansvarar för att generera sidorna på din WP-webbplats. Vissa av dessa filer används på nästan alla dina sidor medan andra endast används under specifika omständigheter.
Ta en titt på diagrammet nedan – det förklarar hur WordPress-mallhierarkin är organiserad.
Mallfiler bestämmer det övergripande utseendet på innehållet på webbplatsen. Om du vill skapa en rubrik använder du en header.php fil, eller om du vill lägga till en kommentarsektion använder du comments.php fil.
För att förstå mallhierarkin bör du veta att WordPress använder något som kallas en “frågesträng” för att bestämma vilken mall eller malluppsättning som ska användas för att skapa och visa en viss sida.
Frågesträngen är information som lagras i länken till varje del av webbplatsen du försöker ändra. I enklare termer analyserar WordPress informationen och gör sökningar genom mallhierarkin för att hitta en mallfil som matchar den angivna informationen i frågesträngen.
Detta är i grunden ett schema där WP letar efter matchande mallfiler varje gång sidor laddas.
Till exempel om du skriver in följande webbadress http://example.com/post/this-post, WordPress hittar de nödvändiga mallfilerna i följande ordning:
- Filer som matchar snigeln, i det här fallet, den här posten.
- Filer som matchar inläggets ID.
- En generisk enda postfil, som single.php.
- En arkivfil, i det här fallet, archive.php.
- Du har nu möjlighet index.php fil.
Den sista filen (index.php) krävs i alla teman, eftersom det är standard (eller reserv) om ingen annan fil kan hittas i matchningsprocessen. streck (ett WP-starttema) har de vanligaste filerna. Dessa filer som ingår i detta tema fungerar direkt från lådan.
Du kan redigera dem om du vill experimentera eller behöver skapa anpassad funktionalitet på din webbplats.
Vad är ett WordPress-starttema?
Ett starttema är en grundläggande grund för ett anpassat WordPress-tema.
Du kan använda den som bas för att få ditt eget unika tema igång. Med ett starttema kan du bygga ditt eget WordPress-tema utan att behöva designa eller koda ett helt tema från grunden.
WordPress-startteman innehåller alla filer som definierats enligt ovanstående hierarki.
Med hjälp av ett starttema kan du få en bättre förståelse för hur WordPress fungerar eftersom det visar dig grunderna, strukturen i ett tema och hur de olika delarna fungerar tillsammans.
Ett specialbyggt WordPress-tema kan tillämpas på en rad olika webbplatstyper, från presentationer och kataloger till onlinebutiker byggd med WooCommerce, sociala medier eller vad du än behöver din webbplats för.
Att välja startteman (som UnderStrap, Underscores och Bones) hjälper till att skapa WordPress-tema som öppnar dörren för att använda en mängd olika alternativ.
Att använda Underscores kan vara det bästa valet för nybörjare eftersom det erbjuder de viktigaste funktionerna. Det kommer också från en långvarig och pålitlig utvecklare. Det betyder att det är mer troligt att det är kompatibelt, säkert och pålitligt och kommer att ha bättre stöd på lång sikt.
Varför ska du använda ett starttema
Som nämnts ovan är ett starttema en grund, en ritning som hjälper dig att komma med en unik webbplats. Det fungerar redan fullt men saknar fortfarande de definierande viktiga funktionerna som gör en användarvänlig webbplats.
I grund och botten behöver den fortfarande utformas och konfigureras korrekt.
Med detta sagt är startteman idealiska för dem som har liten eller ingen erfarenhet av WordPress eller webbutveckling i allmänhet. Det är ett utmärkt sätt att lära känna ämnet temabyggning och lära sig grunderna på WP-drivna webbplatser.
Ett WordPress Starter-tema sparar tid och kräver liten eller ingen bakgrundskunskap i kodning och resten av WordPress-komplexiteten.
Du kan utnyttja år av hårt arbete från utvecklarna av starttemat och använda dessa riktlinjer för att få en bättre förståelse för hur WordPress och temadesign fungerar.
Populära exempel på starttema
- streck – Ett pålitligt och känt starttema som ger nybörjare ett försprång temautveckling. Understreck är ganska grundläggande och perfekt för att komma igång direkt om du har alla nödvändiga verktyg. Temat är bra för att förstå begreppen temautveckling. Underscores handlar om att starta ett nytt projekt som borde ses mer som en ständigt utvecklande verktygslåda och less som en ram.
- rötter – Detta starttema ger dig ett tillvägagångssätt som är mer inriktat på utvecklare med sin markering baserad på HTML5 Boilerplate. Det stöder också mer avancerade verktyg som Bootstrap och grunt. Roots starttema innehåller också ett temapaket som hjälper dig att hålla din process strömlinjeformad och eliminerar att anropa samma malldelar upprepade gånger.
Roots använder också CSS förprocessorer och stöd LESS, ett bakåtkompatibelt språktillägg för CSS, som kan påskynda processen för att utveckla ditt tema avsevärt.
Med detta sagt ger Roots en mer pragmatisk inställning och kräver lite mer kunskap från utvecklaren.
6 grundläggande steg för att utveckla ditt WordPress-tema
Efter att ha täckt grunderna är du äntligen redo att komma igång med att skapa ett WordPress-tema.
Eftersom den här artikeln är mer inriktad på nybörjare kommer vi att använda ett starttema, men du är också fri att skapa allt från grunden utan några startteman.
Om det är den vägen du vill gå, glöm inte att du behöver mycket mer tid och kommer att behöva fördjupa dig lite djupare i kodning och webbutveckling i allmänhet.
1. Ställa in utvecklingsmiljön
Ditt första steg i processen bör vara att skapa en utvecklingsmiljö.
Detta är i grunden en server som du behöver installera på din dator för att hantera och utveckla lokala WP-webbplatser. En utvecklingsmiljö gör att du kan utveckla din webbplats säkert, förutom att du ger dig flera alternativ för att skapa en lokal miljö.
Använda DesktopServer är en av de perfekta vägarna du kan ta. Det är ett enkelt sätt att få en lokal och snabb version av WP som är kompatibel med både Windows och Mac. Välj gratisversionen, registrera och ladda ner den och installera sedan programvaran.
När du har installerat öppnar du programmet och konfigurerar din lokala miljö.
Det är en ganska enkel process och du är redo på några minuter. Efter installationen har du en webbplats och utvecklingsmiljö som både kommer att fungera och se ut som alla levande WP-webbplatser.
2. Ladda ner och installera ett starttema
De mest grundläggande starttemanna (som Underscores) är enkla att börja med med för första gången.
I motsats till de flesta grundläggande teman tillåter Underscores att anpassa alternativ genom sina Avancerade alternativ (som författare och beskrivning) efter att ha dött ditt tema.
Du kan också lägga till Syntactically Awesome StyleSheets eller SASS vilket är ett förbehandlat CSS-språk som gör att du kan introducera funktioner som kapsling, matematiska operationer, användning av variabler etc.
När du har gjort dina val är allt du behöver göra att klicka på Generera för att ladda ner .zip-filen med ditt starttema.
Installera nu filen på din lokala webbplats. Om du har gjort allt korrekt kan du nu se en grundläggande version av ditt anpassade WordPress-tema.
Förstå WordPress Core Principles
Nu när grunderna är inställda kan du komma till jobbet. Innan du dyker in i anpassningsprocessen måste du dock bekanta dig med kärnprinciperna och komponenterna för att skapa ett WordPress-tema med hjälp av kärnprinciperna i WP.
Först och främst måste du lära dig mer mallfiler, de viktigaste byggstenarna för något tema i WP.
Mallfiler bestämmer i princip hur din layout och ditt innehåll ska visas på din webbplats. Om du vill skapa en rubrik vill du använda header.php fil, medan comments.php skulle användas för att visa eventuella kommentarer.
Som diskuterats ovan använder WP sin mallhierarki för att bestämma vilken mallfil den väljer att köra innehållet som en användare begär / behöver. Du kan arbeta med de här filerna som de är, men med tanke på att du är här för att skapa WordPress-tema kommer din huvuddelen av arbetet att anpassa dessa filer efter dina behov.
När vi pratar om WP-kärnprinciper bör du också förstå konceptet bakom The Loop.
Det är koden som WP främst använder för att visa ditt innehåll och det finns i allt innehåll som visar mallfiler, som i index.php or sidofält.php. Det är ett ganska komplext ämne men som tur är kommer det med starttemat (om du använder Underscores) vilket innebär att din process borde vara enklare.
Du måste förstå konceptet och arbeta med det. Kolla in några av exemplen i länken ovan för att bättre förstå hur slingan används och hur du kan anpassa koden efter dina behov.
3. Skapa temadetaljer
teman är inte rent kosmetiska komponenter.
Det finns massor av olika funktioner du kan lägga till på din webbplats som kan förbättra funktionaliteten. Vi ska diskutera hur man implementerar några grundläggande funktioner för att krydda din webbplats.
Lägga krokar kan göra det möjligt för dig att köra olika PHP-åtgärder, visa annan information eller infoga stylingdata efter behov.
Krokar är kodavsnitt som infogas i mallfiler. De flesta av dem implementeras direkt som en del av WordPress-kärnan, men vissa krokar är ganska användbara när du också anpassar teman.
Här är en lista över de vanligaste krokarna och deras roller:
- wp_head () – läggs till i element i header.php. Det möjliggör skript, stilar och annan information som körs när webbplatsen börjar laddas.
- wp_footer () – läggs vanligtvis till footer.php före tagg, används oftast för att infoga kod för Google Analytics eller annan kod som måste visas på varje sida men som är för tung för att laddas i rubriken.
- wp_meta () – Vanligtvis finns på sidebar.php, och det används oftast för att inkludera ytterligare skript (till exempel ett taggmoln).
- comment_form () – Lades till comments.php direkt innan filen stängdes tagg för att visa kommentarer.
När du använder Underscores kommer dessa krokar redan att ingå i temat, men det är alltid en bra idé att lära dig mer om dem och se alla tillgängliga krokar. Krokar låter dig utöka funktionerna för ditt anpassade tema.
4. Lägga till stilar med CSS
Cascading Style Sheets eller CSS definierar utseendet på innehållet på webbplatsen du skapar.
Med hjälp av style.css fil, som redan ingår i ditt tema, kan du redigera alla stilar som finns här och spara dem för att se hur det ändrar din design. Som standard innehåller den bara den grundläggande stylingen.
CSS används för att möjliggöra presentation och separering av innehållet på din webbplats, allt från layout till teckensnitt och innehåll. CSS kan hjälpa till att göra innehållet på din webbplats mer tillgängligt och mer flexibelt.
Att gå in på djupet om hur man använder styling med WordPress-teman kan bli ganska hårigt och ligger utanför denna artikel. Om du inte är så säker på det här kanske du vill läsa mer om CSS innan du fortsätter.
5. Inklusive JavaScript
Att lägga till JavaScript-filer till ditt tema om det behövs kan öka interaktiva funktioner och funktioner och få en bättre fungerande webbplats. Det är särskilt användbart när du vill integrera plugins från tredje part på dina webbplatser, som specifika video- eller ljudspelare, saker som reglagen, popup-stöd och andra tredjepartsbibliotek för att skapa avancerad funktionalitet.
För att använda Javascript med din anpassade webbplats kan du ringa ett samtal med hjälp av syntaxen nedan för att lägga till skriptfilen till temat.
Alternativt kan du använda skriptet direkt i din header.php mallfilen mellan metataggarna och stilarklänken, som du skulle göra när det gäller en HTML-sida. När du använder den i rubrikfilen ska den se ut så här:
Om du vill använda JS direkt lägga till samtalet för filerna direkt enligt nedan. Om du vill ställa in en “skicka detta till en vän” -funktion, kan du lägga den under postens titel. Det skulle se ut som detta:
” rel=”bookmark”>