{"id":233325,"date":"2023-02-11T18:20:00","date_gmt":"2023-02-11T15:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233325"},"modified":"2022-11-10T20:29:32","modified_gmt":"2022-11-10T17:29:32","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-11-mukautetut-sivumallit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-11-mukautetut-sivumallit\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 11: Mukautetut sivumallit"},"content":{"rendered":"\n

T\u00e4ll\u00e4 WordPress-teeman opetusohjelman aloittelijoille oppitunnilla opimme sivumalleista, mit\u00e4 ne ovat, miten niit\u00e4 luodaan ja parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4. Teemme esimerkkin\u00e4 t\u00e4ysleve\u00e4n mallin. Matkan varrella lis\u00e4\u00e4mme my\u00f6s luokan runkoon kysym\u00e4ll\u00e4, k\u00e4ytt\u00e4\u00e4k\u00f6 sivu tietty\u00e4 sivumallia.<\/p>\n

Mit\u00e4 ovat sivumallit<\/h2>\n

Sivumallit ovat hy\u00f6dyllisi\u00e4 tapauksissa, joissa haluat eri asettelun tai asennuksen tietylle sivulle. Yleisi\u00e4 esimerkkej\u00e4 sivupohjien k\u00e4yt\u00f6st\u00e4 ovat viestien luettelointi mukautetussa viestityypiss\u00e4 (esim. portfolio, kirjat tai palvelut), joilla on t\u00e4ysin erilainen sis\u00e4lt\u00f6 tai asettelu (esim. sarakkeiden sis\u00e4ll\u00e4) tai jopa yksinkertaisesti sivun tekeminen t\u00e4ysleve\u00e4ksi (ei sivupalkkia).<\/p>\n

Sivupohjien k\u00e4ytett\u00e4vyys on heikentynyt WordPressin version 5.x (Gutenberg) j\u00e4lkeen. Uusi Gutenberg-editori mahdollistaa suuren joustavuuden t\u00e4llaisten sivujen rakentamisessa ilman sivumalleja. Siit\u00e4 huolimatta opimme lis\u00e4\u00e4m\u00e4\u00e4n mukautetun sivumallin teemaomme.<\/p>\n

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

Sivujen "Page Attributes" -metalaatikon sis\u00e4ll\u00e4 n\u00e4kyy sivumallin valinta. Mallivaihtoehto n\u00e4kyy vain, jos aktiivisessa teemassa on v\u00e4hint\u00e4\u00e4n yksi sivumalli.<\/p>\n

Sivumalleja voidaan itse asiassa k\u00e4ytt\u00e4\u00e4 my\u00f6s viesteiss\u00e4 ja mukautetuissa viestityypeiss\u00e4. WordPress 4.7:n ja sit\u00e4 uudempien versioiden j\u00e4lkeen voit m\u00e4\u00e4ritt\u00e4\u00e4, mille viestityypeille haluat mallin olevan saatavilla. WordPress lis\u00e4\u00e4 automaattisesti vaaditun "Page Attributes" -metalaatikon n\u00e4ihin viestityyppeihin.<\/p>\n

Sivumallin nime\u00e4minen ja sijoittelu<\/h2>\n

Aloita yleens\u00e4 kopiot mist\u00e4 tahansa mallitiedostosta, joka on l\u00e4hinn\u00e4 sit\u00e4, mit\u00e4 haluat saavuttaa sivumallilla. Useimmissa tapauksissa se on page.php<\/code>. Mit\u00e4 tulee sivumallin nime\u00e4miseen, se on tavallaan sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Mutta on joitain s\u00e4\u00e4nt\u00f6j\u00e4 ja maalaisj\u00e4rke\u00e4.<\/p>\n

On houkuttelevaa yksinkertaisesti nimet\u00e4 sivusi malli esim page-books.php<\/code>. mallia varten, jossa luetellaan mukautettuja postaustyyppisi\u00e4 kirjoja. \u00c4l\u00e4 koskaan liit\u00e4 sivumallin etuliitteeseen " page-<\/code>"! Jos muistat WordPressin mallihierarkiasta<\/a>, WordPress etsii page-<slug>.php<\/code>ennen kuin yritt\u00e4\u00e4 page.php<\/code>, ja teemasi k\u00e4ytt\u00e4j\u00e4t voivat kohdata odottamatonta toimintaa.<\/p>\n

Hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 on liitt\u00e4\u00e4 sivumallin eteen jotain, joka ei ole osa WordPressin sivumallien nimi\u00e4. Esimerkiksi " pagetemplate-'<\/code>, " pt-<\/code>" tai yksinkertaisesti vain koko nimi " fullwidth-template.php<\/code>". On my\u00f6s hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 s\u00e4ilytt\u00e4\u00e4 ne alikansiossa; \/page-templates\/<\/code>T\u00e4m\u00e4 ei kuitenkaan ole hyv\u00e4, jos haluat, ett\u00e4 teemasi on k\u00e4ytett\u00e4viss\u00e4 lapsiteemalla. Alatason teema ei voi ohittaa sivumalleja, jotka on sijoitettu p\u00e4\u00e4teeman alikansioon.<\/p>\n

Kun olet p\u00e4\u00e4tt\u00e4nyt nime\u00e4mismallin, siirryt\u00e4\u00e4n eteenp\u00e4in ja luodaan sivumalli.<\/p>\n

Sivumallin luominen<\/h2>\n

Tee kopio page.php<\/code>ja nime\u00e4 se uudelleen muotoon pagetemplate-fullwidth.php<\/code>. Jos haluat tehd\u00e4 siit\u00e4 sivumallin, sinun tarvitsee vain lis\u00e4t\u00e4 heti alkuun kommentti, joka kertoo WordPressille, ett\u00e4 t\u00e4m\u00e4 on sivumalli:<\/p>\n

<?php \n\/*\nTemplate Name: Fullwidth \n*\/\nget_header(); ?>\n<?php \nif (have_posts()) {\n...<\/code><\/pre>\n
Tarvitset vain kommentin aivan tiedoston alussa, jossa on "Mallin nimi: " ja mallin nimi sen j\u00e4lkeen. Se siit\u00e4! Siirry j\u00e4rjestelm\u00e4nvalvojaan, muokkaa sivua ja sinun pit\u00e4isi n\u00e4hd\u00e4 vaihtoehto valita "Fullwidth" malliksi.<\/p>\n
Mainitsin, ett\u00e4 WordPress 4.7:ss\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4, mille viestityypeille haluat sivumallin olevan saatavilla. T\u00e4ll\u00e4 hetkell\u00e4 se on saatavilla vain sivuille, mutta sanotko, ett\u00e4 haluat my\u00f6s mahdollisuuden tehd\u00e4 julkaisuista t\u00e4ysleveit\u00e4? Lis\u00e4\u00e4 siin\u00e4 tapauksessa "Temlate Post Type: " samaan kommenttilohkoon ja m\u00e4\u00e4rit\u00e4 viestityypit pilkulla erotettuina. Esimerkiksi, jotta se olisi saatavilla sek\u00e4 viesteille ett\u00e4 sivuille;<\/p>\n
<?php \n\/*\nTemplate Name: Fullwidth \nTemplate Post Type: post, page\n*\/\nget_header(); ?>\n<?php \nif (have_posts()) {\n...<\/code><\/pre>\n
Muokkaa viesti\u00e4 ja sinun pit\u00e4isi n\u00e4hd\u00e4 uusi metalaatikko "Viestiattribuutit", josta voit valita Fullwidth-mallin. Kiva!<\/p>\n
Koodin muuttaminen sivumallissamme<\/h2>\n
Muokataan nyt sivumallia niin, ett\u00e4 se todella tekee jotain erilaista kuin yhden sivun katselu. Poistetaan sivupalkkimallin pyynt\u00f6: (Kommentoin sit\u00e4, jotta se olisi n\u00e4kyv\u00e4mpi, mutta voit vain poistaa rivin).<\/p>\n
...\n    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?><\/p><?php\n}\n\/\/get_sidebar(); \nget_footer(); ?><\/code><\/pre>\n
Tehd\u00e4\u00e4n viel\u00e4 yksi asia, jotta sivumallimme olisi helpompi muotoilla. Kun lis\u00e4\u00e4t CSS:n, sinun on usein tiedett\u00e4v\u00e4, onko sivulla sivupalkki vai ei, jotta voit s\u00e4\u00e4t\u00e4\u00e4 sarakkeita\/asettelua. Muista body_class<\/code>, mik\u00e4 tarjoaa koko joukon hy\u00f6dyllisi\u00e4 luokkia kehon elementille? Mit\u00e4 jos lis\u00e4isimme runkoon mukautetun luokan, joka kertoo, onko nykyisell\u00e4 sivulla sivupalkki vai ei?<\/p>\n
Suodatin p\u00e4\u00e4ll\u00e4body_class<\/code><\/h2>\n
Huomautus: Olet ehk\u00e4 huomannut, ett\u00e4 jokainen sivu tai viesti, joka k\u00e4ytt\u00e4\u00e4 sivumallia, saa jo tietyn runkoluokan. "page-template-" – esimerkiss\u00e4mme \"page-template-pagetemplate-fullwidth\"<\/code>. Se on melko pitk\u00e4 luokka, ja lis\u00e4ksi haluamme tehd\u00e4 teemastamme joustavamman \u2013 ja sallia t\u00e4yden leveyden muissa malleissa paitsi sivumallipohjaisissa. Et esimerkiksi yleens\u00e4 halua sivupalkkia etusivulle, eik\u00f6 niin?<\/p>\n
Huomautus: T\u00e4m\u00e4 vain lis\u00e4\u00e4 luokan runkoon, joten muotoilu helpottuu, se ei itse asiassa poista sivupalkin l\u00e4ht\u00f6\u00e4 k\u00e4yt\u00f6st\u00e4. Sinun t\u00e4ytyy muistaa poistaa se mist\u00e4 get_sidebar()<\/code>et halua sit\u00e4.<\/p>\n
Lis\u00e4t\u00e4\u00e4n suodatin body_class<\/code>mukautetun sivupalkkiluokan lis\u00e4\u00e4mist\u00e4 varten functions.php<\/code>, jotta voit my\u00f6hemmin lis\u00e4t\u00e4 siihen lis\u00e4\u00e4 muissa tapauksissa, joissa et halua sivupalkkia. WordPressiss\u00e4 on mukava ehdollinen tagi, jolla tarkistetaan, onko sivumalli k\u00e4yt\u00f6ss\u00e4; is_page_template()<\/code>johon laitat sivumallin nimen parametriksi. Haluamme lis\u00e4t\u00e4 luokan, jos t\u00e4m\u00e4 ei ole totta, joten lis\u00e4\u00e4mme k\u00e4\u00e4nteisen sanan "!":<\/p>\n
add_filter('body_class', 'wptutorial_body_class_filter');\nfunction wptutorial_body_class_filter($classes) {\n    if (!is_page_template('pagetemplate-fullwidth.php')) {\n        $classes[] = 'has-sidebar';\n    }\n    return $classes;\n}<\/code><\/pre>\n
Todenn\u00e4k\u00f6isesti, kun kehit\u00e4t malleja, t\u00f6rm\u00e4\u00e4t toisinaan malleihin, joihin et halua lis\u00e4t\u00e4 sivupalkkiluokkaa, ja kun menet lis\u00e4\u00e4m\u00e4\u00e4n ne tapaukset t\u00e4h\u00e4n if<\/code>. Jos esimerkiksi et halua sivupalkkiluokkaa etusivulle, voit lis\u00e4t\u00e4 !is_front_page()<\/code>. T\u00e4m\u00e4 lis\u00e4\u00e4 luokan "has-sidebar" kaikille sivuille paitsi etusivulle ja sivumalliin:<\/p>\n
if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))<\/code><\/pre>\n
On sinun itsest\u00e4si kiinni, kuinka monta sivumallia haluat ja mit\u00e4 niiden tulee sis\u00e4lt\u00e4\u00e4. T\u00e4m\u00e4 oli vain yksinkertainen johdanto. Jos olet kiinnostunut tiedustelemaan muita viestej\u00e4 sivupohjien sis\u00e4ll\u00e4, katso seuraava vaihe<\/a>.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 aloittelijoille tarkoitetussa teematunnissa opimme mukautetuista sivumalleista WordPressiss\u00e4; mit\u00e4 ne ovat, miten ne luodaan ja parhaat k\u00e4yt\u00e4nn\u00f6t.<\/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,1110,834,843,803,803,834,927,843,864,864],"tags":[1166],"class_list":{"0":"post-233325","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-aiheita","8":"category-koodi","9":"category-kehittaejae","12":"category-n-a","13":"category-opas-aloittelijoille","14":"category-opetusohjelmia","15":"category-php-5","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233325","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=233325"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233325\/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=233325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}