Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

使用 ACF Pro 打造客製化古騰堡區塊

Avatar for Yucheng Wang Yucheng Wang
February 17, 2019
Programming
590
1

使用 ACF Pro 打造客製化古騰堡區塊

製作一個古騰堡區塊並不容易，必須要了解react。透過 ACF Pro 可以讓你在不熟悉 react 的狀況下製作出客製化的古騰堡區塊。

Avatar for Yucheng Wang

Yucheng Wang

February 17, 2019

More Decks by Yucheng Wang

See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
Avatar for Yucheng Wang ucheng
0
460
使用 Gutenberg 和 ACF Block 重新建置網站
Avatar for Yucheng Wang ucheng
0
250
使用 ManageWP 來管理網站
Avatar for Yucheng Wang ucheng
0
460
提升你的古騰堡編輯體驗 - EditorsKit 介紹
Avatar for Yucheng Wang ucheng
0
340
使用 ProjectHuddle 來管理客戶需求和回饋
Avatar for Yucheng Wang ucheng
3
450
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Avatar for Yucheng Wang ucheng
0
1k
基本網站安全防護
Avatar for Yucheng Wang ucheng
1
170
使用 Admin Menu Editor 打造簡單易用的後台
Avatar for Yucheng Wang ucheng
0
240
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
Avatar for Yucheng Wang ucheng
1
320

Other Decks in Programming

See All in Programming
最近”作らせてる” ローカルAIアプリの話
Avatar for ITO Akihiro akit37
0
450
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
210
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
パーソナライズPodcastを作った話
Avatar for repunit11 repunit11
0
140
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
Workers Cache を知る
Avatar for syumai syumai
0
350
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
150
AIに “答え“を書かせるのを やめてみた
Avatar for akari ___akari11
0
120
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
250
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
1
310
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1.1k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
870
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
360
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
410

Transcript

  1. 使⽤用 ACF Pro 打造客 製化古騰堡區塊 WordPress Meetup Taichung #8

  2. 王昱程 Stanley
 @uchengwang
 PHP / Laravel / WordPress Developer WordPress

    Meetup Taichung #8

  3. ⼤大綱 • 使⽤用內建的區塊製作出⾴頁⾯面 • 使⽤用⾃自製的區塊製作出⾴頁⾯面 • 如何製作 WordPress Meetup Taichung

    #8

  4. LEARN JAVASCRIPT, DEEPLY Matt Mullenweg, WordCamp US 2015 Creative Commons

    Attribution 3.0 Unported

  5. Learn JavaScript, Deeply Calypso • Mac App • Node +

    React • Open Source WordPress Meetup Taichung #8

  6. Learn JavaScript, Deeply Gutenberg • React WordPress Meetup Taichung #8

  7. 區塊(Block) WordPress Meetup Taichung #8

  8. Third-party Block Library coblocks … WordPress Meetup Taichung #8

  9. 為什什麼要⾃自⼰己打造區塊? WordPress Meetup Taichung #8

  10. 為什什麼要⾃自⼰己打造區塊? 彈性 便便利利 客製化 提升編輯體驗 WordPress Meetup Taichung #8

  11. 範例例演⽰示 - 營業據點 WordPress Meetup Taichung #8

  12. 使⽤用內建的區塊製作營業據點資訊 分店照片(圖片) 分店名稱(標題) 分店資訊(段落落) WordPress Meetup Taichung #8

  13. 使⽤用內建的區塊製作分店資訊 1.需要重複加入不同的區塊來來完成所需的⾴頁⾯面內容
 2.無法⾃自⾏行行控制樣板(html) 3.較繁瑣且較容易易出錯 WordPress Meetup Taichung #8

  14. ACF(Advanced Custom Field)

  15. 什什麼是 ACF(Advanced Custom Field)? WordPress Meetup Taichung #8

  16. 什什麼是 ACF(Advanced Custom Field)? WordPress Meetup Taichung #8

  17. 什什麼是 ACF(Advanced Custom Field)?

  18. ACF 5.8(beta)

  19. 客製化分店資訊區塊 - step 1 註冊區塊 WordPress Meetup Taichung #8

  20. 客製化分店資訊區塊 - step 2 設定 ACF 欄欄位 WordPress Meetup Taichung

    #8

  21. 客製化分店資訊區塊 - step 3 設定顯⽰示樣板 WordPress Meetup Taichung #8

  22. Thank You WordPress Meetup Taichung #8