Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

06b9c7286903fd1062a201e1a3ac65d9?s=128

Shunta Saito

January 29, 2020
Tweet

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. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠