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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Yucheng Wang Yucheng Wang
February 17, 2019
Programming
1
510

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

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

Avatar for Yucheng Wang

Yucheng Wang

February 17, 2019
Tweet

More Decks by Yucheng Wang

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

Other Decks in Programming

See All in Programming
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
300
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
230
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
130
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
Avatar for Hiroyuki Mori hiroyukimori
PRO
0
110
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
410
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
250
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
1k
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
560
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
470
React Native × React Router v7 API通信の共通化で考えるべきこと
Avatar for Suguru Ohki suguruooki
0
100
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
140

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
170
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
57
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
250

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