Advanced Custom Fields (ACF) Pron versiosta 5.8 lähtien voit luoda mukautettuja Gutenberg-lohkoja ACF:n avulla. Sinun tarvitsee vain käsitellä PHP-malleja. Tämän ansiosta kehittäjien, jotka eivät ole vielä kokeneet nykyaikaisen Javascriptin käyttöön, on erittäin helppoa luoda mukautettuja lohkoja Gutenbergille millä tahansa ACF:n tarjoamilla kenttätyypeillä. Muista, että tämä toiminto on saatavilla vain Advanced Custom Fieldsin maksullisessa versiossa (Pro ). Se ei ole saatavilla ilmaisessa versiossa, joten sinun on ostettava lisenssi.
Jos olet WordPress-editori tai verkkovastaava, joka ei halua sukeltaa syvälle koodaukseen, tämä viesti on ehdottomasti sinua varten. Jos kuitenkin haluat olla WordPress-teeman tai laajennuksen kehittäjä, suosittelen ottamaan askeleen oppiaksesi luomaan omia mukautettuja lohkoja. Advanced Custom Fields -kenttien käyttäminen lohkojen luomiseen voi kuitenkin tarjota mukavan johdannon mukautettujen lohkojen käsittelyyn Gutenbergissä.
Luo Gutenberg-lohko ACF:llä
Mukautetun Gutenberg-lohkon luomiseen Advanced Custom Fields -kentillä on periaatteessa kolme yksinkertaista vaihetta. Ensimmäinen on helppo ja luultavasti tuttu; määritä kentät (asetukset), jotka haluat lohkossasi. Toinen vaihe on käyttää ACF:n toimintoa Gutenberg-lohkon rekisteröintiin. Ja kolmas vaihe on PHP-mallin kirjoittaminen lohkolle. Kirjoitat vain HTML-koodin ja käsittelet asetuksia aivan kuten tekisit muuten ACF-kenttien kanssa. Ja siinä se! (Okei, ehkä on neljäs vaihe; lohkon muotoilu. Mutta en mene siihen tässä viestissä).
Luo asetukset/kentät
Jos olet käyttänyt Advanced Custom Fields -toimintoa ennen kuin tiedät kentät määrittämisen. Voit tehdä tämän käyttämällä Advanced Custom Fieldin järjestelmänvalvojan käyttöliittymää. Tai jos haluat, että lohkoasetukset upotetaan laajennukseen tai teemaan, kirjoita asetukset PHP:llä. Minulla on täydellinen viiteviesti ACF-asetusten lisäämisestä PHP:llä.
Tärkein asia, joka sinun on tehtävä ryhmäsi kanssa, on asettaa sijainniksi "Estä". Mutta koska emme ole vielä rekisteröineet lohkoamme, se on oletuksena "Kaikki". Jätä se tähän, tallenna kentät ja siirrytään rekisteröimällä lohkomme.
Rekisteröi Gutenberg-lohko
Teemaasi functions.phptai laajennuskoodiisi sinun on kirjoitettava funktio, joka on kytketty toimintoon acf/init, ja kutsuttava [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()rekisteröidäksesi lohkon. Koska tämä toiminto on melko uusi ACF:ssä ja riippuu aktivoitavasta laajennuksesta, suosittelen, että käärit koodisi jos-tarkistuksen sisään varmistaaksesi, että teemasi tai laajennus ei kaada WordPressiäsi.
Lohkon rekisteröiminen ACF:llä on itse asiassa samanlaista kuin kuinka rekisteröimme mukautetun Gutenberg-lohkon manuaalisesti. ACF:n kanssa sinun on annettava yksilöllinen slugified nimi estämiselle name. Suosittelen käyttämään itsestään selventävää nimeä, esim cta. toimintakehotuslohkolle tai author-cardlohkolle, joka näyttää kirjoittajia tai vastaavaa. Jos olet hieman perehtynyt Gutenbergiin, saatat olla tietoinen siitä, että kaikki lohkot on rekisteröitävä nimiavaruudella, /ja sitten niiden slug-nimi. Esimerkiksi WordPressin nimiavaruus on core, joten esimerkiksi WordPressin kappalelohko on nimeltään core/paragraph. ACF:llä nimiavaruus on acf, joten esimerkiksi yllä oleva lohko rekisteröidään Gutenbergissä nimellä acf/yourblock. Jos rekisteröit kentäsi PHP:llä, kuten näet myöhemmin, meidän on muistettava tämä.
categoryMäärität missä Gutenberg-kategoriassa haluat lohkosi näkyvän. Tällä hetkellä mahdolliset arvot ovat, common, formatting, layout, widgetstai embed. Jos luot mukautettuja Gutenberg-luokkia, voit halutessasi lisätä ne niihin. Mitä tulee WordPress Dashiconsinicon kuvakkeen nimiin (miinus).
Voit ilmoittaa ACF:lle, kuinka tämä lohko hahmonnetaan, sinulla on kaksi vaihtoehtoa: joko anna funktion nimi avaimelle render_callback(kuten edellä) tai anna avaimelle mallin nimi teemassasi render_template. Joten jos haluat mieluummin viitata suoraan malliin, esim template-parts/block-yourblock.php. teemassasi, tee se näin ja poista render_callback:
Yhdistä kenttäryhmäsi rekisteröityyn lohkoon
Kun olet tyytyväinen lohkon rekisteröintikoodiin, on aika yhdistää lohko aiemmin tekemiisi asetuksiin. Jos loit kentät järjestelmänvalvojassa, palaa takaisin ja valitse estosi sijainnissa. Ja jos lisäsit kenttäryhmän PHP:llä, anna sijainnissa arvo ‘ acf/yourblock‘ missä yourblockon se, mitä annoit kuten nameyllä.
Kirjoita malli
Viimeinen ja hauskin vaihe on lohkotulosteen mallin kirjoittaminen!
Lohkon renderöintitulosteen sijainti riippuu siitä, mitä päätit käyttää lohkon rekisteröinnissä render_callbacktai render_template.
Jos annoit funktion nimen, render_callbacksinun on määritettävä tämä funktio teemasi functions.phptai laajennuskoodissa. Saat neljä parametria funktiollesi, kuten näet alla:
Ensimmäinen parametri, $blocksisältää tiettyjä Gutenbergin tietoja. Esimerkiksi jokaisessa Gutenberg-lohkossa on melkein aina className, joka sinun tulee asettaa luokkaksi uloimmalle kääreelle. $block['align']kohdistusta varten voidaan myös asettaa ja jotain, jonka haluat myös lisätä. Toinen parametri, $contenton aina tyhjä ACF:llä (tämä täytetään, jos lisäät sisäkkäisiä lohkoja, mutta se ei ole mahdollista ACF:n kanssa). Boolen $is_previewarvo on tosi, jos tarkastelemme tällä hetkellä lohkon hahmonnusta esikatselutilassa Gutenberg-editorissa. Ja lopuksi $post_idon viesti, johon tämä lohko on lisätty.
Mitä tulee kenttiin, jotka haet kentät tavalliseen tapaan, get_field(). HTML-tulostus riippuu täysin sinusta ja siitä, kuinka haluat tulostaa kentäsi.
render_templateJos annoit sen sijaan mallitiedoston, luo tiedosto määritettyyn paikkaan teemassasi. Sen sisällä sinulla on pääsy täsmälleen samoihin globaaleihin muuttujiin kuin yllä olevalla funktiolla (esimerkiksi $block). Esimerkiksi:
Ja siinä kaikki. Näin helppoa on luoda mukautettuja Gutenberg-lohkoja ACF:llä.
Johtopäätös
Niin helppoa kuin tämä olikin, lisäosaan – etenkään maksulliseen – luottaminen ei ole hyvä loppuratkaisu, jos haluat kehittää teemoja tai laajennuksia. Muista, että lohkosi lakkaavat toimimasta, jos siirrät teemakoodisi toiseen WordPressiin ilman ACF Prota. Tai jos kenttäasetuksiasi ei ole määritetty (ellet upottanut niitä koodiisi PHP:llä tai muista viedä ja tuoda niitä). Teeman (tai laajennuksen) kehittäjänä, joka jakelee koodia, et voi odottaa jokaisen käyttäjän ostavan oman ACF Pron lisenssin saadakseen teemasi toimimaan! Mutta tämä on hyvä väliaikainen ratkaisu niille, jotka eivät osaa tai eivät tarvitse koodausta.
Jos olet varma, että sinun on otettava askel ja opittava Javascript ja Gutenberg, tutustu Gutenberg-viestin esittelyyn tai Gutenberg-luokkaan tällä sivustolla saadaksesi lisätietoja.