{"id":233478,"date":"2023-02-15T17:20:00","date_gmt":"2023-02-15T14:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233478"},"modified":"2022-11-10T23:55:17","modified_gmt":"2022-11-10T20:55:17","slug":"kohandatud-gutenbergi-ploki-loomine-8-osa-tolketugi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-gutenbergi-ploki-loomine-8-osa-tolketugi\/","title":{"rendered":"Kohandatud Gutenbergi ploki loomine \u2013 8. osa: t\u00f5lketugi"},"content":{"rendered":"\n

Selles osas keskendume sellele, kuidas t\u00f5lkida meie kohandatud Gutenbergi ploki tekste ja v\u00e4\u00e4rtusi. Kasutame WP-CLI-d vajalike failide genereerimiseks, et Gutenberg saaks WordPressi keele vahetamisel laadida meie t\u00f5lkeid.<\/p>\n

Enne selle j\u00e4tkamist peab teil olema installitud WP CLI<\/a> (WordPressi k\u00e4surea liides). Kui teil seda pole, j\u00e4rgige lihtsalt WordPressi CLI k\u00e4siraamatu juhendit<\/a>.<\/p>\n

L\u00fchidalt, kuidas Javascripti (Gutenbergi) skripte t\u00f5lkida: WordPress n\u00f5uab .mo<\/code>PHP-failide t\u00f5lkimiseks faile, kuid Javascripti jaoks n\u00f5uab WordPress .json<\/code>faili. Iga Javascripti fail vajab t\u00f5lkimiseks \u00fchte JSON-faili. JSON peaks olema kindlas vormingus (WP CLI genereerib selle meie jaoks) koos meie t\u00f5lgitud stringidega. Vajame \u00fchte JSON-faili iga keele kohta, millesse tahame t\u00f5lkida.<\/p>\n

Peame esmalt lisama oma Javascripti failidesse gettexti funktsioonid (__()<\/code>jne _e()<\/code>) ja genereerima PO-faili nagu tavaliselt meie teema v\u00f5i pistikprogrammi jaoks. Kuna oleme oma skriptifailides olevad tekstid m\u00e4hitud nt -ga __()<\/code>, peaks PO-fail neid sisaldama. Seej\u00e4rel teeme t\u00f5lke nagu tavaliselt meie PO-failis. Ja l\u00f5puks kasutame WP CLI-d, et eraldada PO-failist vajalikud stringid ja genereerida JSON-failid k\u00f5igi meie Javascript-failide jaoks.<\/p>\n

Pidage meeles, et teie teema v\u00f5i pistikprogrammi .po<\/code>\/ .mo<\/code>-failid ei m\u00f5juta kunagi teie Javascripti faile \u2013 kuigi need sisaldavad meie Javascripti failidest t\u00f5lgitud stringe.<\/p>\n

T\u00f5lke rakendamine Javascriptis<\/h2>\n

Esimene samm on k\u00f5igi meie Javascripti faili tekstide pakkimine t\u00f5lkefunktsioonide sees. Kui olete WordPressi t\u00f5lkimisega tegelenud PHP-s, olete t\u00f5en\u00e4oliselt v\u00e4ga tuttav funktsioonidega __()<\/code>, _e()<\/code>jne esc_html__()<\/code>. WordPressil on pakett wp.i18n<\/code>, mis sisaldab neid funktsioone, mis t\u00f6\u00f6tavad t\u00e4pselt nagu PHP-s.<\/p>\n

Nagu PHP puhul, peate esitama tekstidomeeni domeeni (nimi\/k\u00e4epide). See v\u00f5ib olla mis iganes soovite, kuid j\u00e4tke see l\u00fchike, sest t\u00f5en\u00e4oliselt peate seda v\u00e4ga sageli v\u00e4lja kirjutama. Oma teema jaoks olen seadistanud oma tekstidomeeni domeeniga awhitepixel<\/code>. Nii et PHP __('My string', 'awhitepixel')<\/code>-s t\u00f5lgin stringe ja Javascripti failides on see t\u00e4pselt sama.<\/p>\n

Alustame oma Javascripti faili redigeerimist. K\u00f5igepealt peame paketist h\u00e4vitama __<\/code>ja _e<\/code>funktsiooni. wp.i18n<\/code>Reacti olemuse t\u00f5ttu kasutate t\u00f5en\u00e4oliselt seda __<\/code>funktsiooni enamasti v\u00f5i v\u00f5ib-olla ainult.<\/p>\n

const { __, _e } = wp.i18n;<\/code><\/pre>\n
Ja siis tuleb k\u00f5ik meie k\u00f5vakoodiga tekstid Javascripti failist \u00fcles otsida ja neid v\u00e4rskendada. Pidage meeles, et funktsioonid __<\/code>ja _e<\/code>n\u00f5uavad Javascripti konteksti. See t\u00e4hendab, et kui tipime stringe n\u00e4iteks objekti atribuutide v\u00e4\u00e4rtustena, kasutame seda __()<\/code>kohe, kuid v\u00e4\u00e4rtustena nt rekvisiitide jaoks peame k\u00f5ik sees { }<\/code>m\u00e4hkima, et n\u00e4idata, et tegemist on Javascripti koodiga.<\/p>\n
N\u00e4iteks meie registerBlockType<\/code>t\u00f5lketoega n\u00e4eb v\u00e4lja selline:<\/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 mis puudutab rekvisiite, st sisse 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
Pakkige k\u00f5ik tekstid, mille t\u00f5lkimist soovite toetada, sisse __()<\/code>ja _e()<\/code>. Kui olete seda \u00f5petust samm-sammult j\u00e4rginud, ei tohiks teil esineda juhtumeid, kus peaksite kasutama _e()<\/code>. Kui olete l\u00f5petanud, kompileerige Javascript uuesti ja me loobume Javascriptist.<\/p>\n
Po- ja\/v\u00f5i pot-failide seadistamine<\/h2>\n
See samm varieerub veidi s\u00f5ltuvalt sellest, mida olete juba teinud ja oma teema v\u00f5i pistikprogrammi jaoks seadistanud. V\u00f5ib-olla kirjutate oma Gutenbergi skripte uude ja t\u00fchja pistikprogrammi, mis pole PHP-t\u00f5lke jaoks seadistatud, v\u00f5i teema sees, millel on juba registreeritud tekstidomeen. V\u00f5imalik, et teil on valmis PO (ja MO) failid v\u00f5i ainult POT-fail. Annan endast parima, et katta k\u00f5ik alused.<\/p>\n
Minu teemal v\u00f5i pistikprogrammil on juba po(t)-fail<\/h3>\n
Kui teie projektis on juba PO- v\u00f5i POT-fail, on teil t\u00f5en\u00e4oliselt ka PHP funktsioon load_theme_textdomain()<\/code>v\u00f5i kuskil teie koodis. Veenduge, et registreeritud domeen on sama, mida olete oma Javascripti failides kasutanud.load_child_theme_textdomain()``load_plugin_textdomain()<\/code><\/p>\n
K\u00f5ik, mida pead tegema, on laadida PO-fail selle keele jaoks, mida soovid t\u00f5lkida (v\u00f5i genereerida see POT-failist), n\u00e4iteks PoEdit<\/a>. Kl\u00f5psake nuppu \u201eV\u00e4rskenda koodist" (v\u00f5i muudes programmides sarnast), et programm saaks skannida k\u00f5iki projektifaile (sh meie hiljuti v\u00e4rskendatud Javascripti faile) ja v\u00e4rskendada t\u00f5lkimiseks stringide kogumit. Meie Javascripti failis olevad stringid peaksid ilmuma. Seej\u00e4rel peate need lihtsalt tavaliseks t\u00f5lkima ja salvestama.<\/p>\n
PS: Kui te ei saa kl\u00f5psata "Uuenda koodist" v\u00f5i faile uuesti skannida, pole PO-fail t\u00f5en\u00e4oliselt \u00f5igesti seadistatud. Otsige n\u00e4pun\u00e4iteid j\u00e4rgmisest jaotisest.<\/p>\n
Mul ei ole \u00fchtegi t\u00f5lkefaili<\/h3>\n
Kui teie teema v\u00f5i projekt pole t\u00f5lkega seadistatud, peate WP-CLI abil looma POT-faili v\u00f5i looma PO-faili k\u00e4sitsi.<\/p>\n
Mul on p\u00f5hjalik juhend PO-faili loomise kohta teema\u00f5petuses algajatele \u2013 8. osa<\/a>. Postituses kirjeldatakse, kuidas saate faili luua ja teemafailide otsimiseks \u00f5igesti seadistada ning otsitavaid m\u00e4rks\u00f5nu (__<\/code>, _e<\/code>, jne).<\/p>\n
Kui soovite pigem POT-faili luua, v\u00f5ite kasutada WP-CLI-s k\u00e4sku wp i18n make-pot<\/a> ja seej\u00e4rel luua sellest PO-fail, kasutades nt PoEdit. Pidage meeles, et iga kord, kui v\u00e4rskendate oma koodi stringe, peate POT-faili (ja seej\u00e4rel PO-faili) uuesti looma.<\/p>\n
L\u00f5pptulemus<\/h3>\n
L\u00f5ppkokkuv\u00f5ttes vajate PO-faili, mis on leidnud teie Javascripti stringid, kus need on t\u00f5lgitud. Soovitan paigutada t\u00f5lkefailid oma teemas v\u00f5i pistikprogrammis eraldi kausta. Kui hakkame JSON-faile genereerima, saame t\u00f5lkimiseks \u00fcsna palju faile ja on tore neid k\u00f5iki koos oma kaustas hoida.<\/p>\n
V\u00f5rdluspunktina paigutan k\u00f5ik t\u00f5lkefailid oma theme\/assets\/lang\/<\/code>. Lisasin oma teemale norrakeelse t\u00f5lke nimega nb_NO.po<\/code>, mis sisaldab t\u00f5lgitud stringe meie kohandatud ploki Javascripti failist.<\/p>\n
JSON-failide genereerimine po-failist<\/h2>\n
J\u00e4rgmine samm on WP-CLI kasutamine meie po-failist JSON-failide genereerimiseks. Selleks kasutame k\u00e4sku wp i18n make-json<\/a>.<\/p>\n
Pidage meeles, et vaikimisi eemaldab see k\u00e4sk teie PO-failist t\u00f5lgitud stringid, mida kasutatakse JSON-faili genereerimiseks. See v\u00f5ib teema v\u00f5i pistikprogrammi arendamise ajal olla t\u00fclikas. Sest kui lisate uusi v\u00f5i kohandate stringe, peate failid uuesti skannima ja k\u00f5ik stringid uuesti (ja uuesti ja uuesti) t\u00f5lkima. \u00d5nneks on selle v\u00e4ltimiseks k\u00e4sul lipp.<\/p>\n
Alustame! Liikuge terminalis oma projekti keelekataloogi. K\u00e4ivitage j\u00e4rgmine k\u00e4sk ja vaadake oma po-faili (nagu mainitud, on mul nb_NO.po<\/code>fail valmis).<\/p>\n
wp i18n make-json nb_NO.po --no-purge<\/code><\/pre>\n
Kui teil pole probleeme t\u00f5lgitud stringide eemaldamisega PO-failist (n\u00e4iteks kui teete oma l\u00f5plikku ehitust), v\u00f5ite --no-purge<\/code>lipu vahele j\u00e4tta.<\/p>\n
Terminal peaks k\u00fcsima "Edu" ja teatama, mitu JSON-faili loodi. Kui n\u00e4ete, et see genereeris kaks JSON-faili, on see sellep\u00e4rast, et see on lugenud nii meie l\u00e4htekoodi Javascripti faili kui ka ehitusfaili ning loonud kummagi jaoks \u00fche. Kui teie projektis on rohkem Javascripti faile, saate l\u00f5puks veelgi rohkem JSON-faile.<\/p>\n
Selle kirjutamise seisuga (WordPress v 5.3.2 ja WP-CLI versioon 2.4.0) genereeritakse JSON-failid keelekoodi ja failinimedena r\u00e4si \u2013 kr\u00fcptilise stringiga. Peame leidma \u00f5ige ja \u00fcmber nimetama.<\/p>\n
JSON-faili \u00fcmbernimetamine ja PHP-sse laadimine<\/h2>\n
\"Kohandatud<\/a><\/p>\n
Teie keelekaust n\u00e4eb t\u00f5en\u00e4oliselt v\u00e4lja umbes selline:<\/p>\n
Pidage meeles, et k\u00e4sk on loonud \u00fche JSON-faili iga Javascripti faili kohta \u2013 ja kuna meil on kohandatud ploki jaoks tegelikult kaks faili (allikas ja j\u00e4rg), genereeris see kaks faili. Kui teie Javascripti kood on jagatud mitmeks failiks, saavad m\u00f5lemad kaks oma JSON-faili.<\/p>\n
Kui teil on ainult kaks JSON-faili (kuna muid Javascripti faile ei leitud), saate \u00fche neist kohe kustutada. Kui teil on rohkem kui kaks, peate avama JSON-failid ja n\u00e4gema, millise faili jaoks need on m\u00f5eldud. JSON-failid sisaldavad atribuuti " source<\/code>", mis \u00fctleb teile, millise Javascripti faili jaoks see JSON-fail on m\u00f5eldud. Kasutage seda, et v\u00e4lja selgitada, millist JSON-faili s\u00e4ilitada. Soovitan leida l\u00f5plik ehitusfail (erinevalt dev-failidest), kuna see peaks sisaldama k\u00f5igi failide k\u00f5iki stringe.<\/p>\n
Kui olete \u00f5ige leidnud, peame selle \u00fcmber nimetama. Peame selle \u00fcmber nimetama, et j\u00e4rgida j\u00e4rgmist mustrit:<\/p>\n
[textdomain]-[language code]-[script handle].json<\/code><\/p>\n
Kasutage tekstidomeeni, mida olete k\u00f5ikjal kasutanud (nt __('My string', 'awhitepixel')<\/code>), lisage sidekriips ja keelekood. Seej\u00e4rel lisage sidekriips ja skripti k\u00e4epide, mida kasutasite oma Gutenbergi Javascripti faili (wp_register_script()<\/code>) registreerimiseks. Viitena on minu tekstidomeen awhitepixel<\/code>, minu keelekood nb_NO<\/code>ja Gutenbergi skripti k\u00e4epide on awp-myfirstblock-js<\/code>. Nii et ma nimetan JSON-faili \u00fcmber j\u00e4rgmiselt:<\/p>\n
awhitepixel-nb_NO-awp-myfirstblock-js.json<\/code><\/p>\n
Paluge WordPressil laadida meie JSON<\/h3>\n
N\u00fc\u00fcd j\u00e4\u00e4b alles viimane samm \u2013 k\u00e4skida WordPressil laadida meie JSON-fail. Peame kasutama funktsiooni [wp_set_script_translations](https:\/\/developer.wordpress.org\/reference\/functions\/wp_set_script_translations\/)()<\/code>. See on \u00fcsna uus WordPressi funktsioon, nii et soovitan selle pakkida function_exists()<\/code>. See aktsepteerib kolme parameetrit; meie ploki skripti k\u00e4epide, tekstidomeen ja tee meie t\u00f5lkekausta (m\u00e4rkus: tee, mitte URL).<\/p>\n
Meie funktsiooni sees, mis on \u00fchendatud funktsiooniga init<\/code>, kus registreerisime oma plokiskripti ja k\u00f5ne, register_block_type<\/code>saame kutsuda ka seda uut funktsiooni JSON-i t\u00f5lkefaili laadimiseks. PS: Pidage meeles, et konks enqueue_block_assets<\/code>ei t\u00f6\u00f6ta t\u00f5lgete registreerimisel.<\/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 see on k\u00f5ik! Teie blokk tuleks n\u00fc\u00fcd t\u00f5lkida. L\u00fclitage WordPressi keel keelele, millesse t\u00f5lkisite, ja kontrollige seda ise. Kui l\u00fclitan oma WordPressi keele norra keeleks ja lisan oma ploki, t\u00f5lgitakse nimi ja k\u00f5ik selles sisalduv:<\/p>\n
\"Kohandatud<\/a><\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
See \u00f5ppetund keskendub sellele, kuidas toetada meie Gutenbergi blokis olevate tekstide t\u00f5lkimist. Kasutame WordPressi jaoks vajalike JSON-failide genereerimiseks WP-CLI-d.<\/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":[894,937,937,894,1110,842,802,802,812,812,842,863,863],"tags":[1165],"class_list":{"0":"post-233478","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kood","8":"category-gutenberg-4","11":"category-n-a","12":"category-opetused","13":"category-php-4","15":"category-pistikprogrammid","18":"category-wordpress-4","20":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233478"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/153241"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}