{"id":233466,"date":"2023-02-15T16:51:00","date_gmt":"2023-02-15T13:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233466"},"modified":"2022-11-10T23:50:36","modified_gmt":"2022-11-10T20:50:36","slug":"luo-mukautettu-gutenberg-lohko-osa-8-kaeaennoestuki","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-8-kaeaennoestuki\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko \u2013 Osa 8: K\u00e4\u00e4nn\u00f6stuki"},"content":{"rendered":"\n

T\u00e4ss\u00e4 osassa keskitymme tekstien ja arvojen k\u00e4\u00e4nt\u00e4miseen mukautetussa Gutenberg-lohkossamme. Luomme WP-CLI:n avulla tarvittavat tiedostot, jotta Gutenberg pystyy lataamaan k\u00e4\u00e4nn\u00f6ksemme WordPress-kielt\u00e4 vaihtaessaan.<\/p>\n

Ennen kuin jatkat t\u00e4t\u00e4, sinulla on oltava WP CLI<\/a> (WordPressin komentoriviliittym\u00e4) asennettuna. Jos sinulla ei ole sit\u00e4, seuraa vain WordPress Handbook for CLI -opasta<\/a>.<\/p>\n

Selvitt\u00e4\u00e4ksesi lyhyesti, kuinka Javascript (Gutenberg) -skriptej\u00e4 k\u00e4\u00e4nnet\u00e4\u00e4n: WordPress vaatii .mo<\/code>tiedostoja PHP-tiedostojen k\u00e4\u00e4nt\u00e4miseen, mutta Javascriptiin WordPress vaatii .json<\/code>tiedoston. Jokainen Javascript-tiedosto tarvitsee yhden JSON-tiedoston k\u00e4\u00e4nt\u00e4mist\u00e4 varten. JSONin tulee olla tietyss\u00e4 muodossa (WP CLI luo sen meille) k\u00e4\u00e4nnetyill\u00e4 merkkijonoillamme. Tarvitsemme yhden JSON-tiedoston kutakin kielt\u00e4, jolle haluamme k\u00e4\u00e4nt\u00e4\u00e4.<\/p>\n

Joten meid\u00e4n t\u00e4ytyy ensin lis\u00e4t\u00e4 gettext-funktiot (__()<\/code>jne _e()<\/code>.) Javascript-tiedostoihimme ja luoda PO-tiedosto tavalliseen tapaan teemallemme tai laajennuksellemme. Koska olemme k\u00e4\u00e4rineet skriptitiedostojemme tekstit esim. -merkill\u00e4 __()<\/code>, PO-tiedoston pit\u00e4isi pysty\u00e4 sis\u00e4llytt\u00e4m\u00e4\u00e4n ne. Sitten teemme k\u00e4\u00e4nn\u00f6ksen tavalliseen tapaan PO-tiedostossamme. Ja lopuksi k\u00e4yt\u00e4mme WP CLI:t\u00e4 tarvittavien merkkijonojen purkamiseen PO-tiedostosta ja JSON-tiedostojen luomiseen kaikille Javascript-tiedostoillemme.<\/p>\n

Muista, ett\u00e4 teemasi tai laajennuksesi .po<\/code>\/ .mo<\/code>-tiedostot eiv\u00e4t koskaan vaikuta Javascript-tiedostoihisi \u2013 vaikka ne sis\u00e4lt\u00e4v\u00e4tkin Javascript-tiedostoistamme k\u00e4\u00e4nnettyj\u00e4 merkkijonoja.<\/p>\n

K\u00e4\u00e4nn\u00f6ksen k\u00e4ytt\u00f6\u00f6notto Javascriptiss\u00e4<\/h2>\n

Ensimm\u00e4inen askel on k\u00e4\u00e4ri\u00e4 kaikki tekstit Javascript-tiedostoomme k\u00e4\u00e4nn\u00f6stoimintojen sis\u00e4ll\u00e4. Jos olet k\u00e4sitellyt WordPressin k\u00e4\u00e4nn\u00f6ksi\u00e4 PHP:ll\u00e4, tunnet todenn\u00e4k\u00f6isesti hyvin funktiot __()<\/code>, _e()<\/code>ja esc_html__()<\/code>niin edelleen. WordPressill\u00e4 on paketti wp.i18n<\/code>, joka sis\u00e4lt\u00e4\u00e4 n\u00e4m\u00e4 toiminnot, jotka toimivat t\u00e4sm\u00e4lleen kuten PHP:ss\u00e4.<\/p>\n

Kuten PHP:n kohdalla, sinun on annettava tekstiverkkotunnus (nimi\/kahva). Se voi olla mit\u00e4 haluat, mutta pid\u00e4 se lyhyt, koska sinun on todenn\u00e4k\u00f6isesti kirjoitettava se hyvin usein. Teemaani varten olen m\u00e4\u00e4ritt\u00e4nyt tekstiverkkotunnukseni verkkotunnuksella awhitepixel<\/code>. Joten PHP:ss\u00e4 teen __('My string', 'awhitepixel')<\/code>merkkijonojen k\u00e4\u00e4nt\u00e4misen, ja se on t\u00e4sm\u00e4lleen sama Javascript-tiedostoissa.<\/p>\n

Aloitetaan Javascript-tiedoston muokkaaminen. Ensin meid\u00e4n t\u00e4ytyy tuhota __<\/code>ja _e<\/code>funktio wp.i18n<\/code>paketista. Reactin luonteesta johtuen k\u00e4yt\u00e4t todenn\u00e4k\u00f6isesti enimm\u00e4kseen tai ehk\u00e4 vain __<\/code>toimintoa.<\/p>\n

const { __, _e } = wp.i18n;<\/code><\/pre>\n
Ja sitten on etsitt\u00e4v\u00e4 kaikki kovakoodatut tekstimme Javascript-tiedostosta ja p\u00e4ivitett\u00e4v\u00e4 ne. Muista, ett\u00e4 __<\/code>ja – _e<\/code>funktiot vaativat Javascript-kontekstin. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 kun kirjoitamme merkkijonoja esimerkiksi objektin ominaisuusarvoiksi, k\u00e4yt\u00e4mme niit\u00e4 __()<\/code>heti, mutta esimerkiksi rekvisiittauksen arvoina meid\u00e4n t\u00e4ytyy k\u00e4\u00e4ri\u00e4 kaikki sis\u00e4lle { }<\/code>osoittamaan, ett\u00e4 t\u00e4m\u00e4 on Javascript-koodi.<\/p>\n
Esimerkiksi registerBlockType<\/code>k\u00e4\u00e4nn\u00f6stukemme n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    icon: 'smiley',\n    description: __('Learning in progress', 'awhitepixel'),\n    keywords: [__('example', 'awhitepixel'), __('test', 'awhitepixel')],\n    attributes: {\n        ...<\/code><\/pre>\n
Ja mit\u00e4 tulee rekvisiittiin, eli sis\u00e4\u00e4n InspectorControls<\/code>:<\/p>\n
<InspectorControls>\n    <PanelBody\n        title={__(\"Most awesome settings ever\", 'awhitepixel')}\n        initialOpen={true}\n    >\n    ...\n        <ToggleControl\n            label={__(\"Toggle me\", 'awhitepixel')}\n            checked={attributes.toggle}\n            onChange={(newval) => setAttributes({ toggle: newval })}\n        \/>\n        ...<\/code><\/pre>\n
K\u00e4\u00e4ri kaikki tekstit, joiden k\u00e4\u00e4nn\u00f6st\u00e4 haluat tukea, __()<\/code>ja _e()<\/code>. Jos olet noudattanut t\u00e4t\u00e4 opetusohjelmaa vaihe vaiheelta, sinulla ei pit\u00e4isi olla tapauksia, joissa sinun on k\u00e4ytett\u00e4v\u00e4 _e()<\/code>. Kun olet valmis, k\u00e4\u00e4nn\u00e4 Javascript uudelleen, niin siirrymme pois Javascriptist\u00e4.<\/p>\n
Po- ja\/tai pottitiedostojen asettaminen<\/h2>\n
T\u00e4m\u00e4 vaihe vaihtelee hieman sen mukaan, mit\u00e4 olet jo tehnyt ja m\u00e4\u00e4ritt\u00e4nyt teemallesi tai laajennukselle. Saatat kirjoittaa Gutenberg-skriptej\u00e4si uudessa ja tyhj\u00e4ss\u00e4 laajennuksessa, jota ei ole m\u00e4\u00e4ritetty PHP-k\u00e4\u00e4nt\u00e4miseen, tai teemaan, jolla on jo rekister\u00f6ity tekstiverkkotunnus. Sinulla saattaa olla PO- (ja MO)-tiedostoja valmiina tai sinulla voi olla vain POT-tiedosto. Yrit\u00e4n parhaani mukaan peitt\u00e4\u00e4 kaikki pohjat.<\/p>\n
Teemallani tai laajennuksellani on jo po(t)-tiedosto<\/h3>\n
Jos sinulla on jo projektissasi PO- tai POT-tiedosto, sinulla on todenn\u00e4k\u00f6isesti my\u00f6s PHP-toiminto load_theme_textdomain()<\/code>, load_child_theme_textdomain()<\/code>tai load_plugin_textdomain()<\/code>jossain koodissasi. Varmista, ett\u00e4 rekister\u00f6ity verkkotunnus on sama, jota olet k\u00e4ytt\u00e4nyt Javascript-tiedostoissasi.<\/p>\n
Sinun tarvitsee vain ladata sen kielen PO-tiedosto, jonka haluat k\u00e4\u00e4nt\u00e4\u00e4 (tai luoda sellainen POT-tiedostosta), esimerkiksi PoEdit<\/a>. Napsauta "P\u00e4ivit\u00e4 koodista" (tai vastaavaa muissa ohjelmissa), jotta ohjelma voi skannata kaikki projektitiedostot (mukaan lukien \u00e4skett\u00e4in p\u00e4ivitetyt Javascript-tiedostomme) ja p\u00e4ivitt\u00e4\u00e4 merkkijonovalikoiman k\u00e4\u00e4nn\u00f6st\u00e4 varten. Javascript-tiedostomme merkkijonojen pit\u00e4isi ilmesty\u00e4. Sitten sinun tarvitsee vain k\u00e4\u00e4nt\u00e4\u00e4 ne normaalisti ja tallentaa.<\/p>\n
PS: Jos et voi napsauttaa "P\u00e4ivit\u00e4 koodista" tai skannata tiedostoja uudelleen, PO-tiedostoa ei todenn\u00e4k\u00f6isesti ole asetettu oikein. Etsi vinkkej\u00e4 seuraavasta osiosta.<\/p>\n
Minulla ei ole k\u00e4\u00e4nn\u00f6stiedostoja<\/h3>\n
Jos teemaasi tai projektiasi ei ole m\u00e4\u00e4ritetty k\u00e4\u00e4nt\u00e4m\u00e4ll\u00e4, sinun on joko luotava POT-tiedosto WP-CLI:n avulla tai luotava PO-tiedosto manuaalisesti.<\/p>\n
Minulla on perusteellinen opas PO-tiedoston luomiseen aloittelijoille suunnatussa Theme Tutorial -oppaassani \u2013 osassa 8<\/a>. Viestiss\u00e4 kuvataan, kuinka voit luoda tiedoston ja m\u00e4\u00e4ritt\u00e4\u00e4 sen oikein etsim\u00e4\u00e4n teematiedostoja sek\u00e4 hakusanat (__<\/code>, _e<\/code>, jne.).<\/p>\n
Jos haluat mieluummin luoda POT-tiedoston, voit k\u00e4ytt\u00e4\u00e4 WP-CLI:ss\u00e4 komentoa wp i18n make-pot<\/a> ja sitten luoda siit\u00e4 PO-tiedosto esim. PoEditill\u00e4. Muista, ett\u00e4 sinun on luotava uudelleen POT-tiedosto (ja sitten PO-tiedosto) aina, kun p\u00e4ivit\u00e4t koodisi merkkijonoja.<\/p>\n
Lopputulos<\/h3>\n
Viime k\u00e4dess\u00e4 tarvitset PO-tiedoston, joka on l\u00f6yt\u00e4nyt Javascript-merkkijonosi, josta ne on k\u00e4\u00e4nnetty. Suosittelen sijoittamaan k\u00e4\u00e4nn\u00f6stiedostot erilliseen kansioon teemassasi tai laajennuksessasi. Kun aloitamme JSON-tiedostojen luomisen, saamme k\u00e4\u00e4nnett\u00e4v\u00e4ksi melkoisen m\u00e4\u00e4r\u00e4n tiedostoja, ja on mukavaa s\u00e4ilytt\u00e4\u00e4 ne kaikki yhdess\u00e4 omassa kansiossa.<\/p>\n
Viitekohtana sijoitan kaikki k\u00e4\u00e4nn\u00f6stiedostot omaan theme\/assets\/lang\/<\/code>. Olen lis\u00e4nnyt teemalleni norjankielisen k\u00e4\u00e4nn\u00f6ksen nb_NO.po<\/code>, joka sis\u00e4lt\u00e4\u00e4 k\u00e4\u00e4nnetyt merkkijonot mukautetusta Javascript-lohkotiedostostamme.<\/p>\n
Luodaan JSON-tiedostoja po-tiedostosta<\/h2>\n
Seuraava askel on k\u00e4ytt\u00e4\u00e4 WP-CLI:t\u00e4 JSON-tiedostojen luomiseen po-tiedostostamme. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme komentoa wp i18n make-json<\/a>.<\/p>\n
Huomaa, ett\u00e4 oletusarvoisesti t\u00e4m\u00e4 komento poistaa k\u00e4\u00e4nnetyt merkkijonot PO-tiedostostasi k\u00e4ytett\u00e4v\u00e4ksi JSON-tiedoston luomisessa. T\u00e4m\u00e4 voi olla hankalaa, kun kehit\u00e4t teemaa tai laajennusta. Koska kun lis\u00e4\u00e4t uusia tai s\u00e4\u00e4d\u00e4t merkkijonoja, sinun on skannattava tiedostot uudelleen ja k\u00e4\u00e4nnett\u00e4v\u00e4 kaikki merkkijonot uudelleen (ja uudelleen ja uudelleen). Onneksi komennossa on lippu t\u00e4m\u00e4n v\u00e4ltt\u00e4miseksi.<\/p>\n
Aloitetaan! Siirry p\u00e4\u00e4tteess\u00e4si projektisi kielihakemistoon. Suorita seuraava komento ja katso po-tiedostoasi (kuten mainittiin, minulla on nb_NO.po<\/code>tiedosto valmiina).<\/p>\n
wp i18n make-json nb_NO.po --no-purge<\/code><\/pre>\n
Jos sinulla ei ole ongelmia k\u00e4\u00e4nnettyjen merkkijonojen poistamisessa PO-tiedostostasi (esimerkiksi jos olet tekem\u00e4ss\u00e4 lopullista versiota), voit ohittaa --no-purge<\/code>lipun.<\/p>\n
P\u00e4\u00e4tteen tulee kysy\u00e4 "Onnistuminen" ja ilmoittaa, kuinka monta JSON-tiedostoa luotiin. Jos n\u00e4et, ett\u00e4 se loi kaksi JSON-tiedostoa, t\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 se on lukenut sek\u00e4 l\u00e4hdekoodimme Javascript-tiedoston ett\u00e4 koontitiedoston ja luonut yhden kullekin. Jos projektissasi on enemm\u00e4n Javascript-tiedostoja, saat viel\u00e4 enemm\u00e4n JSON-tiedostoja.<\/p>\n
T\u00e4t\u00e4 kirjoittaessa (WordPress v 5.3.2 ja WP-CLI versio 2.4.0) JSON-tiedostot on luotu kielikoodilla ja hashilla \u2013 salaper\u00e4isell\u00e4 merkkijonolla tiedostonimin\u00e4. Meid\u00e4n on l\u00f6ydett\u00e4v\u00e4 oikea ja nimett\u00e4v\u00e4 se uudelleen.<\/p>\n
Nime\u00e4 JSON-tiedosto uudelleen ja lataa se PHP:ss\u00e4<\/h2>\n
\"Luo<\/a><\/p>\n
Kielikansiosi n\u00e4ytt\u00e4\u00e4 todenn\u00e4k\u00f6isesti t\u00e4lt\u00e4:<\/p>\n
Muista, ett\u00e4 komento on luonut yhden JSON-tiedoston Javascript-tiedostoa kohden \u2013 ja koska meill\u00e4 on itse asiassa kaksi tiedostoa mukautetulle lohkollemme (l\u00e4hde ja rakenne), se loi kaksi tiedostoa. Jos Javascript-koodisi on jaettu useisiin tiedostoihin, jokainen saa kaksi omaa JSON-tiedostoaan.<\/p>\n
Jos istut vain kahden JSON-tiedoston kanssa (koska muita Javascript-tiedostoja ei l\u00f6ytynyt), voit poistaa yhden niist\u00e4 nyt. Jos sinulla on enemm\u00e4n kuin kaksi, sinun on avattava JSON-tiedostot ja katsottava, mit\u00e4 tiedostoa varten ne ovat. JSON-tiedostot sis\u00e4lt\u00e4v\u00e4t ominaisuuden " source<\/code>", joka kertoo, mille Javascript-tiedostolle t\u00e4m\u00e4 JSON-tiedosto on tarkoitettu. K\u00e4yt\u00e4 sit\u00e4 selvitt\u00e4\u00e4ksesi, mik\u00e4 JSON-tiedosto s\u00e4ilytet\u00e4\u00e4n. Suosittelen l\u00f6yt\u00e4m\u00e4\u00e4n lopullisen koontitiedoston (toisin kuin dev-tiedostoja), koska sen pit\u00e4isi sis\u00e4lt\u00e4\u00e4 kaikki merkkijonot kaikista tiedostoista.<\/p>\n
Kun olet l\u00f6yt\u00e4nyt oikean, meid\u00e4n on nimett\u00e4v\u00e4 se uudelleen. Meid\u00e4n on nimett\u00e4v\u00e4 se uudelleen noudattamaan t\u00e4t\u00e4 mallia:<\/p>\n
[textdomain]-[language code]-[script handle].json<\/code><\/p>\n
K\u00e4yt\u00e4 kaikkialla k\u00e4ytt\u00e4m\u00e4\u00e4si tekstiverkkotunnusta (esim __('My string', 'awhitepixel')<\/code>. ), lis\u00e4\u00e4 viiva ja kielikoodi. Anna sitten viiva ja komentosarjan kahva, jolla rekister\u00f6it Gutenberg Javascript -tiedoston (wp_register_script()<\/code>). Viittauksena tekstiverkkotunnukseni on awhitepixel<\/code>, kielikoodini on nb_NO<\/code>, ja Gutenberg-skriptin k\u00e4sikirjoituskahvani on awp-myfirstblock-js<\/code>. Joten nime\u00e4n JSON-tiedoston uudelleen muotoon:<\/p>\n
awhitepixel-nb_NO-awp-myfirstblock-js.json<\/code><\/p>\n
Pyyd\u00e4 WordPressi\u00e4 lataamaan JSON<\/h3>\n
Nyt on j\u00e4ljell\u00e4 vain viimeinen vaihe \u2013 k\u00e4ske\u00e4 WordPressi\u00e4 lataamaan JSON-tiedostomme. Meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 toimintoa [wp_set_script_translations](https:\/\/developer.wordpress.org\/reference\/functions\/wp_set_script_translations\/)()<\/code>. T\u00e4m\u00e4 on melko uusi WordPress-toiminto, joten suosittelen sen k\u00e4\u00e4rimist\u00e4 function_exists()<\/code>. Se hyv\u00e4ksyy kolme parametria; lohkomme komentosarjakahva, tekstiverkkotunnus ja polku k\u00e4\u00e4nn\u00f6skansioomme (huomaa: polku, ei URL-osoite).<\/p>\n
Toiminnossamme, joka on koukussa toimintoon init<\/code>, johon rekister\u00f6imme lohkoskriptimme ja kutsumme register_block_type<\/code>, voimme my\u00f6s kutsua t\u00e4t\u00e4 uutta toimintoa ladataksemme JSON-k\u00e4\u00e4nn\u00f6stiedostomme. PS: Muista, ett\u00e4 koukku enqueue_block_assets<\/code>ei toimi k\u00e4\u00e4nn\u00f6sten rekister\u00f6inniss\u00e4.<\/p>\n
add_action('init', function() {\n    wp_register_script('awp-myfirstblock-js', ....);\n    register_block_type('awp\/firstblock', ....\n\u00a0\n    if (function_exists('wp_set_script_translations')) {\n        wp_set_script_translations('awp-myfirstblock-js', 'awhitepixel', get_template_directory(). '\/assets\/lang');\n    }\n});<\/code><\/pre>\n
Ja siin\u00e4 kaikki! Lohkosi pit\u00e4isi nyt k\u00e4\u00e4nt\u00e4\u00e4. Vaihda WordPress-kieli kielelle, jolle k\u00e4\u00e4nsit, ja tarkista se itse. Kun vaihdan WordPress-kieleni norjaksi ja lis\u00e4\u00e4n lohkoni, nimi ja kaikki siin\u00e4 oleva k\u00e4\u00e4nnet\u00e4\u00e4n:<\/p>\n
\"Luo<\/a><\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 oppitunti keskittyy Gutenberg-lohkon tekstien k\u00e4\u00e4nt\u00e4misen tukemiseen. K\u00e4yt\u00e4mme WP-CLI:t\u00e4 tarvittavien JSON-tiedostojen luomiseen WordPressille.<\/p>\n","protected":false},"author":1,"featured_media":153241,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,813,1110,843,803,803,813,843,864,864],"tags":[1166],"class_list":{"0":"post-233466","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-gutenberg-5","11":"category-laajennuksia","12":"category-n-a","13":"category-opetusohjelmia","14":"category-php-5","18":"category-wordpress-5","20":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233466","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=233466"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/153241"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}