Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yucheng Wang
July 19, 2020
Technology
490
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
Yucheng Wang
July 19, 2020
Transcript
28 slides
不會寫程式也可以 使⽤用 Elementor + ACF 來來客製化網站 WordPress 台中⼩小聚 #22
王昱程 / Yu-Cheng Wang / Stanley https://ucheng.io Freelance WordPress Developer
/ 網站建置開發顧問 WordPress Meetup Taichung Co-organizer WordPress 台中⼩小聚 #22
你今天會學到什麼? 1.了解如何善用 WordPress 內容管理的彈性 2.了解如何新增文章類型 (Post Type) 3.了解如何使用 ACF 來自定欄位
4.了解如何使用 Elementor 來顯示自訂內容 WordPress 台中⼩小聚 #22
我想要做⼀一個 網站/服務/應⽤用 WordPress 台中⼩小聚 #22
None
網站 WordPress 台中⼩小聚 #22
應⽤用/服務/電⼦子商務 WordPress 台中⼩小聚 #22
NO CODE #nocode WordPress 台中⼩小聚 #22
WordPress Page Builder WordPress 台中⼩小聚 #22
Why Elementor 1.視覺化的編輯器 2.可針對不同裝置調整樣式 3.友善的操作介面 WordPress 台中⼩小聚 #22
WordPress 台中⼩小聚 #22
我想替文章或頁面顯示額外的資訊 該怎麼做? WordPress 台中⼩小聚 #22
自定欄位 (Custom Field) WordPress 內建的自訂欄位:只能輸入純文字,功能陽春 WordPress 台中⼩小聚 #22
自定欄位 (Custom Field)
顯示自訂欄位 WordPress 台中⼩小聚 #22
顯示自訂欄位 不用寫程式的方式 Elementor(Pro) Dynamic Tag WordPress 台中⼩小聚 #22
如果我想做更更多的應⽤用呢? 書籍資料庫
如果我想做更更多的應⽤用呢? 食譜資料庫
如果我想做更更多的應⽤用呢? 電影資料庫
CMS Content Management System WordPress 台中⼩小聚 #22
Post Type ⽂文章/內容類型 內建的 Post Type: •⽂文章 ( post )
•⾴頁⾯面 ( page ) •媒體 ( attachment ) •版本修訂 ( revision ) •選單項⽬目 (nav_menu_item) https://developer.wordpress.org/themes/basics/post-types/ WordPress 台中⼩小聚 #22
透過程式⾃自⾏行行新增 function book_setup_post_type() { $args = array( 'public' => true,
'label' => __( 'Books', 'textdomain' ), 'menu_icon' => 'dashicons-book', ); register_post_type( 'book', $args ); } add_action( 'init', 'book_setup_post_type' ); https://developer.wordpress.org/reference/functions/register_post_type/ WordPress 台中⼩小聚 #22
使⽤用外掛 CPT UI WordPress 台中⼩小聚 #22
Advanced Custom Field (ACF) WordPress 台中⼩小聚 #22
Advanced Custom Field (ACF)
想了了解更更多關於 ACF 的使⽤用⽅方式 https://wp-meetups.com/%e4%bd%bf%e7%94%a8-advanced-custom-field-%e9%80%b2%e8%a1%8c%e7%b6%b2%e7%ab%99%e5%ae%a2%e8%a3%bd%e5%8c%96/ https://wp-meetups.com/%e4%bd%bf%e7%94%a8-acf-pro-%e6%89%93%e9%80%a0%e8%87%aa%e5%b7%b1%e7%9a%84-gutenberg-block/
Recap 1. WordPress 是一套內容管理軟體 (CMS) 2. 使用 CPT UI 來新增自訂
Post Type 3. 使用 ACF 來新增欄位 4. 使用 Elementor Pro 來自訂版面並顯示 ACF 內容 WordPress 台中⼩小聚 #22
NO CODE 開始打造一些有趣的東西吧! WordPress 台中⼩小聚 #22
More Decks by Yucheng Wang
See All by Yucheng Wang
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
270
使用 ManageWP 來管理網站
ucheng
0
480
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
360
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
480
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
1.1k
基本網站安全防護
ucheng
1
180
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
600
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
250
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
330
Other Decks in Technology
See All in Technology
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
290
プロダクションコードにおける encoding/json から encoding/json/v2 へのスムーズな移行
sansantech
PRO
1
410
2026-11-11 Tamachi.sre#7 PaCにインフラリソースの命を救われました。 / PaC saves the infra resource life
masasuzu
0
160
81天的 AI Agent 軟體開發團隊治理實務分享
regionbbs
0
160
Steering と Hook (チームの決まりを守らせる) | 目指せ Kiro マスター 06
inariku
PRO
2
120
DBTS2026 盛り上がってますか!?Databricksが実現するAI時代のデータ基盤
akuwano
1
200
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
130
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
170
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
sh_fk2
2
520
契約書SaaSにAIエージェントを組み込む
sansantech
PRO
0
100
田んぼの見回りをIoTで減らしたい!水位監視から電池駆動カメラまでの試行錯誤
itosoft
1
170
Datadog の権限統制 〜Org 統合に向けて調べた注意点 / JDDUG-Meetup_24
visional_engineering_and_design
1
120
Featured
See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
630
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
2
440
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
Done Done
chrislema
187
17k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
880
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
330
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
550
Six Lessons from altMBA
skipperchong
29
4.6k
Testing 201, or: Great Expectations
jmmastey
46
8.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.2k