{"id":233564,"date":"2023-02-17T20:35:00","date_gmt":"2023-02-17T17:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233564"},"modified":"2022-11-11T00:21:52","modified_gmt":"2022-11-10T21:21:52","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-2-mallit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-2-mallit\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 2: Mallit"},"content":{"rendered":"\n

T\u00e4m\u00e4 WordPress-teeman opetusohjelman aloittelijoille oppitunti opettaa sinulle, kuinka voit j\u00e4sent\u00e4\u00e4 teeman p\u00e4\u00e4rakennuspalikoita ja aloittaa mallien luomisen. Aloitamme HTML-tulosteen luomisen ja rakennuspalikoiden sis\u00e4llytt\u00e4misen teemamme malleihin. Edellisess\u00e4 vaiheessa<\/a> m\u00e4\u00e4ritimme WordPress-teeman v\u00e4himm\u00e4ism\u00e4\u00e4r\u00e4n ja aktivoimme sen. Mutta t\u00e4ll\u00e4 hetkell\u00e4 se ei toimi kovinkaan paljon, eik\u00e4 se edes sis\u00e4ll\u00e4 kelvollista HTML-koodia verkkosivulle. Korjataan se.<\/p>\n

Yl\u00e4- ja alatunnisteen (ja sivupalkin) rakennuspalikoita<\/h2>\n

Mallitiedostoissamme tarvitsemme kelvollisen HTML:n. Voisimme kirjoittaa t\u00e4ydellisen HTML-rakenteen (alkaen kirjaimella <html><\/code>, <head><\/code>ja koko <body><\/code>) kielell\u00e4 index.php<\/code>, mutta t\u00e4st\u00e4 tulee ep\u00e4k\u00e4yt\u00e4nn\u00f6llist\u00e4, kun yll\u00e4pidet\u00e4\u00e4n useita mallitiedostoja teemassasi. Kuvittele, ett\u00e4 olet luonut joukon malleja ja huomaa sitten, ett\u00e4 tarvitset pienen muutoksen otsikkoosaan. sinun on sitten muokattava kaikkia malleja, jotta ne pysyv\u00e4t johdonmukaisina. T\u00e4m\u00e4 ei ole \u00e4lyk\u00e4st\u00e4.<\/p>\n

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

Ratkaisu on jakaa koko HTML-rakenne j\u00e4rkeviin osiin; rakennuspalikoita. Jokainen lohko on omassa tiedostossaan, ja aina kun tarvitsemme niit\u00e4 malliin, sis\u00e4llyt\u00e4mme ne. Yleisimm\u00e4t ja j\u00e4rkevimm\u00e4t lohkot ovat yksi yl\u00e4tunnisteelle, yksi alatunnisteelle ja yksi sis\u00e4ll\u00f6lle, mutta jos teemassasi on sivupalkki, my\u00f6s sivupalkin tulisi olla erillinen rakennus.<\/p>\n

Ne teist\u00e4, jotka tuntevat PHP:n paremmin, tuntevat todenn\u00e4k\u00f6isesti menetelm\u00e4t include()<\/code>tai require()<\/code>. Teemme juuri n\u00e4in, mutta k\u00e4yt\u00e4mme WordPressin toimintoja muiden tiedostojen sis\u00e4llytt\u00e4miseen, koska niill\u00e4 on lis\u00e4etuja.<\/p>\n

T\u00e4ll\u00e4 oppitunnilla luomme yl\u00e4tunnisteen, alatunnisteen ja sivupalkin rakennuspalikoihin. Sivupalkit ovat kuitenkin v\u00e4hentyneet verkkosivuilla, mutta otamme silti k\u00e4ytt\u00f6\u00f6n oikean sivupalkin teemassamme. N\u00e4m\u00e4 kolme rakennusosaa ovat yleinen k\u00e4yt\u00e4nt\u00f6 kaikissa WordPress-teemoissa \u2013 ja se on itse asiassa niin yleist\u00e4, ett\u00e4 WordPress tarjoaa automaation n\u00e4ihin kolmeen asiaan.<\/p>\n

Yl\u00e4-, alatunniste- ja sivupalkkimallien luominen<\/h2>\n

Luodaan uusi tyhj\u00e4 tiedosto nimelt\u00e4 header.php<\/code>teemakansioomme. Lis\u00e4\u00e4mme toistaiseksi hyvin perus-HTML-koodia (\u00e4l\u00e4 huoli, lis\u00e4\u00e4mme oikeaa HTML-koodia my\u00f6hemmin).<\/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
Luo uusi tiedosto nimelt\u00e4 footer.php<\/code>teemahakemistosi. Tarvitsemme (toistaiseksi) t\u00e4ss\u00e4 tiedostossa vain HTML-rakenteen sulkemisen.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Ja lopuksi luo uusi tyhj\u00e4 tiedosto nimelt\u00e4 sidebar.php<\/code>. Lis\u00e4\u00e4mme <aside><\/code>sis\u00e4\u00e4n vain HTML-tunnisteen.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Mukaan lukien rakennuspalikat<\/h2>\n
Palataan index.php<\/code>tiedostoomme. Meid\u00e4n tarvitsee nyt vain kertoa WordPressille, mihin haluamme sis\u00e4llytt\u00e4\u00e4 yl\u00e4- ja alatunnistetiedoston. Ilmeisesti haluamme ladata otsikon t\u00e4m\u00e4n tiedoston alkuun ja alatunnisteen aivan loppuun.<\/p>\n
WordPress tarjoaa yksinkertaisia \u200b\u200btoimintoja n\u00e4iden rakennuspalikoiden sis\u00e4llytt\u00e4miseen; get_header()<\/code>ja get_footer()<\/code>vastaavasti yl\u00e4- ja alatunnistetiedostolle. Aika intuitiivista eik\u00f6? Lis\u00e4t\u00e4\u00e4n ne index.php-tiedostoomme ja katsotaan mit\u00e4 tapahtuu.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
P\u00e4ivit\u00e4 k\u00e4ytt\u00f6liittym\u00e4si ja tarkasta tai tarkastele HTML-l\u00e4hdett\u00e4 n\u00e4hd\u00e4ksesi, ett\u00e4 olemme yhdist\u00e4neet useita rakennuspalikoita t\u00e4ydelliseksi HTML-rakenteeksi.<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Nyt voit vapaasti muokata sis\u00e4ll\u00f6n index.php<\/code>yl\u00e4- ja alatunnisteesta riippumatta!<\/p>\n
Otetaan mukaan my\u00f6s sivupalkki. Muista, ett\u00e4 teemassasi kannattaa harkita tapauksia ja malleja, joissa et halua sivupalkkia, esimerkiksi etusivulle.<\/p>\n
Sivupalkin sis\u00e4llytt\u00e4minen on yht\u00e4 helppoa kuin yl\u00e4- ja alatunniste; t\u00e4t\u00e4 varten k\u00e4yt\u00e4mme get_sidebar()<\/code>. Lis\u00e4t\u00e4\u00e4n se index.php:hen juuri ennen alatunnisteen saamista.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
P\u00e4ivit\u00e4 ja sinun pit\u00e4isi n\u00e4hd\u00e4 HTML-l\u00e4hdekoodi, mukaan lukien meid\u00e4n <aside><\/code>. \u00c4l\u00e4 huoli, my\u00f6hemm\u00e4ss\u00e4 vaiheessa opimme muuttamaan sen todelliseksi sivupalkkialueeksi, johon voit sijoittaa widgetej\u00e4.<\/p>\n
Teemamme on t\u00e4ll\u00e4 hetkell\u00e4 melko staattinen. T\u00e4m\u00e4n WordPress-teeman opetussarjan seuraavalla oppitunnilla<\/a> alamme vihdoin sukeltaa kunnolla WordPressin toimintoihin, jotta voimme ladata sis\u00e4lt\u00f6\u00e4 ja tietoja WordPressist\u00e4 dynaamisesti malleihimme.<\/p>\n
Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n