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

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

80c9848f1aca614f619a9d974b852dc0?s=47 Yucheng Wang
February 17, 2019
Programming
1
250

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

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

80c9848f1aca614f619a9d974b852dc0?s=128

Yucheng Wang

February 17, 2019
Tweet

More Decks by Yucheng Wang

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

Other Decks in Programming

See All in Programming
IE Graduation (IE の功績を讃える)
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
20
12k
dotdotdot_in_predict_function
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
1
180
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
100
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
338259af0e093b5d91e9dc7afbcdd0d5?s=48 marchin1989
2
600
設計ナイト2022 トランザクションスクリプト
6521324f6ab5266cdcde1dd05945a27b?s=48 shinpeim
11
2k
Airflowはすごいぞ！
65389cd2b6fdc531dcc4af999e864593?s=48 hankehly
0
370
UI Testing of Jetpack Compose Apps, AppDevCon
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
0
130
Seleniumでイキってたらサーバを絞め落としかけてた話
52b9da1c8c4810664baa2bdd3ec8e608?s=48 kenfujita
0
360
Android Tools & Performance
7166bc2cbc462ab5fd1987a76d0fe709?s=48 takahirom
1
430
LINE Messaging APIの概要 - LINE API総復習シリーズ
01cca15e7d324831bd63b7e1e6213f7a?s=48 uezo
1
160
Value and Record Types
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
0
550
Gitlab CIでMRを自動生成する
1a2f29252240936c0ac4db4edab36d41?s=48 forcia_dev_pr
0
110

Featured

See All Featured
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.5k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
940
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.7k

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