{"id":233460,"date":"2023-02-14T12:31:00","date_gmt":"2023-02-14T09:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233460"},"modified":"2022-11-10T23:48:11","modified_gmt":"2022-11-10T20:48:11","slug":"kuinka-tehdae-mukautettuja-gutenberg-lohkoja-advanced-custom-fields-prolla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-tehdae-mukautettuja-gutenberg-lohkoja-advanced-custom-fields-prolla\/","title":{"rendered":"Kuinka tehd\u00e4 mukautettuja Gutenberg-lohkoja Advanced Custom Fields Prolla"},"content":{"rendered":"\n

Advanced Custom Fields (ACF) Pron versiosta 5.8<\/a> l\u00e4htien voit luoda mukautettuja Gutenberg-lohkoja ACF:n avulla. Sinun tarvitsee vain k\u00e4sitell\u00e4 PHP-malleja. T\u00e4m\u00e4n ansiosta kehitt\u00e4jien, jotka eiv\u00e4t ole viel\u00e4 kokeneet nykyaikaisen Javascriptin k\u00e4ytt\u00f6\u00f6n, on eritt\u00e4in helppoa luoda mukautettuja lohkoja Gutenbergille mill\u00e4 tahansa ACF:n tarjoamilla kentt\u00e4tyypeill\u00e4. Muista, ett\u00e4 t\u00e4m\u00e4 toiminto on saatavilla vain Advanced Custom Fieldsin maksullisessa versiossa (Pro<\/a> ). Se ei ole saatavilla ilmaisessa versiossa, joten sinun on ostettava lisenssi.<\/p>\n

Jos olet WordPress-editori tai verkkovastaava, joka ei halua sukeltaa syv\u00e4lle koodaukseen, t\u00e4m\u00e4 viesti on ehdottomasti sinua varten. Jos kuitenkin haluat olla WordPress-teeman tai laajennuksen kehitt\u00e4j\u00e4, suosittelen ottamaan askeleen oppiaksesi luomaan omia mukautettuja lohkoja. Advanced Custom Fields -kenttien k\u00e4ytt\u00e4minen lohkojen luomiseen voi kuitenkin tarjota mukavan johdannon mukautettujen lohkojen k\u00e4sittelyyn Gutenbergiss\u00e4.<\/p>\n

Luo Gutenberg-lohko ACF:ll\u00e4<\/h2>\n

Mukautetun Gutenberg-lohkon luomiseen Advanced Custom Fields -kentill\u00e4 on periaatteessa kolme yksinkertaista vaihetta. Ensimm\u00e4inen on helppo ja luultavasti tuttu; m\u00e4\u00e4rit\u00e4 kent\u00e4t (asetukset), jotka haluat lohkossasi. Toinen vaihe on k\u00e4ytt\u00e4\u00e4 ACF:n toimintoa Gutenberg-lohkon rekister\u00f6intiin. Ja kolmas vaihe on PHP-mallin kirjoittaminen lohkolle. Kirjoitat vain HTML-koodin ja k\u00e4sittelet asetuksia aivan kuten tekisit muuten ACF-kenttien kanssa. Ja siin\u00e4 se! (Okei, ehk\u00e4 on nelj\u00e4s vaihe; lohkon muotoilu. Mutta en mene siihen t\u00e4ss\u00e4 viestiss\u00e4).<\/p>\n

Luo asetukset\/kent\u00e4t<\/h3>\n

Jos olet k\u00e4ytt\u00e4nyt Advanced Custom Fields -toimintoa ennen kuin tied\u00e4t kent\u00e4t m\u00e4\u00e4ritt\u00e4misen. Voit tehd\u00e4 t\u00e4m\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 Advanced Custom Fieldin j\u00e4rjestelm\u00e4nvalvojan k\u00e4ytt\u00f6liittym\u00e4\u00e4. Tai jos haluat, ett\u00e4 lohkoasetukset upotetaan laajennukseen tai teemaan, kirjoita asetukset PHP:ll\u00e4. Minulla on t\u00e4ydellinen viiteviesti ACF-asetusten lis\u00e4\u00e4misest\u00e4 PHP:ll\u00e4<\/a>.<\/p>\n

\"Kuinka<\/a><\/p>\n

T\u00e4rkein asia, joka sinun on teht\u00e4v\u00e4 ryhm\u00e4si kanssa, on asettaa sijainniksi "Est\u00e4". Mutta koska emme ole viel\u00e4 rekister\u00f6ineet lohkoamme, se on oletuksena "Kaikki". J\u00e4t\u00e4 se t\u00e4h\u00e4n, tallenna kent\u00e4t ja siirryt\u00e4\u00e4n rekister\u00f6im\u00e4ll\u00e4 lohkomme.<\/p>\n

Rekister\u00f6i Gutenberg-lohko<\/h3>\n

Teemaasi functions.php<\/code>tai laajennuskoodiisi sinun on kirjoitettava funktio, joka on kytketty toimintoon acf\/init<\/code>, ja kutsuttava [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>rekister\u00f6id\u00e4ksesi lohkon. Koska t\u00e4m\u00e4 toiminto on melko uusi ACF:ss\u00e4 ja riippuu aktivoitavasta laajennuksesta, suosittelen, ett\u00e4 k\u00e4\u00e4rit koodisi jos-tarkistuksen sis\u00e4\u00e4n varmistaaksesi, ett\u00e4 teemasi tai laajennus ei kaada WordPressi\u00e4si.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
Lohkon rekister\u00f6iminen ACF:ll\u00e4 on itse asiassa samanlaista kuin kuinka rekister\u00f6imme mukautetun Gutenberg-lohkon manuaalisesti. ACF:n kanssa sinun on annettava yksil\u00f6llinen slugified nimi est\u00e4miselle name<\/code>. Suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n itsest\u00e4\u00e4n selvent\u00e4v\u00e4\u00e4 nime\u00e4, esim cta<\/code>. toimintakehotuslohkolle tai author-card<\/code>lohkolle, joka n\u00e4ytt\u00e4\u00e4 kirjoittajia tai vastaavaa. Jos olet hieman perehtynyt Gutenbergiin, saatat olla tietoinen siit\u00e4, ett\u00e4 kaikki lohkot on rekister\u00f6it\u00e4v\u00e4 nimiavaruudella, \/<\/code>ja sitten niiden slug-nimi. Esimerkiksi WordPressin nimiavaruus on core<\/code>, joten esimerkiksi WordPressin kappalelohko on nimelt\u00e4\u00e4n core\/paragraph<\/code>. ACF:ll\u00e4 nimiavaruus on acf, joten esimerkiksi yll\u00e4 oleva lohko rekister\u00f6id\u00e4\u00e4n Gutenbergiss\u00e4 nimell\u00e4 acf\/yourblock<\/code>. Jos rekister\u00f6it kent\u00e4si PHP:ll\u00e4, kuten n\u00e4et my\u00f6hemmin, meid\u00e4n on muistettava t\u00e4m\u00e4.<\/p>\n
category<\/code>M\u00e4\u00e4rit\u00e4t miss\u00e4 Gutenberg-kategoriassa haluat lohkosi n\u00e4kyv\u00e4n. T\u00e4ll\u00e4 hetkell\u00e4 mahdolliset arvot ovat, common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>tai embed<\/code>. Jos luot mukautettuja Gutenberg-luokkia, voit halutessasi lis\u00e4t\u00e4 ne niihin. Mit\u00e4 tulee WordPress Dashiconsin<\/a>icon<\/code> kuvakkeen nimiin (miinus).<\/a><\/p>\n
Voit ilmoittaa ACF:lle, kuinka t\u00e4m\u00e4 lohko hahmonnetaan, sinulla on kaksi vaihtoehtoa: joko anna funktion nimi avaimelle render_callback<\/code>(kuten edell\u00e4) tai anna avaimelle mallin nimi teemassasi render_template<\/code>. Joten jos haluat mieluummin viitata suoraan malliin, esim template-parts\/block-yourblock.php<\/code>. teemassasi, tee se n\u00e4in ja poista render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Yhdist\u00e4 kentt\u00e4ryhm\u00e4si rekister\u00f6ityyn lohkoon<\/h2>\n
Kun olet tyytyv\u00e4inen lohkon rekister\u00f6intikoodiin, on aika yhdist\u00e4\u00e4 lohko aiemmin tekemiisi asetuksiin. Jos loit kent\u00e4t j\u00e4rjestelm\u00e4nvalvojassa, palaa takaisin ja valitse estosi sijainnissa. Ja jos lis\u00e4sit kentt\u00e4ryhm\u00e4n PHP:ll\u00e4, anna sijainnissa arvo ’ acf\/yourblock<\/code>’ miss\u00e4 yourblock<\/code>on se, mit\u00e4 annoit kuten name<\/code>yll\u00e4.<\/p>\n
Kirjoita malli<\/h2>\n
Viimeinen ja hauskin vaihe on lohkotulosteen mallin kirjoittaminen!<\/p>\n
Lohkon render\u00f6intitulosteen sijainti riippuu siit\u00e4, mit\u00e4 p\u00e4\u00e4tit k\u00e4ytt\u00e4\u00e4 lohkon rekister\u00f6inniss\u00e4 render_callback<\/code>tai render_template<\/code>.<\/p>\n
Jos annoit funktion nimen, render_callback<\/code>sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 t\u00e4m\u00e4 funktio teemasi functions.php<\/code>tai laajennuskoodissa. Saat nelj\u00e4 parametria funktiollesi, kuten n\u00e4et alla:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
Ensimm\u00e4inen parametri, $block<\/code>sis\u00e4lt\u00e4\u00e4 tiettyj\u00e4 Gutenbergin tietoja. Esimerkiksi jokaisessa Gutenberg-lohkossa on melkein aina className<\/code>, joka sinun tulee asettaa luokkaksi uloimmalle k\u00e4\u00e4reelle. $block['align']<\/code>kohdistusta varten voidaan my\u00f6s asettaa ja jotain, jonka haluat my\u00f6s lis\u00e4t\u00e4. Toinen parametri, $content<\/code>on aina tyhj\u00e4 ACF:ll\u00e4 (t\u00e4m\u00e4 t\u00e4ytet\u00e4\u00e4n, jos lis\u00e4\u00e4t sis\u00e4kk\u00e4isi\u00e4 lohkoja, mutta se ei ole mahdollista ACF:n kanssa). Boolen $is_preview<\/code>arvo on tosi, jos tarkastelemme t\u00e4ll\u00e4 hetkell\u00e4 lohkon hahmonnusta esikatselutilassa Gutenberg-editorissa. Ja lopuksi $post_id<\/code>on viesti, johon t\u00e4m\u00e4 lohko on lis\u00e4tty.<\/p>\n
Mit\u00e4 tulee kenttiin, jotka haet kent\u00e4t tavalliseen tapaan, get_field()<\/code>. HTML-tulostus riippuu t\u00e4ysin sinusta ja siit\u00e4, kuinka haluat tulostaa kent\u00e4si.<\/p>\n
render_template<\/code>Jos annoit sen sijaan mallitiedoston, luo tiedosto m\u00e4\u00e4ritettyyn paikkaan teemassasi. Sen sis\u00e4ll\u00e4 sinulla on p\u00e4\u00e4sy t\u00e4sm\u00e4lleen samoihin globaaleihin muuttujiin kuin yll\u00e4 olevalla funktiolla (esimerkiksi $block<\/code>). Esimerkiksi:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
Ja siin\u00e4 kaikki. N\u00e4in helppoa on luoda mukautettuja Gutenberg-lohkoja ACF:ll\u00e4.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
Niin helppoa kuin t\u00e4m\u00e4 olikin, lis\u00e4osaan \u2013 etenk\u00e4\u00e4n maksulliseen \u2013 luottaminen ei ole hyv\u00e4 loppuratkaisu, jos haluat kehitt\u00e4\u00e4 teemoja tai laajennuksia. Muista, ett\u00e4 lohkosi lakkaavat toimimasta, jos siirr\u00e4t teemakoodisi toiseen WordPressiin ilman ACF Prota. Tai jos kentt\u00e4asetuksiasi ei ole m\u00e4\u00e4ritetty (ellet upottanut niit\u00e4 koodiisi PHP:ll\u00e4 tai muista vied\u00e4 ja tuoda niit\u00e4). Teeman (tai laajennuksen) kehitt\u00e4j\u00e4n\u00e4, joka jakelee koodia, et voi odottaa jokaisen k\u00e4ytt\u00e4j\u00e4n ostavan oman ACF Pron lisenssin saadakseen teemasi toimimaan! Mutta t\u00e4m\u00e4 on hyv\u00e4 v\u00e4liaikainen ratkaisu niille, jotka eiv\u00e4t osaa tai eiv\u00e4t tarvitse koodausta.<\/p>\n
Jos olet varma, ett\u00e4 sinun on otettava askel ja opittava Javascript ja Gutenberg, tutustu Gutenberg-viestin esittelyyn<\/a> tai Gutenberg-luokkaan<\/a> t\u00e4ll\u00e4 sivustolla saadaksesi lis\u00e4tietoja.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 viesti selitt\u00e4\u00e4, kuinka voit k\u00e4ytt\u00e4\u00e4 ACF:\u00e4\u00e4 luomaan mukautettuja Gutenberg-lohkoja, joissa sinun tarvitsee vain k\u00e4sitell\u00e4 PHP-malleja. Javascripti\u00e4 ei tarvita!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,719,895,813,917,917,1110,834,843,813,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233460","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-kehittaejae","11":"category-laajennuksia","12":"category-muut","14":"category-n-a","15":"category-opas-aloittelijoille","16":"category-opetusohjelmia","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233460","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=233460"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233460\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}