使用 Gutenberg 和 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