不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站

Transcript

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