使用 ACF Pro 打造客製化古騰堡區塊

80c9848f1aca614f619a9d974b852dc0?s=47 Yucheng Wang
February 17, 2019
Programming
1
170

使用 ACF Pro 打造客製化古騰堡區塊

製作一個古騰堡區塊並不容易，必須要了解react。透過 ACF Pro 可以讓你在不熟悉 react 的狀況下製作出客製化的古騰堡區塊。

80c9848f1aca614f619a9d974b852dc0?s=128

Yucheng Wang

February 17, 2019
Tweet

More Decks by Yucheng Wang

See All by Yucheng Wang
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
92
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
20
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
93
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
97
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
3
170
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
540
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
44
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
70
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
83

Other Decks in Programming

See All in Programming
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
2
330
D331d219bbb80155f3687db8009984f0?s=48 kinkinkon1009
0
650
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
230
D6fcc16462fbe93673342da3ff5d8121?s=48 xhochy
0
110
B85111454fe19a425c375a28bc27996b?s=48 kitsuneeee
4
540
67962a042668ffac9323b8e0c55eee6e?s=48 keisuke69
6
3.1k
275e91e7de0d6321f3759c2d0789c6d2?s=48 amaltson
2
240
Bc142fbacf80354db09fe3dda44afcf1?s=48 nobonobo
0
130
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
10
2.5k
1e72c797afb9bab65655a1eb7d183460?s=48 syobochim
0
130
75cf8176bf14811428f77d8fe737f0d5?s=48 konstantin_diener
0
110
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
1
480

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
12
890
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
258
11k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
2.9k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
341
26k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
370k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
346
20k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
72
7.2k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
203
35k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
114
7k

Transcript

  1. 使⽤用 ACF Pro 打造客 製化古騰堡區塊 WordPress Meetup Taichung #8

  2. 王昱程 Stanley
 @uchengwang
 PHP / Laravel / WordPress Developer WordPress

    Meetup Taichung #8

  3. ⼤大綱 • 使⽤用內建的區塊製作出⾴頁⾯面 • 使⽤用⾃自製的區塊製作出⾴頁⾯面 • 如何製作 WordPress Meetup Taichung

    #8

  4. LEARN JAVASCRIPT, DEEPLY Matt Mullenweg, WordCamp US 2015 Creative Commons

    Attribution 3.0 Unported

  5. Learn JavaScript, Deeply Calypso • Mac App • Node +

    React • Open Source WordPress Meetup Taichung #8

  6. Learn JavaScript, Deeply Gutenberg • React WordPress Meetup Taichung #8

  7. 區塊(Block) WordPress Meetup Taichung #8

  8. Third-party Block Library coblocks … WordPress Meetup Taichung #8

  9. 為什什麼要⾃自⼰己打造區塊? WordPress Meetup Taichung #8

  10. 為什什麼要⾃自⼰己打造區塊? 彈性 便便利利 客製化 提升編輯體驗 WordPress Meetup Taichung #8

  11. 範例例演⽰示 - 營業據點 WordPress Meetup Taichung #8

  12. 使⽤用內建的區塊製作營業據點資訊 分店照片(圖片) 分店名稱(標題) 分店資訊(段落落) WordPress Meetup Taichung #8

  13. 使⽤用內建的區塊製作分店資訊 1.需要重複加入不同的區塊來來完成所需的⾴頁⾯面內容
 2.無法⾃自⾏行行控制樣板(html) 3.較繁瑣且較容易易出錯 WordPress Meetup Taichung #8

  14. ACF(Advanced Custom Field)

  15. 什什麼是 ACF(Advanced Custom Field)? WordPress Meetup Taichung #8

  16. 什什麼是 ACF(Advanced Custom Field)? WordPress Meetup Taichung #8

  17. 什什麼是 ACF(Advanced Custom Field)?

  18. ACF 5.8(beta)

  19. 客製化分店資訊區塊 - step 1 註冊區塊 WordPress Meetup Taichung #8

  20. 客製化分店資訊區塊 - step 2 設定 ACF 欄欄位 WordPress Meetup Taichung

    #8

  21. 客製化分店資訊區塊 - step 3 設定顯⽰示樣板 WordPress Meetup Taichung #8

  22. Thank You WordPress Meetup Taichung #8