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

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

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