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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Yucheng Wang Yucheng Wang
February 17, 2019
Programming
550
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
430
使用 Gutenberg 和 ACF Block 重新建置網站
Avatar for Yucheng Wang ucheng
0
230
使用 ManageWP 來管理網站
Avatar for Yucheng Wang ucheng
0
420
提升你的古騰堡編輯體驗 - EditorsKit 介紹
Avatar for Yucheng Wang ucheng
0
310
使用 ProjectHuddle 來管理客戶需求和回饋
Avatar for Yucheng Wang ucheng
3
420
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Avatar for Yucheng Wang ucheng
0
1k
基本網站安全防護
Avatar for Yucheng Wang ucheng
1
150
使用 Admin Menu Editor 打造簡單易用的後台
Avatar for Yucheng Wang ucheng
0
210
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
Avatar for Yucheng Wang ucheng
1
290

Other Decks in Programming

See All in Programming
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
Avatar for Yuta Takahashi ytakahashii
3
1.4k
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
150
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
260
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
120
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
560
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
2.7k
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
140
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.5k
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.3k
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
840
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
120

Featured

See All Featured
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
190
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
830
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.2k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
130
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200

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