{"id":233698,"date":"2023-02-21T13:04:00","date_gmt":"2023-02-21T10:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233698"},"modified":"2022-11-11T08:55:40","modified_gmt":"2022-11-11T05:55:40","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-7-teeman-asetukset-ja-suositellut-kuvat","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-7-teeman-asetukset-ja-suositellut-kuvat\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 7: Teeman asetukset ja suositellut kuvat"},"content":{"rendered":"\n

T\u00e4m\u00e4 WordPress-teeman opetusohjelman oppitunti aloittelijoille jatkuu lis\u00e4\u00e4m\u00e4ll\u00e4 teeman m\u00e4\u00e4ritt\u00e4miseen tarvittavan peruskoodin. Opimme lis\u00e4\u00e4m\u00e4\u00e4n teematukea, ja sen seurauksena WordPressin esitelty kuvatoiminto aktivoituu. T\u00e4ll\u00e4 oppitunnilla korjaamme my\u00f6s etusivun otsikon k\u00e4ytt\u00e4m\u00e4ll\u00e4 ensimm\u00e4ist\u00e4 suodatinta.<\/p>\n

Ty\u00f6skentelemme enimm\u00e4kseen functions.php<\/code>tiedostossa, jonka lis\u00e4simme edellisell\u00e4 oppitunnilla<\/a>. Lopuksi lis\u00e4\u00e4mme koodin esiteltyjen kuvien tulostamiseksi malleihimme.<\/p>\n

Teeman asetukset<\/h2>\n

Kaikki teemat tarvitsevat koodin sen m\u00e4\u00e4ritt\u00e4miseksi k\u00e4skem\u00e4ll\u00e4 WordPressi\u00e4 aktivoimaan tietyt toiminnot. T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 valikoiden, widgetien, k\u00e4\u00e4nn\u00f6sten ja niin edelleen aktivoimisen. T\u00e4m\u00e4 tehd\u00e4\u00e4n yleens\u00e4 "asennusteematoiminnossa", joka on yleens\u00e4 kiinnitetty k\u00e4tev\u00e4sti nimettyyn koukkuun after_setup_theme<\/code>. Joihinkin tiettyihin asioihin meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 WordPressin alustuskoukkua nimelt\u00e4 init<\/code>.<\/p>\n

Tarvittavan teeman asetuskoodin kirjoittaminenafter_setup_theme<\/code><\/h3>\n

Asetetaan t\u00e4llainen "teeman m\u00e4\u00e4ritystoiminto" -sovellukseemme functions.php<\/code>, joka on koukussa after_setup_theme<\/code>:<\/p>\n

add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n
T\u00e4m\u00e4n toiminnon sis\u00e4\u00e4n lis\u00e4\u00e4mme joukon yleisi\u00e4 ja hy\u00f6dyllisi\u00e4 asennustoimintoja WordPress-teemoihin. Aseta kaikki seuraavat koodikappaleet asetustoimintoon.<\/p>\n
Ensin meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 kuvien ja upotusten (kuten videoiden) enimm\u00e4isleveys. T\u00e4m\u00e4 varmistaa, ett\u00e4 kun kirjoittajat lis\u00e4\u00e4v\u00e4t suuria kuvia viesteihin, kuvat pysyv\u00e4t tietyn leveyden sis\u00e4ll\u00e4. Asetin sen 840 pikseliin (koska haluan tilaa sivupalkille), mutta voit s\u00e4\u00e4t\u00e4\u00e4 t\u00e4t\u00e4 haluamallasi tavalla.<\/p>\n
$GLOBALS['content_width'] = 840;<\/code><\/pre>\n
Meid\u00e4n tulee my\u00f6s ilmoittaa WordPressille, ett\u00e4 teema on k\u00e4\u00e4nnett\u00e4v\u00e4 ja mist\u00e4 se voi etsi\u00e4 k\u00e4\u00e4nn\u00f6stiedostoja. Siirryn WordPress-teeman k\u00e4\u00e4nt\u00e4miseen yksityiskohtaisesti t\u00e4m\u00e4n teema-opetussarjan seuraavassa vaiheessa .<\/a><\/p>\n
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\n
Huomaa uuden toiminnon k\u00e4ytt\u00f6 teemahakemiston saamiseksi, get_stylesheet_directory()<\/code>. T\u00e4m\u00e4 on hyvin samanlainen kuin get_stylesheet_directory_uri()<\/code>viimeisess\u00e4 vaiheessa, mutta t\u00e4ss\u00e4 tarvitsemme suhteellisen polun, ei URL-osoitetta.<\/p>\n
Sitten meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 joitain "teematukea", jotka aktivoivat WordPressin toimintoja, joita ei ole aktivoitu oletuksena.<\/p>\n
add_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n    'search-form',\n    'comment-form',\n    'comment-list',\n    'gallery',\n    'caption',\n]);\nadd_theme_support('custom-logo', [\n    'height'      => 100,\n    'width'       => 300,\n    'flex-width'  => true,\n    'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\n
Se oli koko joukko add_theme_support<\/code>puheluita! Kuten nimest\u00e4 voi p\u00e4\u00e4tell\u00e4, add_theme_support<\/code>k\u00e4skee WordPressi\u00e4 aktivoimaan ominaisuuksia, joita ei ole aktivoitu oletusarvoisesti. Esimerkiksi esitellyt kuvat (’post-thumbnails’), tuki HTML5-tageille ja WordPressin mukautettu logoominaisuus Customizerissa (s\u00e4\u00e4d\u00e4 haluttua logokuvaa, jos haluat!).<\/p>\n
Tarjolla on monia muita hienoja ominaisuuksia, joten suosittelen tutustumaan add_theme_supportin dokumentaatioon<\/a>. Esimerkiksi siell\u00e4 on melko uusi, title-tag<\/code>, joka k\u00e4sittelee otsikkotunnisteen. Olen j\u00e4tt\u00e4nyt sen pois t\u00e4st\u00e4 opetusohjelmasta, koska olemme jo lis\u00e4nneet otsikkotunnisteen header.php<\/code>manuaalisesti.<\/p>\n
Muista, ett\u00e4 jos lis\u00e4\u00e4t tuen tiedostolle title-tag<\/code>, sinun tulee poistaa otsikkotunniste otsikkotiedostostasi, jotta et saa p\u00e4\u00e4llekk\u00e4isi\u00e4 otsikkotunnisteita.<\/p>\n
Lopuksi lis\u00e4\u00e4mme muutaman add_theme_support<\/code>uuden Gutenbergin WordPressiss\u00e4. Lis\u00e4\u00e4mme tuen leveille osiolle, aktivoivat lohkotyylien toiminnallisuuden ja tuen responsiivisille upotuksille:<\/p>\n
add_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\n
Lopputulos<\/h3>\n
T\u00e4ss\u00e4 on viimeinen asennustoiminto functions.php<\/code>:<\/p>\n
add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n    $GLOBALS['content_width'] = 840;\n    \/\/ Make your theme ready for translation\n    load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n    \/\/ Add theme support for WordPress functionality\n    add_theme_support('automatic-feed-links');\n    add_theme_support('title-tag');\n    add_theme_support('post-thumbnails');\n    add_theme_support('html5', [\n        'search-form',\n        'comment-form',\n        'comment-list',\n        'gallery',\n        'caption',\n    ]);\n    add_theme_support('custom-logo', [\n        'height'      => 100,\n        'width'       => 300,\n        'flex-width'  => true,\n        'flex-height' => false,\n    ]);\n    add_theme_support('customize-selective-refresh-widgets');\n    \/\/ Add theme support for Gutenberg specific functionality\n    add_theme_support('wp-block-styles');\n    add_theme_support('align-wide');\n    add_theme_support('responsive-embeds');\n}<\/code><\/pre>\n
Tallentamisen j\u00e4lkeen sinun pit\u00e4isi nyt pysty\u00e4 lis\u00e4\u00e4m\u00e4\u00e4n suositeltuja kuvia j\u00e4rjestelm\u00e4nvalvojan viesteihin! Lis\u00e4t\u00e4\u00e4n viel\u00e4 yksi teemakorjaus, functions.php<\/code>ennen kuin lis\u00e4\u00e4mme esittelykuvia malleihimme. muistatko, ett\u00e4 wp_title<\/code>oletuksena header.php<\/code>ei voi kaikua mit\u00e4\u00e4n etusivulla? Korjataan se.<\/p>\n
Suodattimen lis\u00e4\u00e4minenwp_title<\/code><\/h2>\n
Lis\u00e4t\u00e4\u00e4n ensimm\u00e4inen oikea suodattimen muokkaustoiminto k\u00e4ytt\u00e4m\u00e4ll\u00e4 add_filter()<\/code>. Suodattimella, johon liit\u00e4mme, on sama nimi kuin funktiolla, jota k\u00e4ytimme WordPressiss\u00e4 sivun otsikon dynaamiseen hakemiseen; wp_title<\/code>. Korjaamme sen, ett\u00e4 otsikko ei ole tyhj\u00e4 etusivulla \u2013 mik\u00e4 on oletusarvo WordPressiss\u00e4. Kun olemme etusivulla, haluamme, ett\u00e4 se t\u00e4ytet\u00e4\u00e4n WordPress-sivuston nimell\u00e4.<\/p>\n
Muista aina palauttaa<\/strong> suodatettu muuttuja suodatinfunktioissasi! Kaikki suodattimet muokkaavat muuttujaa, ja jos et palauta mit\u00e4\u00e4n, muuttujasta tulee m\u00e4\u00e4rittelem\u00e4t\u00f6n. T\u00e4m\u00e4 voi aiheuttaa paljon ongelmia. Jos haluat lis\u00e4tietoja suodattimista, katso viesti\u00e4ni, joka selitt\u00e4\u00e4 kaiken koukuista ja suodattimista<\/a>.<\/p>\n
Tiet\u00e4\u00e4, milloin otsikkoa tulee muokata<\/h3>\n
Haluamme muokata otsikkomuuttujaa vain, jos olemme etusivulla. Haluamme j\u00e4tt\u00e4\u00e4 sen kaikille muille sivuille (palauta se sellaisenaan). Mutta mist\u00e4 tied\u00e4mme, milloin olemme etusivulla?<\/p>\n
Voimme hy\u00f6dynt\u00e4\u00e4 WordPressin ehdollisia tageja<\/a>, jotka ovat koko joukko hy\u00f6dyllisi\u00e4 toimintoja, jotka palauttavat tosi tai ep\u00e4tosi ehdon perusteella. N\u00e4it\u00e4 k\u00e4ytet\u00e4\u00e4n yleisimmin kysym\u00e4\u00e4n, olemmeko tietyll\u00e4 sivulla tai mallissa. Voimme vain kysy\u00e4 "Olemmeko etusivulla?". Jos t\u00e4m\u00e4 menetelm\u00e4 palauttaa true, vain silloin muokkaamme otsikkomuuttujaa.<\/p>\n
On syyt\u00e4 huomata, ett\u00e4 etusivulla on kaksi ehdollista tagia, nimitt\u00e4in is_home()<\/code>ja is_front_page().<\/code>N\u00e4m\u00e4 vaihtelevat "Luku"-asetuksen mukaan \u2013 onko etusivullasi uusimmat viestit vai onko se asetettu kiinte\u00e4lle sivulle. Jos seuraat t\u00e4t\u00e4 opetusohjelmaa upouudella WordPress-asennuksella oletusasetuksilla, k\u00e4yt\u00e4t is_front_page()<\/code>.<\/p>\n
WordPress-sivuston nimen saaminen<\/h3>\n
Nyt tied\u00e4mme, mit\u00e4 suodatinta k\u00e4ytet\u00e4\u00e4n ja kuinka varmistaa, ett\u00e4 muutamme otsikkoa vain, jos olemme oikeassa paikassa. Mutta mik\u00e4 otsikon pit\u00e4isi olla? Yleens\u00e4 etusivun sivun otsikko on WordPress-sivustosi nimi. Mutta miten saamme t\u00e4m\u00e4n tiedon?<\/p>\n
K\u00e4yt\u00e4mme bloginfo()<\/code>toimintoa tiedon hakemiseen nykyisest\u00e4 WordPress-asennuksesta. Parametriksi pyyd\u00e4mme palauttamaan sivuston nimen, mik\u00e4 tehd\u00e4\u00e4n asettamalla parametriksi " name<\/code>". Ja koska t\u00e4m\u00e4 on suodatin ja meid\u00e4n on palautettava se, ei toistettava sit\u00e4, k\u00e4yt\u00e4mme sen sisarmenetelm\u00e4\u00e4 get_bloginfo()<\/code>. Soittaminen toistaa bloginfo()<\/code>aina.<\/p>\n
add_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n    if (is_front_page()) {\n        return get_bloginfo('name');\n    }\n    return $title;\n}<\/code><\/pre>\n
Jos p\u00e4ivit\u00e4t etusivusi, sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 sivustosi nimi n\u00e4kyy <title><\/code>tagissa (ja selaimen v\u00e4lilehdess\u00e4)! Suodattimemme vaikuttaa vain etusivulle, joten kaikkien muiden sivujen, kuten yksitt\u00e4isten viestien, pit\u00e4isi silti palauttaa samat kuin ennenkin; postauksen otsikko.<\/p>\n
Suositeltujen kuvien n\u00e4ytt\u00e4minen mallitiedostoissa<\/h2>\n
Aiemmin, kun m\u00e4\u00e4ritimme teematuen, lis\u00e4simme tuen esiteltyille kuville. Kun t\u00e4m\u00e4 on aktivoitu, voimme nyt tulostaa n\u00e4m\u00e4 kuvat malleihimme. Tehd\u00e4\u00e4n se nyt!<\/p>\n
Avaa index.php<\/code>ja etsi heille paikka silmukan sis\u00e4ll\u00e4. P\u00e4\u00e4tin sijoittaa sen otsikon j\u00e4lkeen, mutta se on sinun, mihin haluat ne. K\u00e4yt\u00e4t toimintoa the_post_thumbnail()<\/code>kuvan tulostamiseen. Suosittelemme ensin tarkistamaan, onko viestiss\u00e4 edes asetettu esittelykuva, mink\u00e4 teemme k\u00e4ytt\u00e4m\u00e4ll\u00e4 has_post_thumbnail()<\/code>.<\/p>\n
...\n    <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n    <?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?>\n    <?php the_excerpt(); ?>\n...<\/code><\/pre>\n
Jos viestiss\u00e4si ei ole esitelty\u00e4 kuvaa, otsikon j\u00e4lkeen ei n\u00e4ytet\u00e4 mit\u00e4\u00e4n. Jos kuitenkin asetat suositellun kuvan johonkin viestiisi, the_post_thumbnail()<\/code>se <img><\/code>tulostaisi valitun kuvan sis\u00e4lt\u00e4v\u00e4n tunnisteen. T\u00e4m\u00e4 toiminto hyv\u00e4ksyy joitain lis\u00e4parametreja. Voit esimerkiksi m\u00e4\u00e4ritt\u00e4\u00e4, mit\u00e4 kuvakokoa haluat k\u00e4ytt\u00e4\u00e4, ja hallita kuvaan lis\u00e4ttyj\u00e4 attribuutteja. Kuten tavallista, kehotan sinua vilkaisemaan dokumentaatiota<\/a> nopeasti ja muokkaamaan niit\u00e4 mielesi mukaan.<\/p>\n
Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n