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

Slide 1

Slide 1 text

使用 Gutenberg 和 ACF Blocks 重新建置網站 WordCamp Taipei 2019 Building A Website With Gutenberg And ACF Blocks

Slide 2

Slide 2 text

王昱程 / Yu-Cheng Wang / Stanley  https://ucheng.io  Freelance WordPress Developer / 網站建置開發顧問 WordPress Meetup Taichung Co-organizer WordCamp Taipei 2019

Slide 3

Slide 3 text

WordCamp Taipei 2019 你如何建置網站？

Slide 4

Slide 4 text

你覺得 WordPress 容易使用嗎？ WordCamp Taipei 2019

Slide 5

Slide 5 text

今天要分享什麼？ •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器：ACF Flexible Content •使用 Gutenberg 和 ACF Block 重新建置網站 WordCamp Taipei 2019

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

多功能性的佈景主題 WordCamp Taipei 2019 1 2 3 建置網站的方式 …

Slide 9

Slide 9 text

WordCamp Taipei 2019 輕量化佈景主題 + 頁面編輯器   + 建置網站的方式 1 2 3

Slide 10

Slide 10 text

WordCamp Taipei 2019 客製化佈景主題建置網站的方式 1 2 3 Icons made by Eucalyp from Flaticon

Slide 11

Slide 11 text

選擇的考量因素使用者對工具的熟悉程度 WordCamp Taipei 2019 1 2 3 4 Icons made by Eucalyp from Flaticon

Slide 12

Slide 12 text

專案複雜度和時程 WordCamp Taipei 2019 Icons made by Eucalyp from Flaticon 選擇的考量因素 1 2 3 4

Slide 13

Slide 13 text

團隊規模和技能 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons made by Eucalyp from Flaticon

Slide 14

Slide 14 text

教育訓練、維護支援 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons made by Eucalyp from Flaticon

Slide 15

Slide 15 text

WordCamp Taipei 2019 自訂欄位 (Custom Field)

Slide 16

Slide 16 text

WordCamp Taipei 2019 自訂欄位 (Custom Field)

Slide 17

Slide 17 text

WordCamp Taipei 2019 自訂欄位 (Custom Field)

Slide 18

Slide 18 text

WordCamp Taipei 2019 Advanced Custom Fields (ACF)

Slide 19

Slide 19 text

Field Types in ACF WordCamp Taipei 2019

Slide 20

Slide 20 text

Use Case: 作品內容 •預先設計好的區塊內容格式 •無限的區塊內容數量 •可自由改變區塊順序 WordCamp Taipei 2019

Slide 21

Slide 21 text

ACF Flexible content •A Simple , Structured,   block-based editor •輕量化的頁面編輯器 WordCamp Taipei 2019

Slide 22

Slide 22 text

ACF Flexible content WordCamp Taipei 2019 WordCamp Taipei 2019 Editing Fields

Slide 23

Slide 23 text

ACF Flexible content WordCamp Taipei 2019 Editing Fields

Slide 24

Slide 24 text

ACF Flexible content WordCamp Taipei 2019 Editing Fields

Slide 25

Slide 25 text

ACF Flexible content WordCamp Taipei 2019 Editing Fields

Slide 26

Slide 26 text

WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content -Editing Content

Slide 27

Slide 27 text

ACF Flexible content -Editing Content WordCamp Taipei 2019

Slide 28

Slide 28 text

WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content - Template

Slide 29

Slide 29 text

ACF Flexible Content - Frontend Display WordCamp Taipei 2019

Slide 30

Slide 30 text

Cheers! WordCamp Taipei 2019

Slide 31

Slide 31 text

但是… WordCamp Taipei 2019

Slide 32

Slide 32 text

WordCamp Taipei 2019

Slide 33

Slide 33 text

Into the Gutenberg Era WordCamp Taipei 2019

Slide 34

Slide 34 text

Into the Gutenberg Era WordCamp Taipei 2019

Slide 35

Slide 35 text

Learn JavaScript, Deeply Gutenberg • React WordCamp Taipei 2019

Slide 36

Slide 36 text

ACF 5.8 WordCamp Taipei 2019

Slide 37

Slide 37 text

WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block

Slide 38

Slide 38 text

WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block

Slide 39

Slide 39 text

WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 - Register the slider block

Slide 40

Slide 40 text

建立欄位群組 - Create field group WordCamp Taipei 2019 Slider Block - Step 2

Slide 41

Slide 41 text

WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 - Create field group

Slide 42

Slide 42 text

WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 - Create field group

Slide 43

Slide 43 text

顯示區塊 - Render the Block WordCamp Taipei 2019 Slider Block - Step 3

Slide 44

Slide 44 text

WordCamp Taipei 2019 Slider Block - Step 3 顯示區塊 - Render the Block

Slide 45

Slide 45 text

Slider Block WordCamp Taipei 2019

Slide 46

Slide 46 text

WordCamp Taipei 2019 Slider Block

Slide 47

Slide 47 text

WordCamp Taipei 2019 編輯模式 - Edit Mode Slider Block

Slide 48

Slide 48 text

WordCamp Taipei 2019 預覽模式 - Preview Mode Slider Block

Slide 49

Slide 49 text

WordCamp Taipei 2019 你如何建置網站？

Slide 50

Slide 50 text

你覺得 WordPress 容易使用嗎？ WordCamp Taipei 2019

Slide 51

Slide 51 text

選擇適合使用者和團隊的架站方式和工具 WordCamp Taipei 2019 Choosing The Right Tools For Your Users and Your Team to Build the Website. Icons made by Eucalyp from Flaticon

Slide 52

Slide 52 text

WordPress 並不簡單，但是你可以讓他變簡單 WordCamp Taipei 2019 Image by StartupStockPhotos from Pixabay