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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Yucheng Wang Yucheng Wang
February 17, 2019
Programming
580
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
440
使用 Gutenberg 和 ACF Block 重新建置網站
Avatar for Yucheng Wang ucheng
0
250
使用 ManageWP 來管理網站
Avatar for Yucheng Wang ucheng
0
440
提升你的古騰堡編輯體驗 - EditorsKit 介紹
Avatar for Yucheng Wang ucheng
0
330
使用 ProjectHuddle 來管理客戶需求和回饋
Avatar for Yucheng Wang ucheng
3
440
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Avatar for Yucheng Wang ucheng
0
1k
基本網站安全防護
Avatar for Yucheng Wang ucheng
1
160
使用 Admin Menu Editor 打造簡單易用的後台
Avatar for Yucheng Wang ucheng
0
230
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
Avatar for Yucheng Wang ucheng
1
310

Other Decks in Programming

See All in Programming
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
350
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
200
cdk deploy JawsSonic #MARATHONしながらAWSリソースをデプロイしてみよう
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
140
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
440
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.6k
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
280
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
110
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
2.8k
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.5k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
190
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
0
1.5k
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
180

Featured

See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
300
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.6k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
230
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
570
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
570
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k

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