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

使用 Gutenberg 和 ACF Block 重新建置網站

Yucheng Wang
December 28, 2019
Technology
0
52

使用 Gutenberg 和 ACF Block 重新建置網站

WordCamp Taipei 2019

Yucheng Wang

December 28, 2019
Tweet

More Decks by Yucheng Wang

See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
220
使用 ManageWP 來管理網站
ucheng
0
210
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
160
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
260
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
840
基本網站安全防護
ucheng
1
67
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
290
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
98
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
120

Other Decks in Technology

See All in Technology
PCI DSS に準拠したシステム開発
yutadayo
0
320
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由　〜モリサワの SaaS 戦略〜
tomuro
0
140
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1.1k
macOSの更新を促す通知機能 を実装してみた
shimosyan
1
100
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
はじめてスポンサー運営PMをやってみてわかった4つのこと
andpad
3
250
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
2.2k
日経電子版だけじゃない！ 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
350
re:Inventの完全招待制イベント Building a Roadmap to SaaSについて / Building a Roadmap to SaaS an invitation only event at reinvent
yayoi_dd
0
220
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
ECSコスト削減のブレイクアウトセッションを聴いてきた話 / joining a breakout session on reducing costs with ECS
yayoi_dd
0
140

Featured

See All Featured
Producing Creativity
orderedlist
PRO
335
38k
Side Projects
sachag
451
37k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
What's new in Ruby 2.0
geeforr
336
30k
The Language of Interfaces
destraynor
149
21k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k

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