Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る

Wordpressの鉄板プラグインともいえるACF(Advanced Custom Field)。有料版(ACF PRO)には、ACF Blocksというものがあるのをご存知でしょうか。コレを使うと独自に定義したコンポーネントをBlock Editor(Gutenberg Editor)から利用することが出来るようになります。今回はACF Blocksを使ったコンポーネント開発の流れについて、デモを交えつつご紹介します。

Transcript

1. Wordpress 
 + ACF(Pro) BlocksͰ
 ಠࣗίϯϙʔωϯτΛ࡞Δ @subuta 2020/1/29
2. ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa + Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
3. ໨࣍ w "$'
   #MPDLTͱ͸
   w ಠࣗίϯϙʔωϯτΛ࡞Δ
4. ໨࣍ w "$'
   #MPDLTͱ͸
   w ಠࣗίϯϙʔωϯτΛ࡞Δ
5. ACF Blocksͱ͸ https://www.advancedcustomfields.com/pro/
6. ACF Blocksͱ͸ https://www.advancedcustomfields.com/resources/blocks/
7. ACF Blocksͱ͸ 
   "$'ͷ130 ༗ঈ ൛ͷػೳͷҰͭ
 
   81ඪ४ͷ#MPDLػೳ +BWB4DSJQU ͱҧͬͯɺ1)1 ͷίʔυͷΈͰॻ͚Δɻ
 
   ׳Ε਌͠Μͩ1)1ͰςϯϓϨʔτΛॻ͚Δ ඪ४ͷ ํ͸3FBDUͷ+49 
 
   $VTUPN'JFMEͱ૊Έ߹ΘͤΔ͜ͱ͕Մೳ
8. ໨࣍ w "$'
   #MPDLTͱ͸
   w ಠࣗίϯϙʔωϯτΛ࡞Δ
9. ಠࣗίϯϙʔωϯτΛ࡞Δ σϞ
   IUUQTHJUIVCDPNTVCVUBXPSEQSFTT BDGCMPDLFYBNQMF
10. ಠࣗίϯϙʔωϯτΛ࡞Δ ࡉ͔͍͜ͱ͸ׂѪ͠·͢ɻಈ͘8PSEQSFTT؀ڥ͕खݩʹ͋Δલ ఏͱ͠·͢ɻҎԼৄࡉͰ͢ɻ
 
 
    IUUQTVSSFNFXSJUJOHTEPDLFSGPSMPDBMXPSEQSFTT EFWFMPQNFOU
    Λࢀߟʹͭͭ͠ɺ%PDLFS
    
    #FESPDL
    ͷߏ੒Ͱ ͢ɻ
 
    ςʔϚ͸
    VOEFSTDPSFT
    Λ࢖ͬͯ·͢ɻθϩ͔Β࡞Δ࣌ʹΦεεϝ
    
    σόοά͠΍͘͢͢ΔͨΊʹɺ-BSBWFMܥͷϥΠϒϥϦ JMMVNJOBUF TVQQPSU
    
    MBSBWFMIFMQFST
    
    ಠࣗͷϔϧύ Λ࢖ͬͯ·͢ɻ
    
    $44͸͓ͳ͡Έͷ5BJMXJOEΛ࢖ͬͯ·͢ɻ
11. ·ͱΊ 
    "$'
    #MPDLTͷػೳΛ࢖͑͹ಠࣗίϯϙʔωϯτΛ ࡞ΕΔɻ
 
    "$'
    $VTUPN
    'JFMETͷ͓͔͛Ͱɺهࣄͱؔ࿈͢Δ هࣄ΍ɺ޷͖ͳը૾ɾϦϯΫΛؚΊͨίϯϙʔωϯ τΛఆٛͰ͖Δɻ
 
    ͜Ε͚ͩͷػೳ͕෇͍ͨ
    "$'
    130
    ͕ࠓͳΒ  = 
    !ࣥච࣌఺
    ͳͷͰɺങ͏͔͠ແ͍‼
    
    º
    զຫ͢Ε͹ങ͑Δ
12. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠