Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
使用 Gutenberg 和 ACF Block 重新建置網站
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yucheng Wang
December 28, 2019
Technology
270
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
使用 Gutenberg 和 ACF Block 重新建置網站
WordCamp Taipei 2019
Yucheng Wang
December 28, 2019
Transcript
52 slides
使用 Gutenberg 和 ACF Blocks 重新建置網站 WordCamp Taipei 2019 Building
A Website With Gutenberg And ACF Blocks
王昱程 / Yu-Cheng Wang / Stanley https://ucheng.io Freelance WordPress Developer
/ 網站建置開發顧問 WordPress Meetup Taichung Co-organizer WordCamp Taipei 2019
WordCamp Taipei 2019 你如何建置網站?
你覺得 WordPress 容易使用嗎? WordCamp Taipei 2019
今天要分享什麼? •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器:ACF Flexible Content •使用 Gutenberg 和
ACF Block 重新建置網站 WordCamp Taipei 2019
今天要分享什麼? •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器:ACF Flexible Content •使用 Gutenberg 和
ACF Block 重新建置網站 WordCamp Taipei 2019
今天要分享什麼? •建置 WordPress 網站的方式和考量因素 •輕量化的頁面編輯器:ACF Flexible Content •使用 Gutenberg 和
ACF Block 重新建置網站 WordCamp Taipei 2019
多功能性的佈景主題 WordCamp Taipei 2019 1 2 3 建置網站的方式 …
WordCamp Taipei 2019 輕量化佈景主題 + 頁面編輯器 + 建置網站的方式 1
2 3
WordCamp Taipei 2019 客製化佈景主題 建置網站的方式 1 2 3 Icons made
by Eucalyp from Flaticon
選擇的考量因素 使用者對工具的熟悉程度 WordCamp Taipei 2019 1 2 3 4 Icons
made by Eucalyp from Flaticon
專案複雜度和時程 WordCamp Taipei 2019 Icons made by Eucalyp from Flaticon
選擇的考量因素 1 2 3 4
團隊規模和技能 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons
made by Eucalyp from Flaticon
教育訓練、維護支援 WordCamp Taipei 2019 選擇的考量因素 1 2 3 4 Icons
made by Eucalyp from Flaticon
WordCamp Taipei 2019 自訂欄位 (Custom Field)
WordCamp Taipei 2019 自訂欄位 (Custom Field)
WordCamp Taipei 2019 自訂欄位 (Custom Field)
WordCamp Taipei 2019 Advanced Custom Fields (ACF)
Field Types in ACF WordCamp Taipei 2019
Use Case: 作品內容 •預先設計好的區塊內容格式 •無限的區塊內容數量 •可自由改變區塊順序 WordCamp Taipei 2019
ACF Flexible content •A Simple , Structured, block-based editor
•輕量化的頁面編輯器 WordCamp Taipei 2019
ACF Flexible content WordCamp Taipei 2019 WordCamp Taipei 2019 Editing
Fields
ACF Flexible content WordCamp Taipei 2019 Editing Fields
ACF Flexible content WordCamp Taipei 2019 Editing Fields
ACF Flexible content WordCamp Taipei 2019 Editing Fields
WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content -Editing
Content
ACF Flexible content -Editing Content WordCamp Taipei 2019
WordCamp Taipei 2019 WordCamp Taipei 2019 ACF Flexible content -
Template
ACF Flexible Content - Frontend Display WordCamp Taipei 2019
Cheers! WordCamp Taipei 2019
但是… WordCamp Taipei 2019
WordCamp Taipei 2019
Into the Gutenberg Era WordCamp Taipei 2019
Into the Gutenberg Era WordCamp Taipei 2019
Learn JavaScript, Deeply Gutenberg • React WordCamp Taipei 2019
ACF 5.8 WordCamp Taipei 2019
WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 -
Register the slider block
WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 -
Register the slider block
WordCamp Taipei 2019 Slider Block - Step 1 註冊區塊 -
Register the slider block
建立欄位群組 - Create field group WordCamp Taipei 2019 Slider Block
- Step 2
WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 -
Create field group
WordCamp Taipei 2019 Slider Block - Step 2 建立欄位群組 -
Create field group
顯示區塊 - Render the Block WordCamp Taipei 2019 Slider Block
- Step 3
WordCamp Taipei 2019 Slider Block - Step 3 顯示區塊 -
Render the Block
Slider Block WordCamp Taipei 2019
WordCamp Taipei 2019 Slider Block
WordCamp Taipei 2019 編輯模式 - Edit Mode Slider Block
WordCamp Taipei 2019 預覽模式 - Preview Mode Slider Block
WordCamp Taipei 2019 你如何建置網站?
你覺得 WordPress 容易使用嗎? WordCamp Taipei 2019
選擇適合使用者和團隊 的架站方式和工具 WordCamp Taipei 2019 Choosing The Right Tools For
Your Users and Your Team to Build the Website. Icons made by Eucalyp from Flaticon
WordPress 並不簡單,但是你可以讓他變簡單 WordCamp Taipei 2019 Image by StartupStockPhotos from Pixabay
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
490
使用 ManageWP 來管理網站
ucheng
0
480
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
360
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
480
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
1.1k
基本網站安全防護
ucheng
1
180
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
600
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
250
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
330
Other Decks in Technology
See All in Technology
サボる子はいねぇがー!AgentCoreハーネスの脆弱性に学ぶ、エージェントの入力バリデーション
iwamot
PRO
5
340
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
170
内製アプリとClaudeスキルのセキュリティチェック、 Backlogの課題で回しています。
ayaka_egaaa
0
180
属人化したISMS運用をGitHubとAIで仕組み化した1年間の記録
sioncojp
4
2.6k
Where Should Platform Complexity Live? Lessons from a Cross-Team PR Preview Platform
taiki45
0
110
evcc & Home Assistant
naltatis
0
700
Biohub - Cell Tracking During Development 5th place solution
rist
0
150
異夢同船〜異なる夢でも同じ船でなんとかする〜
fortegp05
0
190
Quick Automate | 目指せ Quick マスター 12
inariku
PRO
1
110
AI時代に求められる優秀なTechLeadの振る舞い
pospome
11
16k
田んぼの見回りをIoTで減らしたい!水位監視から電池駆動カメラまでの試行錯誤
itosoft
1
170
速くなるほど、深く考える AI時代のQAに学ぶ
kobayashiyorimitsu
0
180
Featured
See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.4k
Rails Girls Zürich Keynote
gr2m
96
14k
Typedesign – Prime Four
hannesfritz
42
3.2k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Evolving SEO for Evolving Search Engines
ryanjones
0
360
Making Projects Easy
brettharned
120
6.9k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.6k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
330
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
670