WordPress-temahandledning för nybörjare – Del 2: Mallar
Den här lektionen av WordPress-temahandledningen för nybörjare kommer att lära dig hur du strukturerar de viktigaste byggstenarna i ett tema och börjar skapa mallar. Vi kommer att börja skapa lite HTML-utdata och hur man inkluderar byggstenarna i vårt temas mallar. I föregående steg satte vi upp ett minimum av ett WordPress-tema och aktiverade det. Men just nu gör det inte så mycket, och innehåller inte ens giltig HTML för en webbsida. Låt oss fixa det.
Sidhuvud och sidfot (& sidofält) byggstenar
I våra mallfiler behöver vi giltig HTML. Vi skulle kunna skriva hela HTML-strukturen (som börjar med <html>, <head>och full <body>) i index.php, men detta blir opraktiskt när du underhåller flera mallfiler i ditt tema. Föreställ dig att du har skapat ett gäng mallar och sedan inser att du behöver en liten förändring i rubrikdelen; du skulle då behöva redigera alla mallar så att de förblir konsekventa. Det här är inte smart.
Lösningen är att dela upp hela HTML-strukturen i vettiga delar; byggklossar. Varje block finns i sin egen fil, och när vi behöver dem i en mall inkluderar vi dem. De vanligaste och mest förnuftiga blocken är ett för sidhuvud, ett för sidfot och ett för innehåll, men om ditt tema har en sidofält bör sidofältet också vara en separat byggnad.
De av er som är mer bekanta med PHP är förmodligen bekanta med metoderna include()eller require(). Det är precis vad vi kommer att göra, men vi kommer att använda WordPress funktioner för att inkludera andra filer eftersom de kommer med extra fördelar.
I den här lektionen kommer vi att skapa sidhuvudet, sidfoten och sidofältet som byggstenar. Sidofält har dock blivit mindre och mindre vanliga på webbsidor, men vi kommer fortfarande att implementera en höger sidofält i vårt tema. Dessa tre byggstenar är vanligt förekommande i alla WordPress-teman – och det är faktiskt så vanligt att WordPress erbjuder automatisering för dessa tre saker.
Skapa mallar för sidhuvud, sidfot och sidofält
Låt oss skapa en ny tom fil med namnet header.phpi vår temamapp. Vi kommer att lägga till mycket grundläggande HTML för tillfället (var inte orolig, vi kommer att lägga till mer korrekt HTML senare).
Skapa en ny fil med namnet footer.phpi din temakatalog. Allt vi behöver (för nu) i den här filen är stängningen av vår HTML-struktur.
Och slutligen, skapa en ny tom fil med namnet sidebar.php. Vi lägger bara till HTML-taggen <aside>inuti.
Inklusive byggstenarna
Låt oss återgå till vår index.phpfil. Allt vi behöver göra nu är att berätta för WordPress var vi vill inkludera sidhuvuds- och sidfotsfilen. Självklart vill vi ladda sidhuvudet i början och sidfoten i slutet av den här filen.
WordPress erbjuder enkla funktioner för att inkludera dessa byggstenar; get_header()och get_footer()för sidhuvuds- och sidfotsfilen, respektive. Ganska intuitivt eller hur? Låt oss lägga till dem i vår index.php och se vad som händer.
Uppdatera din frontend och inspektera eller visa HTML-källan för att se att vi har kombinerat flera byggstenar för att skapa en komplett HTML-struktur.
Nu är du fri att redigera innehållet index.phpoberoende av sidhuvudet och sidfoten!
Låt oss ta med sidofältet också. Tänk på att du i ditt tema kanske vill överväga fall och mallar där du inte vill ha sidofältet, till exempel förstasidan.
Att inkludera sidofältet är lika enkelt som sidhuvudet och sidfoten; för detta använder vi get_sidebar(). Låt oss lägga till det i index.php, precis innan vi hämtar sidfoten.
Uppdatera och du bör se HTML-källan inklusive vår <aside>. Oroa dig inte, i ett senare steg lär vi oss hur man konverterar det till ett verkligt sidofältsområde där du kan placera widgets i.
Vårt tema är ganska statiskt just nu. I nästa lektion i denna handledningsserie för WordPress-tema kommer vi äntligen att börja dyka ordentligt in i WordPress-funktioner för att ladda innehåll och information från WordPress dynamiskt i våra mallar.