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

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

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

使用 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
160
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
38
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
150
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
130
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
3
200
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
690
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
52
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
82
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
100

Other Decks in Programming

See All in Programming
Dc8d7b0277a1646d6842105241e8bef5?s=48 peacock0803sz
0
220
Bd7bd8f154dbbbdc40af37d59baec53b?s=48 marushosummers
0
760
347b7e6efc62b633d37a5d0a8d62ae86?s=48 junghyeonjae
0
180
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
120
1d42b38276c3d2c7cc931fa444c13488?s=48 nasum
19
7.2k
0aac627116c6e2a87b9ae179500801df?s=48 stormcat24
0
570
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
13
2.5k
B9012970f22b84c5b344ffa6f8a884d5?s=48 camaelon
0
140
F73ac5e3ccf3d4dbfffff61b14d2335c?s=48 pakio
0
350
6885b1c7fe50f4c0a23775b7b94ebd94?s=48 nosuke0926
0
130
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
2.5k
A5f52fd719e8e9a5c9e74f8b179dced7?s=48 lutecia16v
0
580

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
33
2.3k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.8k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
189
14k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.3k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
11c84dff30266b907714802088852677?s=48 jasonvnalue
87
8.3k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
349
20k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
24
870
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
85
5k

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