{"id":233958,"date":"2023-02-25T12:54:00","date_gmt":"2023-02-25T09:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233958"},"modified":"2022-11-11T13:24:54","modified_gmt":"2022-11-11T10:24:54","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-1-johdanto","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-1-johdanto\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille – Osa 1: Johdanto"},"content":{"rendered":"\n

T\u00e4ll\u00e4 oppitunnilla opit kuinka WordPress lataa sis\u00e4lt\u00f6\u00e4 riippuen siit\u00e4, mill\u00e4 sivulla olet, ja teemamallitiedostojen hierarkian mukaan. Opit my\u00f6s, mit\u00e4 kelvolliseen teemaan tarvitaan. Ja lopuksi luomme teemamme ja aktivoimme sen.<\/p>\n

Teemamallitiedostot<\/h2>\n

Koneen takana WordPress selvitt\u00e4\u00e4, mik\u00e4 malli ladataan URL-osoitteesi perusteella. Jos WordPress on asennettu verkkotunnukseen "example.com\/wordpress\/", sinun pit\u00e4isi n\u00e4hd\u00e4 etusivun malli. Siirrytt\u00e4ess\u00e4 osoitteeseen "example.com\/wordpress\/category\/news\/" saat oletuksena luettelon uutiskategoriaan kuuluvista viesteist\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 luokkamallia.<\/p>\n

WordPress noudattaa hierarkiaa siit\u00e4, mitk\u00e4 mallit ladataan ja mink\u00e4 mallin se valitsee riippuen siit\u00e4, mit\u00e4 malleja sinulla on teemassasi. Esimerkiksi "example.com\/wordpress\/category\/news" WordPress etsii ensin mallia, joka on luokkaa "uutiset". Jos sit\u00e4 ei l\u00f6ydy, WordPress etsii luokkatunnukselle ominaista mallia. J\u00e4lleen, jos sit\u00e4 ei l\u00f6ydy, WordPress etsii yleisen luokan mallia. Jos sit\u00e4 ei l\u00f6ydy, WordPress etsii viel\u00e4 yleisemm\u00e4n mallin arkistoja varten. Ja niin edelleen.<\/p>\n

WordPress Codex, joka on WordPressin dokumentaatiosivusto, pit\u00e4\u00e4 hy\u00f6dyllisen ja p\u00e4ivitetyn kuvan, joka havainnollistaa teemamallitiedostojen hierarkiaa; https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file<\/a><\/p>\n

\u00c4l\u00e4 huoli, jos kuva n\u00e4ytt\u00e4\u00e4 aluksi liian h\u00e4mment\u00e4v\u00e4lt\u00e4! Kun etenemme opetusohjelmassa, huomaat palaamassa t\u00e4h\u00e4n kuvaan l\u00f6yt\u00e4\u00e4ksesi, mit\u00e4 malleja haluat ottaa k\u00e4ytt\u00f6\u00f6n teemassasi.<\/p>\n

Voit lukea kuvan siirtym\u00e4ll\u00e4 vasemmalta oikealle. Sen perusteella, mill\u00e4 sivulla olet, mallit ovat hyvin tarkkoja, ja mit\u00e4 enemm\u00e4n etenet oikealle puolelle, sit\u00e4 yleisempi\u00e4 mallit ovat. Viimeinen varmistus on oikeanpuoleisin; index.php<\/code>, joka ladataan, jos muita sovitusmalleja ei l\u00f6ydy.<\/p>\n

Kaikkien yll\u00e4 olevassa kuvassa lueteltujen mallitiedostojen on sijaittava teemasi juurikansiossa, ja ne on nimett\u00e4v\u00e4 tarkasti ilmoitetulla tavalla. Et voi sijoittaa malleja alikansioihin organisatorisia tarkoituksia varten, koska silloin WordPress ei l\u00f6yd\u00e4 niit\u00e4!<\/p>\n

Aloitamme yksinkertaisesta! T\u00e4n\u00e4\u00e4n luomme vain muutamia tiedostoja, joita WordPress tarvitsee tunnistaakseen sen teemaksi, ja laajennamme sitten sielt\u00e4.<\/p>\n

WordPress-teeman anatomia<\/h2>\n

Tarvitset vain kaksi tiedostoa kelvollisen WordPress-teeman luomiseen.<\/p>\n

Huomasitko mallihierarkian havainnollistamisessa \u00e4\u00e4rioikeiston; kutsutaan index.php<\/code>? T\u00e4m\u00e4 on viimeinen varamalli, jos WordPress ei l\u00f6yd\u00e4 mallia. Se on yksi vaadituista tiedostoista. Toinen tiedosto on tyylitaulukkotiedosto (.css<\/code>). Siin\u00e4 ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 tarvitse olla CSS:\u00e4\u00e4, mutta sen t\u00e4ytyy sis\u00e4lt\u00e4\u00e4 kommenttilohko, joka tarjoaa WordPress-tietoa teemastasi. N\u00e4m\u00e4 kaksi asiaa ovat kaikki mit\u00e4 tarvitset kelvolliseen WordPress-teemaan.<\/p>\n

Luodaan teemamme luomalla n\u00e4m\u00e4 kaksi tiedostoa!<\/p>\n

Ensimm\u00e4isen teemasi luominen<\/h2>\n

Kaikkien teemojen on oltava jokaisessa erillisess\u00e4 kansiossa alikansion sis\u00e4ll\u00e4 \/wp-content\/themes\/<\/code>. Jos siirryt t\u00e4h\u00e4n kansioon tiedostonavigaattorissa, n\u00e4et todenn\u00e4k\u00f6isesti jo muutaman teemakansion t\u00e4\u00e4ll\u00e4; Kaksikymment\u00e4yhdeks\u00e4ntoista, kaksikymment\u00e4seitsem\u00e4ntoista jne. N\u00e4m\u00e4 ovat teemoja, jotka sis\u00e4ltyv\u00e4t WordPressiin oletuksena.<\/p>\n

Luo \/wp-content\/themes\/<\/code>uusi kansio kohteessa. Nime\u00e4 se asianmukaisesti (pienet kirjaimet, ei v\u00e4lily\u00f6ntej\u00e4, ei sama kuin mik\u00e4\u00e4n muu kansio). Yleens\u00e4 kansion nimi on slug-versio teemasi nimest\u00e4. T\u00e4t\u00e4 opetusohjelmaa varten annan teemakansiolleni nimen " wptutorial<\/code>".<\/p>\n

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

Kirjoita teemakansiosi ja luo uusi, tyhj\u00e4 tiedosto nimelt\u00e4 index.php<\/code>. Muokkasin tiedostoa ja lis\u00e4sin vain satunnaista teksti\u00e4, jotta n\u00e4emme helpommin, kun se on k\u00e4yt\u00f6ss\u00e4:<\/p>\n

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

Olemme jo puoliv\u00e4liss\u00e4! Luodaan toinen vaadittu tiedosto. Luo teemakansioosi uusi, tyhj\u00e4 tiedosto nimelt\u00e4 style.css<\/code>.<\/p>\n

Avaa style.css<\/code>tiedosto ja aloita v\u00e4litt\u00f6m\u00e4sti kommenttilohko (\/*<\/code>ja sulje se -painikkeella *\/<\/code>). T\u00e4m\u00e4n kommenttilohkon sis\u00e4ll\u00e4 meid\u00e4n on noudatettava joitain WordPressin s\u00e4\u00e4nt\u00f6j\u00e4 teemamme m\u00e4\u00e4rittelemisess\u00e4. V\u00e4hint\u00e4\u00e4n meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 teemamme nimi. Mutta voimme my\u00f6s lis\u00e4t\u00e4 tietoja kirjoittajasta, kotisivun, versionumeron, lisenssitiedot ja paljon muuta. Katso WordPress-dokumentaatio siit\u00e4, mit\u00e4 voit lis\u00e4t\u00e4<\/a>.<\/p>\n

T\u00e4ss\u00e4 opetusohjelmassa pid\u00e4mme sen yksinkertaisena; lis\u00e4\u00e4mme teeman nimen ja kirjoitat oman nimesi tekij\u00e4ksi. Voit menn\u00e4 eteenp\u00e4in ja k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa nimi\u00e4, joita haluat, olen kirjoittanut t\u00e4h\u00e4n style.css<\/code>:<\/p>\n

\/* \nTheme Name: A White Pixel Theme \nAuthor: Alex White \n*\/<\/code><\/pre>\n
Tallenna ja sulje tiedosto (t\u00e4m\u00e4 opetusohjelma ei kosketa t\u00e4t\u00e4 tiedostoa uudelleen), ellet halua kirjoittaa CSS:\u00e4\u00e4 teemaasi varten.<\/p>\n
Onnittelut! Olet nyt luonut kelvollisen WordPress-teeman!<\/p>\n
Aktivoidaan teemaasi<\/h2>\n
Siirryt\u00e4\u00e4n WordPressin hallintapaneeliin ja siirryt\u00e4\u00e4n kohtaan "Ulkoasu > Teemat" ja katsotaan, l\u00f6yd\u00e4mmek\u00f6 teemamme sielt\u00e4.<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Napsauta Aktivoi-painiketta ja siirry sivustollesi. Sinun pit\u00e4isi n\u00e4hd\u00e4 mit\u00e4 kirjoitit index.php<\/code>!<\/p>\n
T\u00e4t\u00e4 index.php<\/code>mallia k\u00e4ytet\u00e4\u00e4n riippumatta siit\u00e4, mill\u00e4 sivulla olet. Yrit\u00e4 katsoa yksitt\u00e4inen viesti, niin n\u00e4et saman. Teemassa tulisi olla v\u00e4hint\u00e4\u00e4n 5\u201310 mallia eri sis\u00e4ll\u00f6n k\u00e4sittelemiseksi. \u00c4l\u00e4 huoli, me p\u00e4\u00e4semme perille.<\/p>\n
Mahtavaa, meill\u00e4 on teema! Seuraavalla oppitunnilla alamme itse koodata sit\u00e4 ja saada sen tekem\u00e4\u00e4n asioita.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ll\u00e4 oppitunnilla opimme perusteet siit\u00e4, miten WordPress-teema lataa sis\u00e4lt\u00f6\u00e4, mit\u00e4 tarvitaan kelvolliseen teemaan \u2013 ja luomme ensimm\u00e4isen teemamme!<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[927,895,719,719,895,917,917,1110,834,843,834,927,843,864,864],"tags":[1166],"class_list":["post-233958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aiheita","category-koodi","category-kehittaejae","category-muut","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233958"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}