使用 Gutenberg 和 ACF Block 重新建置網站 / Building a Website with Gutenberg and ACF Block_王昱程 / Yu-Cheng Wang

隨著古騰堡(Gutenberg) 編輯器的推出，有越來越多開發者跟開發商投入開發各種不同功能的區塊，但是若你原本不熟悉 React 這套 Javascript 框架，開發古騰堡區塊的學習曲線相對來說還是高了點。新版的 Advanced Custom Fields(ACF) 讓你在不用學習 React 的狀況下，打造出屬於自己的古騰堡區塊，讓你的後台擁有全新的使用者體驗。 這次的分享會使用一個實際的案例來跟大家說明，在過去古騰堡尚未推出前，如何使用 ACF 來開發一個客製化的網站和後台編輯界面，以及如何將這樣的網站轉移到以古騰堡編輯器加上 ACF Block 為主的編輯體驗。

Transcript

1. 使用 Gutenberg 和 ACF Blocks 重新建置網站 WordCamp Taipei 2019 Building A Website With Gutenberg And ACF Blocks
2. 王昱程 / Yu-Cheng Wang / Stanley
 https://ucheng.io
 Freelance WordPress Developer / 網站建置開發顧問 WordPress Meetup Taichung Co-organizer WordCamp Taipei 2019
3. WordCamp Taipei 2019 你如何建置網站？
4. 你覺得 WordPress 容易使用嗎？ WordCamp Taipei 2019
5. 今天要分享什麼？ •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器：ACF Flexible Content •使用 Gutenberg 和 ACF Block 重新建置網站 WordCamp Taipei 2019
6. 今天要分享什麼？ •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器：ACF Flexible Content •使用 Gutenberg 和 ACF Block 重新建置網站 WordCamp Taipei 2019
7. 今天要分享什麼？ •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器：ACF Flexible Content •使用 Gutenberg 和 ACF Block 重新建置網站 WordCamp Taipei 2019
8. 多功能性的佈景主題 WordCamp Taipei 2019 1 2 3 建置網站的方式 …
9. WordCamp Taipei 2019 輕量化佈景主題 + 頁面編輯器 
 + 建置網站的方式 1 2 3
10. WordCamp Taipei 2019 客製化佈景主題 建置網站的方式 1 2 3 Icons made by Eucalyp from Flaticon
11. 選擇的考量因素 使用者對工具的熟悉程度 WordCamp Taipei 2019 1 2 3 4 Icons made by Eucalyp from Flaticon
12. 專案複雜度和時程 WordCamp Taipei 2019 Icons made by Eucalyp from Flaticon 選擇的考量因素 1 2 3 4
13. 團隊規模和技能 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons made by Eucalyp from Flaticon
14. 教育訓練、維護支援 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons made by Eucalyp from Flaticon
15. WordCamp Taipei 2019 自訂欄位 (Custom Field)
16. WordCamp Taipei 2019 自訂欄位 (Custom Field)
17. WordCamp Taipei 2019 自訂欄位 (Custom Field)
18. WordCamp Taipei 2019 Advanced Custom Fields (ACF)
19. Field Types in ACF WordCamp Taipei 2019
20. Use Case: 作品內容 •預先設計好的區塊內容格式 •無限的區塊內容數量 •可自由改變區塊順序 WordCamp Taipei 2019
21. ACF Flexible content •A Simple , Structured, 
 block-based editor •輕量化的頁面編輯器 WordCamp Taipei 2019
22. ACF Flexible content WordCamp Taipei 2019 WordCamp Taipei 2019 Editing Fields
23. ACF Flexible content WordCamp Taipei 2019 Editing Fields
24. ACF Flexible content WordCamp Taipei 2019 Editing Fields
25. ACF Flexible content WordCamp Taipei 2019 Editing Fields
26. WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content -Editing Content
27. ACF Flexible content -Editing Content WordCamp Taipei 2019
28. WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content - Template
29. ACF Flexible Content - Frontend Display WordCamp Taipei 2019
30. Cheers! WordCamp Taipei 2019
31. 但是… WordCamp Taipei 2019
32. WordCamp Taipei 2019
33. Into the Gutenberg Era WordCamp Taipei 2019
34. Into the Gutenberg Era WordCamp Taipei 2019
35. Learn JavaScript, Deeply Gutenberg • React WordCamp Taipei 2019
36. ACF 5.8 WordCamp Taipei 2019
37. WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block
38. WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block
39. WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block
40. 建立欄位群組 - Create field group WordCamp Taipei 2019 Slider Block - Step 2
41. WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 - Create field group
42. WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 - Create field group
43. 顯示區塊 - Render the Block WordCamp Taipei 2019 Slider Block - Step 3
44. WordCamp Taipei 2019 Slider Block - Step 3 顯示區塊 - Render the Block
45. Slider Block WordCamp Taipei 2019
46. WordCamp Taipei 2019 Slider Block
47. WordCamp Taipei 2019 編輯模式 - Edit Mode Slider Block
48. WordCamp Taipei 2019 預覽模式 - Preview Mode Slider Block
49. WordCamp Taipei 2019 你如何建置網站？
50. 你覺得 WordPress 容易使用嗎？ WordCamp Taipei 2019
51. 選擇適合使用者和團隊 的架站方式和工具 WordCamp Taipei 2019 Choosing The Right Tools For Your Users and Your Team to Build the Website. Icons made by Eucalyp from Flaticon
52. WordPress 並不簡單，但是你可以讓他變簡單 WordCamp Taipei 2019 Image by StartupStockPhotos from Pixabay