由零開始，推出你的第一個 WordPress 插件

這個工作坊適合有基本編程知識或 WordPress 使用經驗的參與者。

你將學會如何構建功能豐富且高效的 WordPress 插件，並深入了解插件開發中的最佳實踐與注意事項，幫助你在插件開發領域邁進一大步。並會簡單講及在WordPress.org 提交插件的流程。

Transcript

1. 由零開始 推出你的第一個 Wordpress 插件 為你的 PHP / JS 代碼尋找機遇
2. 我係邊個 自我介紹番先…… • 樹雄 / Koala Yeung • 多年 PHP 開發者 • 喜歡作技術分享 • 分享活動打雜 ◦ https://hkcota.org ◦ https://hkoscon.org ◦ https://hamsterthon.github.io
3. 我係邊個 自我介紹番先…… 立雜技術(包括但不限於) • Wordpress • Drupal • Laravel • React • NodeJS
4. 我係邊個 自我介紹番先…… 聯絡 • koalay@gmail.com • github.com/yookoala
5. 自介係咁多先
6. 基本要求 所謂「由零開始」
7. 基本要求 所謂「由零開始」 • 基本 PHP 知識 • 不懂的，敢舉手去問
8. 基本要求 所謂「由零開始」 • 基本 PHP 知識 • 不懂的，敢舉手去問
9. 基本要求 所謂「由零開始」 敢去試，敢去錯
10. (註：商標屬 Nike 所有，此處借用，請高抬貴手 )
11. 今日時間短 重點會多花點時間
12. 網上教學很多的技術 我們會省略
13. 不要忙着抄或拍照 投影片會分享給大家
14. Head First Learning
15. 開始囉
16. 預備你的開發環境 安裝好一個自己用的 Wordpress
17. 一些朋友已經很熟悉
18. Just in Case
19. 但時間有限，我們會講很快
20. 如果未有經驗的 這裏只是讓你知道大概流程
21. 網上資源很多 也可以私下再問我
22. 基本開發環境 安裝一個環境來供你 運行及測試插件 • 安裝及運行 MySQL • 安裝 PHP • 下載 Wordpress • 安裝 VSCode • 運行開發環境 • 安裝 Wordpress
23. 1. 安裝及運行 MariaDB 或者 MySQL
24. https://mariadb.org/
26. 網上影片很多，省時間這裏不詳談
27. 記得建立開發用的 Database 及 User
28. 2. 安裝 PHP
29. https://php.net/
31. 網上影片很多，省時間這裏不詳談
32. 3. 下載 Wordpress
33. https://wordpress.org/
35. 網上影片很多，省時間這裏不詳談
36. 4. 安裝 IDE 開發環境
37. VSCode 蠻好用的
38. https://code.visualstudio.com/
40. 網上影片很多，省時間這裏不詳談
41. 5. 運行開發環境
42. PHP 自帶蠻好的 Development Server
43. php -S localhost:8080 --docroot . 運行一個 Development Server 將本資料匣作為網站的首頁 重新開機後，每次想打使用開發環境前 都需跑這個指令
45. 也可以使用 VSCode 的插件
48. Ctrl + Shift + P 或者 Cmd + Shift + P 開啟指令選項
49. 點選 "PHP Server: Serve Project"
51. http://localhost:3000
52. 6. 安裝 Wordpress
60. 基本開發環境 就是剛剛談到的整個過程 ✓ 安裝及運行 MySQL ✓ 安裝 PHP ✓ 下載 Wordpress ✓ 安裝 VSCode ✓ 運行開發環境 ✓ 安裝 Wordpress
61. 寫插件囉！ 最基本的插件
62. 最簡單的插件 沒有功能，不過能夠安裝 參考文件 https://developer.wordpress.org /plugins/plugin-basics/
63. 最簡單的插件 沒有功能，不過能夠安裝 • 進入 Wordpress 的資料匣 • 在裏面進入 wp-content > plugins • 新增 插件名字 為名的資料匣 • 在新資料匣內 新增 插件名字.php 的文件
68. 最簡單的插件 沒有功能，不過能夠安裝 ✓ 進入 Wordpress 的資料匣 ✓ 在裏面進入 wp-content > plugins ✓ 新增 插件名字 為名的資料匣 ✓ 在新資料匣內 新增 插件名字.php 的文件
69. 最簡單的插件 沒有功能，不過能夠安裝 在 插件名字.php 內 加入插件的基本資料 ---- 參考 https://developer.wordpress.org /plugins /plugin-basics /header-requirements
72. 最簡單的插件 沒有功能，不過能夠安裝 <?php /* * Plugin Name: YOUR PLUGIN NAME */
76. Activate 你的 plugin 吧！
77. 完！
78. 未完 :-)
80. 功能
81. 其實 Wordpress 插件可以做啲乜？
82. 其實 Wordpress 插件 可以做啲乜？ 插件開發基本知識
83. 插件功能 其實 Wordpress 插件 可以做啲乜？ • 修改訪客界面 • 修改用戶界面 • 為用戶提供簡便 • 加強其他插件功能
84. 插件功能 其實 Wordpress 插件 可以做啲乜？ 介入 Wordpress 的 request lifecycle
85. 插件功能 其實 Wordpress 插件 可以做啲乜？ 介入 Wordpress 的 request lifecycle
86. 插件功能 其實 Wordpress 插件 可以做啲乜？ 參考 https://learn.wordpress.org /tutorial /the-wordpress-request-lifecycle
87. Request Lifecycle Wordpress 基本知識 1. index.php 進入點 2. wp-blog-header.php 初始化 3. wp-load.php 載入環境參數（如：安裝路徑） 4. wp-config.php 載入設定
88. Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示
89. Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示
90. Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示
91. 淨係得一個位可以執行？
92. 無理由有咁大限制喎
94. 插件功能 其實 Wordpress 插件 可以做啲乜？ 介入 Wordpress 的 request lifecycle
95. 插件功能 其實 Wordpress 插件 可以做啲乜？ • Hooks https://developer.wordpress.org /reference/hooks/
96. Hooks 可以做乜？ 兩種 Hook • Action 執行代碼 • Filter 修改他人代碼的輸出
97. Hooks 可以做乜？ 兩種 Hook • Action 執行代碼 • Filter 修改他人代碼的輸出
98. Hooks 可以做乜？ 兩種 Hook • Action 執行代碼 • Filter 修改他人代碼的輸出
99. a. Action Hook 即係點？ • Wordpress 及其他 plugin 提供不同時機 讓你跑代碼 • 參考 https://developer.wordpress.org /plugins/hooks/actions/ https://developer.wordpress.org /apis/hooks/action-reference/
105. a. Action Hook 即係點？ • Wordpress 及其他 plugin 提供不同時機 讓你跑代碼 • 參考 https://developer.wordpress.org /plugins/hooks/actions/ https://developer.wordpress.org /apis/hooks/action-reference/
106. b. Filter Hook 即係點？ • Wordpress 及其他 plugin 提供不同時機 讓你修改輸出 • 參考 https://developer.wordpress.org /plugins/hooks/filters/ https://developer.wordpress.org /apis/hooks/filter-reference/
111. b. Filter Hook 即係點？ • Wordpress 及其他 plugin 提供不同時機 讓你修改輸出 • 參考 https://developer.wordpress.org /plugins/hooks/filters/ https://developer.wordpress.org /apis/hooks/filter-reference/
112. Hooks 可以做乜？ 兩種 Hook ✓ Action 執行代碼 ✓ Filter 修改他人代碼的輸出
113. 進階的用戶介面
114. Grutenberg 介面
115. Grutenberg Block 高階的用戶端應用 • 新的 Wordpress 用戶介面 • 供 drag-drop 增減 頁面內容，所見即得 • 需要 React (JS) 技術
116. Grutenberg Block 高階的用戶端應用 參考 https://developer.wordpress.org /block-editor /getting-started /tutorial
117. 插件開發的世界好大
118. Documentation 係你好朋友
119. https://developer.wordpress.org
120. 完！
121. 未完 :-)
122. 整好哂啦，點比人下載先？
123. 方法一 Zip 檔
125. 整個網頁比人下載
126. 掂！
127. 咁點安裝㗎？
131. 記得將插件的資料匣放入 zip
132. 方法二 Wordpress 官方網站
133. 上載插件到 官方網站 感覺好強大 實際好簡單 要求 • 有自己的 Wordpress.org 帳 號（可以免費申請） • 有耐性 • 不介意學用舊軟件 subversion 來提交
134. 上載插件到 官方網站 感覺好強大 實際好簡單 參考 https://wordpress.org /plugins /developers /add
138. 上載插件到 官方網站 感覺好強大 實際好簡單 留意！slug 是不能改變的！ (即係 plugin 檔案的名稱) 一旦提交成功，要改名只能夠 要求刪除 plugin 然後 重新提交 (唔好問我點解知了 …… )
139. 上載插件到 官方網站 感覺好強大 實際好簡單 提交後，等審查通知
141. 中間可能他們會提出修改要求
143. 按要求修改你的程式碼 之後再更新提交
144. 如之後一切順利
146. Yes!
147. 你可以正式上載插件了
148. But…
149. 上載需要使用 Subversion
153. https://developer.wordpress.org/plugins/wordpress-org/how-to-use-subversion/
155. 幾好
156. 但有啲朋友可能會問…
157. 咁點搵錢先？
158. 咁點搵錢先？ 常見插件盈利模式 常見盈利方法 • Freemium ◦ 收費版本另行購買及下載 ◦ 收費後提供 license key 解鎖功能
159. 咁點搵錢先？ 常見插件盈利模式 常見盈利方法 • Premium ◦ 免費提供試用 ◦ 限時 / 限額 ◦ license key 解鎖功能
160. 咁點搵錢先？ 常見插件盈利模式 常見盈利方法 • Addon ◦ 核心功能免費 ◦ 另外提供收費 plugin
161. 咁點搵錢先？ 常見插件盈利模式 常見盈利方法 • Software as a Service ◦ 月費模式 ◦ 以 API 形式提供服務
162. 咁點搵錢先？ 常見插件盈利模式 常見盈利方法 • Pay for Support ◦ 功能免費 ◦ 提供收費支援服務
163. 運用想像力，創造價值，換取營利
165. 完 （真係）
166. 我係邊個 自我介紹多次…… 聯絡 • koalay@gmail.com • github.com/yookoala
167. 由零開始 推出你的第一個 Wordpress 插件 為你的 PHP / JS 代碼尋找機遇