Good Mood

detta kommer att bli en rolig handledning där vi inspekterar hur du skapar ditt eget WordPress-tema från början. I själva verket börjar vi med absolut noll filer och noll rader kod. Det enda sättet att förstå hur WordPress teman fungerar, är att verkligen hoppa in på en låg nivå och göra allt själv. Ja, det är frestande att undvika detta eftersom du kan göra WordPress göra allt för dig utan någon förståelse för den kod som driver den., Detta kan vara PHP, JavaScript, CSS eller ens grundläggande HTML. I slutet av denna steg för steg WordPress tema handledning, Du kommer att förstå hur allt passar ihop och hur man böja WordPress till din vilja med lätthet.

det finns så många gratis teman tillgängliga för dig när du kör en WordPress webbplats. Utöver de fria teman, kan du också välja att betala en premie för professionellt gjort WordPress teman som ser bra ut och har fantastiska funktioner. Så varför lära sig att skapa ditt eget tema från början?, Svaret är att oavsett vilket tema du använder, det kommer att komma en tid när du vill göra enkla ändringar på din webbplats. Några av dessa förändringar kanske kan rymmas av en enkel plugin eller widget. Många gånger är det dock mer meningsfullt att förstå vad det är du vill ändra, hur man ändrar det och undviker att göra din WordPress-webbplats till en röra av plugins och tillägg som blir otympliga. Med bara lite grundnivå kunskap, du kommer att vara säker på att ändra ditt tema, eller helt enkelt bygga din egen från grunden., Du vet vilken fil du vill redigera och vilken kod du vill lägga till eller ändra för att skapa önskat resultat.

Steg 1: Skapa en mapp för att hålla dina temafiler.

om vi ska bygga teman måste vi veta var filerna som utgör ett WordPress-tema bor i en WordPress-Installation. Det här är ganska lätt. Vi vet att en WordPress-installation vanligtvis har en rotkatalog som heter wordpress. Här är vad vår rotkatalog ser ut i PHP Storm.,

den här katalogen innehåller följande filer och mappar:

filer

mappar

• wp-admin
• wp-innehåll
• wp-inkluderar

mappen som vi är mest intresserade av just nu är wp-content-mappen. I mappen wp-content finns en mapp som heter themes. Vet du vad den här mappen är till för? Ja, det stämmer! Det är den mapp som innehåller en eller flera teman som du vill använda med din WordPress webbplats., I den här mappen teman hittar vi tre ytterligare mappar med twentyfifteen, twentysixteen och twentyseventeen. Dessa mappar innehåller de tre teman som WordPress levereras med som standard. Observera nedan att det också finns en mapp som heter customtheme. Gå vidare och skapa den mappen också i din installation eftersom det är där vi kommer att skapa vår WordPress tema från grunden.

steg 2: Skapa stil.css och index.php i din egen temaapp

vi vet nu var WordPress-temafiler finns i filsystemet., Vi har också skapat en ny mapp som heter customtheme i vår teman mapp. Vi ska nu skapa två tomma filer i den här katalogen. En kallas index.php och den andra kallas stil.css.

Låt oss nu fylla dessa filer med det minsta vi behöver för att få ett nytt tema i WordPress.

stil.CSS

WordPress läser faktiskt de kommentarer som du placerar i stilen.css-fil. Det är där du anger specifik information om temat du bygger.

stilen.,css är en stilmall (CSS) fil som krävs för varje WordPress tema. Den styr presentationen (visuell design och layout) av webbplatsens sidor.

i vårt utdrag här tilldelar vi helt enkelt ett temanamn, författaren, författaren URI och versionsnumret för vårt tema.,

index.,php

i den här filen vill vi bara mata ut något på skärmen för att bevisa att vårt anpassade tema fungerar.

bra jobb! Tro det eller ej, du har skapat din första WordPress tema.,

steg 3: aktivera ditt tema från WordPress Dashboard

Vid denna punkt kan vi besöka vår WordPress Dashboard och navigera till utseende->teman och se och se, vi ser det nya temat Vi har skapat.

Vi kan klicka på ”Tema Detaljer” för att borra ner på vår anpassade tema och finna att den information som vi hade ingått i stilen.css-filen har fungerat. Vi kan se dem har ett namn av customtheme, med Version 1.0, av författaren Vegibit, och en länk till URI vi hade lämnat. Väldigt coolt.,

och nu sanningens ögonblick! Gå vidare och klicka på ”Aktivera” på den nya customtheme och besök sedan webbplatsen. Det kommer inte att vinna några Webby awards, men vi har själva en bra start på ett nytt anpassat tema!

steg 4: Lägg till kod för att mata ut Posttiteln och lägga upp Text

Vi har tagit oss friheten att fylla i ett par exempel inlägg i databasen så att vi kan arbeta med dessa data under denna handledning. Just nu, vårt tema bara utgångar anpassade tema!, till sidan när vi besöker vår webbplats oavsett hur många inlägg som finns i databasen. Låt oss nu flytta för att hämta några data från databasen, och mata ut den till sidan. Specifikt vill vi hämta Posttiteln och posta innehållet i alla inlägg och visa dem på hemsidan. Låt oss ge det en chans nu. Låt oss först se vad vi har för inlägg i WordPress Dashboard.

utnyttja WordPress Loop

Nu kan vi prata lite om WordPress Loop. WordPress Loop är verkligen den motor som gör WordPress köra., Det är via denna slinga, att temautvecklare kontrollera efter inlägg och visa dem på sidan efter behov. Om följer formatet enligt följande. Om databasen har inlägg, låt oss slinga över dem medan det fortfarande finns inlägg, annars kommer vi att låta användaren veta att det inte finns några inlägg. Det ser ut så här i PHP-kod.,

Observera att slingan använder sig av två funktioner i sin mest grundläggande form. Det är have_posts () och the_post (). Funktionen have_posts () gör bara en sak. Det berättar om det finns några inlägg i databasen för att loop över., Denna funktion kommer att returnera antingen true eller false och det är det. Om den returnerar true, finns det inlägg tillgängliga för loop over. Om det returnerar false, så finns det inga inlägg att loop över. Den andra funktionen, the_post () returnerar inte någonting. Det är jobb är att få WordPress redo att skriva ut inlägg. Specifikt hämtar det nästa inlägg, ställer in in inlägget, ställer in egenskapenin_the_loop tilltrue., Hittills kommer vår sida fortfarande inte att mata ut någon information om våra blogginlägg, men vi kan uppdatera det nu i vårt index.php-fil.

Ok cool. Vi har nu använt sig av två ytterligare WordPress funktioner, the_title () och the_content (). Oftast används dessa funktioner inuti slingan och vad de gör är att hämta titeln och innehållet i varje inlägg som slingan itererar över var och en i databasen. Så som slingan går, kommer den att komma över det första inlägget., Vid den tiden kommer funktionen_title() att mata ut titeln på inlägget till sidan och the_content() kommer att mata ut kroppen för det inlägget till sidan. På nästa slinga hämtar dessa funktioner igen nästa titel och innehåll och matar ut dem till sidan. Så med dessa på plats bör vi nu se lite information om våra inlägg som skickas till skärmen. Vi provar! Vi besöker http://wordpresstutorial.dev och ser att det fungerar!,

Steg 5: Lägg till en länk till varje inlägg

vad sägs om att länka till varje enskilt inlägg så att vi kan se ett inlägg på det egna snarare än som en del av bara hemsidan. Vi kan göra det ganska enkelt, igen med speciella funktioner som WordPress ger. För denna uppgift kan vi använda funktionen the_permalink (). Vi kan uppdatera vår kod så:

Nu kan vi klicka på varje enskild posttitel och navigera till en sida som har just det inlägget. Väldigt coolt!,

steg 6: Lägg till en sidhuvud och sidfot till det anpassade temat

titeln och innehållet i posten är centrala för att skapa ett bra tema. Nästan lika viktigt är att ha en sidhuvud och sidfot del av ditt tema. Dessa avsnitt skulle innehålla det innehåll som alltid är synligt på alla sidor på webbplatsen. Dessa avsnitt är över och under inlägget innehåll. För att göra detta gissade du det, vi kommer att använda sig av speciella funktioner som tillhandahålls av WordPress för att få huvudet och för att få sidfoten. Ser du ett mönster börjar utvecklas ännu?, Nästan allt du kan göra som temautvecklare i WordPress har redan gjorts för dig genom dessa anpassade funktioner. Så hittar du att det lönar sig att memorera dessa vanliga funktioner i WordPress tema utveckling. Låt oss gå vidare och lägga till get_header() och get_footer() funktioner till vårt tema fil nu.

väl skulle du titta på det?! Vi kan se att vårt anpassade tema nu har ett huvudområde samt ett sidfot område., I rubriken är namnet och tagline på webbplatsen medan i sidfoten ser vi den välbekanta texten, WordPress Tutorial drivs stolt av WordPress. Dessa är standard header och sidfot alternativ när du använder dessa funktioner. Vad sägs om när vi vill ha en egen sidhuvud och sidfot? Jag kommer upp!

från 2 temafiler till 4

hittills i den här handledningen har vi två filer som lever i vår customtheme-mapp (som själv finns i mappen teman). Filerna är stilfulla.css och index.php. Vid denna tidpunkt kommer vi att behöva lägga till fler filer för att komma vidare., Gå vidare och skapa två nya filer i mappen customtheme. Dessa filer kommer att kallas bekvämt header.php och sidfot.php.

nu vad dessa filer kommer att göra är att skriva över standard sidhuvud och sidfot layouter som tillhandahålls som standard när du ringer antingen get_header() eller get_footer() funktioner. Faktum är att om vi uppdaterar vår hemsida ser det ut som att sidhuvudet och sidfoten är borta. Detta beror på att vi inte har lagt till någon markering till dessa filer ännu. Bara för grins, konfigurera filerna så för att testa detta.

Huvud.,php

footer.,php

Working with header.,php

vårt exempel ovan fungerade bra, och det visar oss hur den här filen fungerar på den mest grundläggande nivån. Rubrik.php-fil är faktiskt ganska viktigt dock, så låt oss inte släta över detaljerna i det för snabbt! Det är där du inkluderar kod som alla sidor på din webbplats kommer att behöva tillgång till på ett eller annat sätt. Till att börja med kommer alla HTML-sidor att ha en doctype. Du skulle ange det i den här filen. Dessutom, alla sidor kommer att ha en öppning html-tagg, ett huvud avsnitt, och en öppning body tagg. Allt detta kan gå i rubriken.php-fil., Låt oss snabbt lägga till några av dessa saker som alla webbsidor skulle använda sig av. Vi kommer att använda oss av några nya WordPress funktioner här också. De kommer att vara language_attributes (), bloginfo () och body_class ().

Huvud.php

om vi laddar om sidan och sedan visar källan till sidan i vår webbläsare kan vi få en uppfattning om precis vad dessa funktioner gör. Vi lyfter fram de linjer som har utdata som kom från dessa funktioner nedan:

igen kan vi se den mycket liberala användningen av WordPress-funktioner när vi utvecklar dina egna teman i WordPress., Faktum är att vi inte har skrivit någon anpassad kod alls än. Vi lär oss helt enkelt vad de olika WordPress-funktionerna kan erbjuda oss, och sedan sätta dem att arbeta i vårt anpassade tema.

inklusive wp_head()

wp_head() är typ av en speciell funktion när du arbetar med WordPress Teman. Det är inte så enkelt som alla andra vi har tittat på hittills. Syftet med denna funktion är att slutföra utmatningen i avsnittet <head> I rubriken.php-fil., I själva verket är det tänkt att gå strax före stängningen</head> taggen. Detta blir viktigt när du börjar lägga till olika plugins till din webbplats. Den skriver ut skript eller data i huvudtaggen på framsidan. Det är bra att alltid inkludera wp_head () i dina teman, eftersom många andra plugins kan lita på den här kroken för att lägga till stilar, skript eller meta-element i området <head> på webbplatsen. Vi lägger till det som sådant här:

header.php

slutföra sidfot.,php

Vi har lagt till grunderna för vad vi behöver i huvudet.php-fil. Låt oss nu gå vidare och runda ut sidfoten.php-fil. Det är några saker vi behöver göra. Minns det i vår rubrik.php – fil Vi har öppna html och body tags. De måste stängas någon gång. Sidfot.php-fil är ett perfekt ställe att göra det. Så vi lägger till stängning </html> och </body> taggar förutom att ringa till wp_footer () – funktionen.
sidfot.,php

ändra webbplatsinformation i WordPress instrumentpanelen

Du kanske undrar varför vi var tvungna att använda alla dessa fina funktioner för att bygga upp vårt tema. Till exempel, när vi ville lista ut namnet och tagline på vår webbplats, vi utnyttjade bloginfo() funktion passerar parametrar namn och beskrivning., Anledningen till detta är att du i allmänhet aldrig vill hårdkoda dessa värden i din webbplats. Detta är information som kan förändras. Dessutom, om du gör ditt tema tillgängligt för allmänheten, de kommer att ha sitt eget namn och tagline för deras hemsida. De bör kunna helt enkelt besöka admin instrumentpanelen i WordPress och uppdatera sina Allmänna inställningar för att se dessa data fylla automatiskt.

gör webbplatsens Titellänk till Hemsidan

de flesta teman kommer att erbjuda möjligheten att klicka på titeltexten på webbplatsen och rikta användaren till webbplatsens hemsida., På så sätt, oavsett var Användaren kan vara på webbplatsen, kan de alltid klicka på den titeltexten och gå tillbaka till webbplatsens huvudsida. Låt oss lägga till den länken nu i rubrik.php.

Steg 7: Lägg till en funktion.php-fil till ditt tema

vid denna tidpunkt har vi fyra filer i vårt anpassade tema. Det är index.php, stil.css, rubrik.php, och sidfot.php. Förmodligen är den näst viktigaste filen vi behöver ha funktionerna.php-fil.

funktionerna.php-fil i WordPress gör många saker för ditt tema. Det är filen där du placerar kod för att ändra standardbeteendet för WordPress., Du kan nästan tänka på funktionerna.php som en form av en plugin för WordPress med några viktiga punkter att komma ihåg:

• kräver inte unik Header text
• lagras i mappen som håller dina temafiler
• körs endast när i den för närvarande aktiverade temaets katalog
• gäller endast det aktuella temat
• kan ringa PHP-funktioner, WordPress-funktioner eller anpassade funktioner

en sak vi behöver dåligt i vårt tema är lite bättre styling! Låt oss skapa en funktion i våra funktioner.php-fil för att inkludera stilen.CSS-fil i vårt tema., Så här kan vi uppnå det målet.

den här koden kommer att innehålla, eller aktivera, stilmallen i vårt anpassade tema. Nu kanske du undrar varför vi använder en anpassad funktion, när det verkar som om vi lika enkelt kunde länka manuellt till stilmallen själva i huvudet.php-fil. Tja, det här handlar om att göra lite mer arbete på framsidan för en större avkastning på din insats senare. Eftersom teman blir mer komplexa och fler tillgångar läggs till, kommer du gärna ha den här funktionen som kan hantera alla tunga lyft för dig.,

nu är det dags att få saker att se lite snyggare ut. Låt oss först lägga till en förpackning <div> med en containerklass. Öppningen <div> kommer att vara i rubrik.<div> kommer att vara i sidfot.php. Vi sätter också in postutgången i index.php med en <artikel> – tagg som har en klass av inlägg. Detta kommer att ge oss klasser att rikta i vår stil.,css-fil så att vi kan ställa in sidbredd bland annat. Vi lägger också till lite bättre styling till stil.css i detta steg.

steg 8: Lägg till lite stil i ditt tema

header.php
lägga till en öppning <div> I rubriken.php-fil.

sidfot.php
lägga till en stängning </div> till sidfoten.php-fil.

index.php
linda in postutgången med en <artikel> tagg

stil.,css
slutligen lägger vi till några olika CSS-stilförbättringar för att få temat att se lite trevligare ut.

När vi besöker vår testwebbplats nu i webbläsaren kan vi se att WordPress-temat som vi har utvecklat steg för steg i den här handledningen ser ganska bra ut!

WordPress tema utveckling handledning steg för steg sammanfattning

låt oss granska allt som vi har lärt oss i denna grundläggande steg för steg WordPress tema handledning för nybörjare., Vi har lärt oss hur man skapar vår första anpassade tema i WordPress genom att göra vår egen mapp i sidan av teman mappen i vår WordPress installation. I den här mappen har vi lagt till olika filer som motsvarar olika delar av din webbplats. I vår handledning har vi börjat med de nakna miniminivåerna du borde ha i ett WordPress-tema. I framtiden skulle du lägga till många fler filer till den här mappen än vad vi har täckt. Låt oss granska varje fil Vi skapade i den här handledningen, och vad de gjorde för oss.

• stil.,css den här filen är där du lägger till några CSS kommentarer så att WordPress vet lite information om din anpassade tema. Det håller också den anpassade CSS styling som du kommer att gälla för ditt tema.
• index.php den här filen styr html och allmänna utdata för ditt tema. Det är huvudfilen som används för att mata ut data på startsidan.
• Huvud.,php kan du ange ett område för att hålla viktig information om din webbplats i <Huvud> område samt inklusive öppna <html>, <kropp> , och<div class=”container”> taggar.
• sidfot.php sidfoten kommer att stänga alla öppningstaggar du angav i rubrikområdet, förutom att ge dig en plats att ringa wp_footer () – funktionen.
• funktioner.,php kan du ringa funktioner, både PHP och inbyggd WordPress, och att definiera dina egna funktioner för att ändra standard beteenden WordPress

Så där har du det! Vi kunde skapa en fullt fungerande Anpassad WordPress tema med endast 5 filer. Detta ger oss grundnivå kunskap för att bygga mer avancerade WordPress Teman och funktioner. Bra Jobbat!