Kuidas teha kohandatud Gutenbergi plokke Advanced Custom Fields Pro abil

Alates Advanced Custom Fields (ACF) Pro versioonist 5.8 saate kohandatud Gutenbergi plokkide loomiseks kasutada ACF-i. Kõik, mida vajate, on PHP-mallid. See muudab väga lihtsaks arendajatel, kes ei ole veel kogenud kaasaegse Javascriptiga, mis on vajalik Gutenbergi jaoks kohandatud plokkide loomiseks mis tahes ACF-i väljatüüpidega. Pidage meeles, et see funktsioon on saadaval ainult Advanced Custom Fields tasulises versioonis (Pro ). See pole tasuta versioonis saadaval, seega peate ostma litsentsi.

Kui olete WordPressi toimetaja või veebihaldur, kes ei soovi kodeerimisesse süvitsi sukelduda, on see postitus kindlasti teie jaoks. Kui aga soovite olla WordPressi teema või pistikprogrammide arendaja, soovitan teil õppida, kuidas luua oma kohandatud plokke. Täpsemate kohandatud väljade kasutamine plokkide loomiseks võib aga anda kena sissejuhatuse kohandatud plokkide käsitlemisse Gutenbergis.

Looge ACF-iga Gutenbergi plokk

Täpsemate kohandatud väljadega kohandatud Gutenbergi ploki loomiseks on põhimõtteliselt kolm lihtsat sammu. Esimene on lihtne ja ilmselt tuttav; väljade (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äsitlete sätteid täpselt nii, nagu teeksite muidu ACF-väljadega. Ja see ongi kõik! (Olgu, võib-olla on veel neljas samm; ploki kujundamine. Aga ma ei hakka selles postituses sellesse laskuma).

Looge oma seaded/väljad

Kui olete Advanced Custom Fields varem kasutanud, teate tõenäoliselt, kuidas välju seadistada. Selle tegemiseks saate kasutada Advanced Custom Field administraatoriliidest. Või kui soovite, et plokisätted oleksid teie pistikprogrammi või teemasse manustatud, kirjutage sätted PHP-ga välja. Mul on täielik viitepostitus ACF-i sätete lisamise kohta PHP-ga.

Peamine asi, mida peate oma grupiga tegema, on asukoha määramine "Blokeeri". Kuid kuna me pole oma blokki veel registreerinud, on see vaikimisi väärtuseks "Kõik". Jätke see sinnapaika, salvestage väljad ja jätkame meie ploki registreerimine.

Registreerige Gutenbergi plokk

Teema functions.phpvõi pistikprogrammi koodis peate kirjutama funktsiooniga ühendatud funktsiooni ja ploki registreerimiseks acf/inithelistama. [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()Kuna see funktsioon on ACF-is üsna uus ja sõltub aktiveeritavast pistikprogrammist, soovitan teil mähida oma koodi if-kontrolli sisse, et veenduda, et teie teema või pistikprogramm ei jookse teie WordPressi kokku.

Ploki registreerimine ACF-iga sarnaneb tegelikult sellele, kuidas me registreeriksime kohandatud Gutenbergi ploki käsitsi. ACF-i puhul peate blokeerimise jaoks andma kordumatu libiseva nime name. Soovitan kasutada iseenesestmõistetavat nime, nt ctategevusele kutsuva ploki või author-cardautoreid näitava ploki või muu sarnase puhul. Kui olete Gutenbergiga veidi tuttav, võite olla teadlik, et kõik plokid peavad olema registreeritud nimeruumiga, a /ja seejärel nende slug-nimega. Näiteks WordPressi nimeruum on core, nii et näiteks WordPressi lõiguplokki nimetatakse core/paragraph. ACF-i puhul on nimeruum acf, nii et näiteks ülaltoodud plokk registreeritakse Gutenbergis kui acf/yourblock. Kui registreerite oma väljad PHP-ga, nagu näete hiljem, peame seda meeles pidama.

Siin categorysaate määrata, millises Gutenbergi kategoorias soovite oma plokki kuvada. Hetkel on võimalikud väärtused common, formatting, layout, widgets, või embed. Kui loote kohandatud Gutenbergi kategooriad, saate need soovi korral neile lisada. Esitage mis icontahes WordPressi Dashiconsi ikooni nimi (miinus).

ACF-i teavitamiseks, kuidas seda plokki renderdada, on teil kaks võimalust: kas anda võtmele funktsiooni nimi render_callback(nagu ülalpool) või anda võtmele oma teemas malli nimi render_template. Nii et kui eelistate viidata otse mallile, nt template-parts/block-yourblock.phpoma teemas, tehke seda lihtsalt nii ja eemaldage render_callback:

Ühendage oma põllurühm registreeritud plokiga

Kui olete oma ploki registreerimiskoodiga rahul, on aeg ühendada plokk varem tehtud sätetega. Kui lõite väljad administraatoris, minge lihtsalt tagasi ja valige jaotises Asukoht oma blokeering. Ja kui lisasite väljarühma PHP-ga, sisestage asukohas väärtus " acf/yourblock", kus yourblockon see, mille esitasite nagu nameülal.

Kirjutage mall

Viimane ja kõige lõbusam samm on plokiväljundi malli kirjutamine!

Teie ploki renderdusväljundi asukoht sõltub sellest, mida otsustasite ploki registreerimisel kasutada render_callbackvõi render_template.

Kui sisestasite funktsiooni nime, render_callbackpeate selle funktsiooni oma teema functions.phpvõi pistikprogrammi koodis määratlema. Saate oma funktsioonile neli parameetrit, nagu näete allpool:

Esimene parameeter $blocksisaldab teatud teavet Gutenbergilt. Näiteks igas Gutenbergi plokis on peaaegu alati className, mille peaksite määrama oma välimise ümbrise klassiks. $block['align']joondamiseks võiks ka määrata ja midagi lisada. Teine parameeter, $contentjääb ACF-i puhul alati tühjaks (see täidetakse, kui lisate pesastatud plokid, kuid ACF-i puhul pole see võimalik). Tõeväärtus $is_previewon tõene, kui vaatame praegu Gutenbergi redaktoris ploki renderdamist eelvaaterežiimis. Ja lõpuks $post_idon postitus, kuhu see plokk lisatakse.

Mis puutub väljadesse, mille jaoks väljad laadite nagu tavaliselt, siis get_field(). HTML-i väljund sõltub täielikult teist ja sellest, kuidas soovite oma välju väljastada.

Kui lisasite selle asemel mallifaili render_template, looge fail lihtsalt oma teemas määratud asukohta. Selle sees on teil juurdepääs täpselt samadele globaalsetele muutujatele nagu ülaltoodud funktsiooni puhul (näiteks $block). Näiteks:

Ja see on kõik. Nii lihtne on ACF-iga kohandatud Gutenbergi plokkide loomine.

Järeldus

Nii lihtne kui see ka oli, pole pistikprogrammile (eriti tasulisele) lootmine hea lõpplahendus, kui soovite teemasid või pistikprogramme arendada. Pidage meeles, et teie plokid lakkavad töötamast, kui teisaldate oma teemakoodi teise WordPressi ilma ACF Prota. Või kui teie väljaseaded pole seadistatud (välja arvatud juhul, kui olete neid PHP-ga oma koodi manustanud või kindlasti eksportida ja importida). Teema (või 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õi ei pea kodeerima.

Kui olete veendunud, et peate astuma sammu ja õppima Javascripti ja Gutenbergi, vaadake lisateabe saamiseks minu tutvustust Gutenbergi postitusega või Gutenbergi kategooriat sellel saidil.