Slide 1
Slide 1 text
不會寫程式也可以
使⽤用 Elementor + ACF 來來客製化網站
WordPress 台中⼩小聚 #22
Slide 2
Slide 2 text
王昱程 / Yu-Cheng Wang / Stanley
https://ucheng.io
Freelance WordPress Developer / 網站建置開發顧問
WordPress Meetup Taichung Co-organizer
WordPress 台中⼩小聚 #22
Slide 3
Slide 3 text
你今天會學到什麼？
1.了解如何善用 WordPress 內容管理的彈性
2.了解如何新增文章類型 (Post Type)
3.了解如何使用 ACF 來自定欄位
4.了解如何使用 Elementor 來顯示自訂內容
WordPress 台中⼩小聚 #22
Slide 4
Slide 4 text
我想要做⼀一個
網站/服務/應⽤用
WordPress 台中⼩小聚 #22
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
網站
WordPress 台中⼩小聚 #22
Slide 7
Slide 7 text
應⽤用/服務/電⼦子商務
WordPress 台中⼩小聚 #22
Slide 8
Slide 8 text
NO CODE
#nocode
WordPress 台中⼩小聚 #22
Slide 9
Slide 9 text
WordPress Page Builder
WordPress 台中⼩小聚 #22
Slide 10
Slide 10 text
Why Elementor
1.視覺化的編輯器
2.可針對不同裝置調整樣式
3.友善的操作介面
WordPress 台中⼩小聚 #22
Slide 11
Slide 11 text
WordPress 台中⼩小聚 #22
Slide 12
Slide 12 text
我想替文章或頁面顯示額外的資訊
該怎麼做？
WordPress 台中⼩小聚 #22
Slide 13
Slide 13 text
自定欄位 (Custom Field)
WordPress 內建的自訂欄位：只能輸入純文字，功能陽春
WordPress 台中⼩小聚 #22
Slide 14
Slide 14 text
自定欄位 (Custom Field)
Slide 15
Slide 15 text
顯示自訂欄位
WordPress 台中⼩小聚 #22
Slide 16
Slide 16 text
顯示自訂欄位
不用寫程式的方式
Elementor(Pro)
Dynamic Tag
WordPress 台中⼩小聚 #22
Slide 17
Slide 17 text
如果我想做更更多的應⽤用呢？
書籍資料庫
Slide 18
Slide 18 text
如果我想做更更多的應⽤用呢？
食譜資料庫
Slide 19
Slide 19 text
如果我想做更更多的應⽤用呢？
電影資料庫
Slide 20
Slide 20 text
CMS
Content Management System
WordPress 台中⼩小聚 #22
Slide 21
Slide 21 text
Post Type ⽂文章/內容類型
內建的 Post Type：
•⽂文章 ( post )
•⾴頁⾯面 ( page )
•媒體 ( attachment )
•版本修訂 ( revision )
•選單項⽬目 (nav_menu_item)
https://developer.wordpress.org/themes/basics/post-types/
WordPress 台中⼩小聚 #22
Slide 22
Slide 22 text
透過程式⾃自⾏行行新增
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
Slide 23
Slide 23 text
使⽤用外掛 CPT UI
WordPress 台中⼩小聚 #22
Slide 24
Slide 24 text
Advanced Custom Field (ACF)
WordPress 台中⼩小聚 #22
Slide 25
Slide 25 text
Advanced Custom Field (ACF)
Slide 26
Slide 26 text
想了了解更更多關於 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/
Slide 27
Slide 27 text
Recap
1. WordPress 是一套內容管理軟體 (CMS)
2. 使用 CPT UI 來新增自訂 Post Type
3. 使用 ACF 來新增欄位
4. 使用 Elementor Pro 來自訂版面並顯示 ACF 內容
WordPress 台中⼩小聚 #22
Slide 28
Slide 28 text
NO CODE
開始打造一些有趣的東西吧！
WordPress 台中⼩小聚 #22