{"id":233546,"date":"2023-02-17T20:30:00","date_gmt":"2023-02-17T17:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233546"},"modified":"2022-11-11T00:16:46","modified_gmt":"2022-11-10T21:16:46","slug":"wordpress-temahandledning-foer-nyboerjare-del-2-mallar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-temahandledning-foer-nyboerjare-del-2-mallar\/","title":{"rendered":"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 2: Mallar"},"content":{"rendered":"\n

Den h\u00e4r lektionen av WordPress-temahandledningen f\u00f6r nyb\u00f6rjare kommer att l\u00e4ra dig hur du strukturerar de viktigaste byggstenarna i ett tema och b\u00f6rjar skapa mallar. Vi kommer att b\u00f6rja skapa lite HTML-utdata och hur man inkluderar byggstenarna i v\u00e5rt temas mallar. I f\u00f6reg\u00e5ende steg<\/a> satte vi upp ett minimum av ett WordPress-tema och aktiverade det. Men just nu g\u00f6r det inte s\u00e5 mycket, och inneh\u00e5ller inte ens giltig HTML f\u00f6r en webbsida. L\u00e5t oss fixa det.<\/p>\n

Sidhuvud och sidfot (& sidof\u00e4lt) byggstenar<\/h2>\n

I v\u00e5ra mallfiler beh\u00f6ver vi giltig HTML. Vi skulle kunna skriva hela HTML-strukturen (som b\u00f6rjar med <html><\/code>, <head><\/code>och full <body><\/code>) i index.php<\/code>, men detta blir opraktiskt n\u00e4r du underh\u00e5ller flera mallfiler i ditt tema. F\u00f6rest\u00e4ll dig att du har skapat ett g\u00e4ng mallar och sedan inser att du beh\u00f6ver en liten f\u00f6r\u00e4ndring i rubrikdelen; du skulle d\u00e5 beh\u00f6va redigera alla mallar s\u00e5 att de f\u00f6rblir konsekventa. Det h\u00e4r \u00e4r inte smart.<\/p>\n

\"WordPress-temahandledning<\/a><\/p>\n

L\u00f6sningen \u00e4r att dela upp hela HTML-strukturen i vettiga delar; byggklossar. Varje block finns i sin egen fil, och n\u00e4r vi beh\u00f6ver dem i en mall inkluderar vi dem. De vanligaste och mest f\u00f6rnuftiga blocken \u00e4r ett f\u00f6r sidhuvud, ett f\u00f6r sidfot och ett f\u00f6r inneh\u00e5ll, men om ditt tema har en sidof\u00e4lt b\u00f6r sidof\u00e4ltet ocks\u00e5 vara en separat byggnad.<\/p>\n

De av er som \u00e4r mer bekanta med PHP \u00e4r f\u00f6rmodligen bekanta med metoderna include()<\/code>eller require()<\/code>. Det \u00e4r precis vad vi kommer att g\u00f6ra, men vi kommer att anv\u00e4nda WordPress funktioner f\u00f6r att inkludera andra filer eftersom de kommer med extra f\u00f6rdelar.<\/p>\n

I den h\u00e4r lektionen kommer vi att skapa sidhuvudet, sidfoten och sidof\u00e4ltet som byggstenar. Sidof\u00e4lt har dock blivit mindre och mindre vanliga p\u00e5 webbsidor, men vi kommer fortfarande att implementera en h\u00f6ger sidof\u00e4lt i v\u00e5rt tema. Dessa tre byggstenar \u00e4r vanligt f\u00f6rekommande i alla WordPress-teman \u2013 och det \u00e4r faktiskt s\u00e5 vanligt att WordPress erbjuder automatisering f\u00f6r dessa tre saker.<\/p>\n

Skapa mallar f\u00f6r sidhuvud, sidfot och sidof\u00e4lt<\/h2>\n

L\u00e5t oss skapa en ny tom fil med namnet header.php<\/code>i v\u00e5r temamapp. Vi kommer att l\u00e4gga till mycket grundl\u00e4ggande HTML f\u00f6r tillf\u00e4llet (var inte orolig, vi kommer att l\u00e4gga till mer korrekt HTML senare).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Skapa en ny fil med namnet footer.php<\/code>i din temakatalog. Allt vi beh\u00f6ver (f\u00f6r nu) i den h\u00e4r filen \u00e4r st\u00e4ngningen av v\u00e5r HTML-struktur.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Och slutligen, skapa en ny tom fil med namnet sidebar.php<\/code>. Vi l\u00e4gger bara till HTML-taggen <aside><\/code>inuti.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Inklusive byggstenarna<\/h2>\n
L\u00e5t oss \u00e5terg\u00e5 till v\u00e5r index.php<\/code>fil. Allt vi beh\u00f6ver g\u00f6ra nu \u00e4r att ber\u00e4tta f\u00f6r WordPress var vi vill inkludera sidhuvuds- och sidfotsfilen. Sj\u00e4lvklart vill vi ladda sidhuvudet i b\u00f6rjan och sidfoten i slutet av den h\u00e4r filen.<\/p>\n
WordPress erbjuder enkla funktioner f\u00f6r att inkludera dessa byggstenar; get_header()<\/code>och get_footer()<\/code>f\u00f6r sidhuvuds- och sidfotsfilen, respektive. Ganska intuitivt eller hur? L\u00e5t oss l\u00e4gga till dem i v\u00e5r index.php och se vad som h\u00e4nder.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Uppdatera din frontend och inspektera eller visa HTML-k\u00e4llan f\u00f6r att se att vi har kombinerat flera byggstenar f\u00f6r att skapa en komplett HTML-struktur.<\/p>\n
\"WordPress-temahandledning<\/a><\/p>\n
Nu \u00e4r du fri att redigera inneh\u00e5llet index.php<\/code>oberoende av sidhuvudet och sidfoten!<\/p>\n
L\u00e5t oss ta med sidof\u00e4ltet ocks\u00e5. T\u00e4nk p\u00e5 att du i ditt tema kanske vill \u00f6verv\u00e4ga fall och mallar d\u00e4r du inte vill ha sidof\u00e4ltet, till exempel f\u00f6rstasidan.<\/p>\n
Att inkludera sidof\u00e4ltet \u00e4r lika enkelt som sidhuvudet och sidfoten; f\u00f6r detta anv\u00e4nder vi get_sidebar()<\/code>. L\u00e5t oss l\u00e4gga till det i index.php, precis innan vi h\u00e4mtar sidfoten.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Uppdatera och du b\u00f6r se HTML-k\u00e4llan inklusive v\u00e5r <aside><\/code>. Oroa dig inte, i ett senare steg l\u00e4r vi oss hur man konverterar det till ett verkligt sidof\u00e4ltsomr\u00e5de d\u00e4r du kan placera widgets i.<\/p>\n
V\u00e5rt tema \u00e4r ganska statiskt just nu. I n\u00e4sta lektion<\/a> i denna handledningsserie f\u00f6r WordPress-tema kommer vi \u00e4ntligen att b\u00f6rja dyka ordentligt in i WordPress-funktioner f\u00f6r att ladda inneh\u00e5ll och information fr\u00e5n WordPress dynamiskt i v\u00e5ra mallar.<\/p>\n
Dokumentation om anv\u00e4nda metoder<\/h2>\n