{"id":233471,"date":"2023-02-14T12:54:00","date_gmt":"2023-02-14T09:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233471"},"modified":"2022-11-10T23:52:31","modified_gmt":"2022-11-10T20:52:31","slug":"kuidas-teha-kohandatud-gutenbergi-plokke-advanced-custom-fields-pro-abil","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-teha-kohandatud-gutenbergi-plokke-advanced-custom-fields-pro-abil\/","title":{"rendered":"Kuidas teha kohandatud Gutenbergi plokke Advanced Custom Fields Pro abil"},"content":{"rendered":"\n

Alates Advanced Custom Fields (ACF) Pro versioonist 5.8<\/a> saate kohandatud Gutenbergi plokkide loomiseks kasutada ACF-i. K\u00f5ik, mida vajate, on PHP-mallid. See muudab v\u00e4ga lihtsaks arendajatel, kes ei ole veel kogenud kaasaegse Javascriptiga, mis on vajalik Gutenbergi jaoks kohandatud plokkide loomiseks mis tahes ACF-i v\u00e4ljat\u00fc\u00fcpidega. Pidage meeles, et see funktsioon on saadaval ainult Advanced Custom Fields tasulises versioonis (Pro<\/a> ). See pole tasuta versioonis saadaval, seega peate ostma litsentsi.<\/p>\n

Kui olete WordPressi toimetaja v\u00f5i veebihaldur, kes ei soovi kodeerimisesse s\u00fcvitsi sukelduda, on see postitus kindlasti teie jaoks. Kui aga soovite olla WordPressi teema v\u00f5i pistikprogrammide arendaja, soovitan teil \u00f5ppida, kuidas luua oma kohandatud plokke. T\u00e4psemate kohandatud v\u00e4ljade kasutamine plokkide loomiseks v\u00f5ib aga anda kena sissejuhatuse kohandatud plokkide k\u00e4sitlemisse Gutenbergis.<\/p>\n

Looge ACF-iga Gutenbergi plokk<\/h2>\n

T\u00e4psemate kohandatud v\u00e4ljadega kohandatud Gutenbergi ploki loomiseks on p\u00f5him\u00f5tteliselt kolm lihtsat sammu. Esimene on lihtne ja ilmselt tuttav; v\u00e4ljade (seadete) seadistamine, mida soovite oma plokis lisada. Teine samm on ACF-i funktsiooni kasutamine Gutenbergi ploki registreerimiseks. Ja kolmas samm on ploki PHP-malli kirjutamine. Kirjutate lihtsalt HTML-i ja k\u00e4sitlete s\u00e4tteid t\u00e4pselt nii, nagu teeksite muidu ACF-v\u00e4ljadega. Ja see ongi k\u00f5ik! (Olgu, v\u00f5ib-olla on veel neljas samm; ploki kujundamine. Aga ma ei hakka selles postituses sellesse laskuma).<\/p>\n

Looge oma seaded\/v\u00e4ljad<\/h3>\n

Kui olete Advanced Custom Fields varem kasutanud, teate t\u00f5en\u00e4oliselt, kuidas v\u00e4lju seadistada. Selle tegemiseks saate kasutada Advanced Custom Field administraatoriliidest. V\u00f5i kui soovite, et plokis\u00e4tted oleksid teie pistikprogrammi v\u00f5i teemasse manustatud, kirjutage s\u00e4tted PHP-ga v\u00e4lja. Mul on t\u00e4ielik viitepostitus ACF-i s\u00e4tete lisamise kohta PHP-ga<\/a>.<\/p>\n

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

Peamine asi, mida peate oma grupiga tegema, on asukoha m\u00e4\u00e4ramine "Blokeeri". Kuid kuna me pole oma blokki veel registreerinud, on see vaikimisi v\u00e4\u00e4rtuseks "K\u00f5ik". J\u00e4tke see sinnapaika, salvestage v\u00e4ljad ja j\u00e4tkame meie ploki registreerimine.<\/p>\n

Registreerige Gutenbergi plokk<\/h3>\n

Teema functions.php<\/code>v\u00f5i pistikprogrammi koodis peate kirjutama funktsiooniga \u00fchendatud funktsiooni ja ploki registreerimiseks acf\/init<\/code>helistama. [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>Kuna see funktsioon on ACF-is \u00fcsna uus ja s\u00f5ltub aktiveeritavast pistikprogrammist, soovitan teil m\u00e4hida oma koodi if-kontrolli sisse, et veenduda, et teie teema v\u00f5i pistikprogramm ei jookse teie WordPressi kokku.<\/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
Ploki registreerimine ACF-iga sarnaneb tegelikult sellele, kuidas me registreeriksime kohandatud Gutenbergi ploki k\u00e4sitsi. ACF-i puhul peate blokeerimise jaoks andma kordumatu libiseva nime name<\/code>. Soovitan kasutada iseenesestm\u00f5istetavat nime, nt cta<\/code>tegevusele kutsuva ploki v\u00f5i author-card<\/code>autoreid n\u00e4itava ploki v\u00f5i muu sarnase puhul. Kui olete Gutenbergiga veidi tuttav, v\u00f5ite olla teadlik, et k\u00f5ik plokid peavad olema registreeritud nimeruumiga, a \/<\/code>ja seej\u00e4rel nende slug-nimega. N\u00e4iteks WordPressi nimeruum on core<\/code>, nii et n\u00e4iteks WordPressi l\u00f5iguplokki nimetatakse core\/paragraph<\/code>. ACF-i puhul on nimeruum acf, nii et n\u00e4iteks \u00fclaltoodud plokk registreeritakse Gutenbergis kui acf\/yourblock<\/code>. Kui registreerite oma v\u00e4ljad PHP-ga, nagu n\u00e4ete hiljem, peame seda meeles pidama.<\/p>\n
Siin category<\/code>saate m\u00e4\u00e4rata, millises Gutenbergi kategoorias soovite oma plokki kuvada. Hetkel on v\u00f5imalikud v\u00e4\u00e4rtused common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, v\u00f5i embed<\/code>. Kui loote kohandatud Gutenbergi kategooriad, saate need soovi korral neile lisada. Esitage mis icon<\/code>tahes WordPressi Dashiconsi<\/a> ikooni nimi (miinus).<\/p>\n
ACF-i teavitamiseks, kuidas seda plokki renderdada, on teil kaks v\u00f5imalust: kas anda v\u00f5tmele funktsiooni nimi render_callback<\/code>(nagu \u00fclalpool) v\u00f5i anda v\u00f5tmele oma teemas malli nimi render_template<\/code>. Nii et kui eelistate viidata otse mallile, nt template-parts\/block-yourblock.php<\/code>oma teemas, tehke seda lihtsalt nii ja eemaldage render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
\u00dchendage oma p\u00f5llur\u00fchm registreeritud plokiga<\/h2>\n
Kui olete oma ploki registreerimiskoodiga rahul, on aeg \u00fchendada plokk varem tehtud s\u00e4tetega. Kui l\u00f5ite v\u00e4ljad administraatoris, minge lihtsalt tagasi ja valige jaotises Asukoht oma blokeering. Ja kui lisasite v\u00e4ljar\u00fchma PHP-ga, sisestage asukohas v\u00e4\u00e4rtus " acf\/yourblock<\/code>", kus yourblock<\/code>on see, mille esitasite nagu name<\/code>\u00fclal.<\/p>\n
Kirjutage mall<\/h2>\n
Viimane ja k\u00f5ige l\u00f5busam samm on plokiv\u00e4ljundi malli kirjutamine!<\/p>\n
Teie ploki renderdusv\u00e4ljundi asukoht s\u00f5ltub sellest, mida otsustasite ploki registreerimisel kasutada render_callback<\/code>v\u00f5i render_template<\/code>.<\/p>\n
Kui sisestasite funktsiooni nime, render_callback<\/code>peate selle funktsiooni oma teema functions.php<\/code>v\u00f5i pistikprogrammi koodis m\u00e4\u00e4ratlema. Saate oma funktsioonile neli parameetrit, nagu n\u00e4ete allpool:<\/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
Esimene parameeter $block<\/code>sisaldab teatud teavet Gutenbergilt. N\u00e4iteks igas Gutenbergi plokis on peaaegu alati className<\/code>, mille peaksite m\u00e4\u00e4rama oma v\u00e4limise \u00fcmbrise klassiks. $block['align']<\/code>joondamiseks v\u00f5iks ka m\u00e4\u00e4rata ja midagi lisada. Teine parameeter, $content<\/code>j\u00e4\u00e4b ACF-i puhul alati t\u00fchjaks (see t\u00e4idetakse, kui lisate pesastatud plokid, kuid ACF-i puhul pole see v\u00f5imalik). T\u00f5ev\u00e4\u00e4rtus $is_preview<\/code>on t\u00f5ene, kui vaatame praegu Gutenbergi redaktoris ploki renderdamist eelvaatere\u017eiimis. Ja l\u00f5puks $post_id<\/code>on postitus, kuhu see plokk lisatakse.<\/p>\n
Mis puutub v\u00e4ljadesse, mille jaoks v\u00e4ljad laadite nagu tavaliselt, siis get_field()<\/code>. HTML-i v\u00e4ljund s\u00f5ltub t\u00e4ielikult teist ja sellest, kuidas soovite oma v\u00e4lju v\u00e4ljastada.<\/p>\n
Kui lisasite selle asemel mallifaili render_template<\/code>, looge fail lihtsalt oma teemas m\u00e4\u00e4ratud asukohta. Selle sees on teil juurdep\u00e4\u00e4s t\u00e4pselt samadele globaalsetele muutujatele nagu \u00fclaltoodud funktsiooni puhul (n\u00e4iteks $block<\/code>). N\u00e4iteks:<\/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 see on k\u00f5ik. Nii lihtne on ACF-iga kohandatud Gutenbergi plokkide loomine.<\/p>\n
J\u00e4reldus<\/h2>\n
Nii lihtne kui see ka oli, pole pistikprogrammile (eriti tasulisele) lootmine hea l\u00f5pplahendus, kui soovite teemasid v\u00f5i pistikprogramme arendada. Pidage meeles, et teie plokid lakkavad t\u00f6\u00f6tamast, kui teisaldate oma teemakoodi teise WordPressi ilma ACF Prota. V\u00f5i kui teie v\u00e4ljaseaded pole seadistatud (v\u00e4lja arvatud juhul, kui olete neid PHP-ga oma koodi manustanud v\u00f5i kindlasti eksportida ja importida). Teema (v\u00f5i pistikprogrammi) arendajana, kes levitab koodi, ei saa te eeldada, et iga kasutaja ostab teie teema toimimiseks oma ACF Pro litsentsi! Kuid see on hea ajutine lahendus neile, kes ei saa v\u00f5i ei pea kodeerima.<\/p>\n
Kui olete veendunud, et peate astuma sammu ja \u00f5ppima Javascripti ja Gutenbergi, vaadake lisateabe saamiseks minu tutvustust Gutenbergi postitusega<\/a> v\u00f5i Gutenbergi kategooriat<\/a> sellel saidil.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
See postitus selgitab, kuidas saate ACF-i abil luua kohandatud Gutenbergi plokke, kus peate k\u00e4sitlema ainult PHP-malle. Javascripti pole vaja!<\/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":[718,894,718,833,894,916,916,1110,842,812,812,833,842,863,863],"tags":[1165],"class_list":{"0":"post-233471","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-arendaja","8":"category-kood","10":"category-juhend-algajatele","12":"category-muud","14":"category-n-a","15":"category-opetused","16":"category-pistikprogrammid","20":"category-wordpress-4","22":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233471","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=233471"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}