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

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

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

使用 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
140
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
31
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
130
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
120
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
3
190
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
640
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
50
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
0
81
80c9848f1aca614f619a9d974b852dc0?s=48 ucheng
1
94

Other Decks in Programming

See All in Programming
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
5
1.5k
8847086af047cbf895ab3277b59529fe?s=48 andpad
1
190
56047a7b11797f42c2e7030d771fe803?s=48 oleur
1
100
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
110
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
12
4.7k
069a861584701a8b5f72a838bd7e0f2e?s=48 jschaedl
2
140
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
0
170
03d26b71500c1bf966aedbd125baee45?s=48 udaikue
0
350
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
1
660
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
1.4k
67de06c6cee3ece0f56494e91e48117e?s=48 tkitsunai
6
2.6k
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
0
410

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
38k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
590
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.7k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.1k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
610
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
54
4.4k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
1.5k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
146
12k

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