Slide 1

Slide 1 text

由零開始 推出你的第一個 Wordpress 插件 為你的 PHP / JS 代碼尋找機遇

Slide 2

Slide 2 text

我係邊個 自我介紹番先…… ● 樹雄 / Koala Yeung ● 多年 PHP 開發者 ● 喜歡作技術分享 ● 分享活動打雜 ○ https://hkcota.org ○ https://hkoscon.org ○ https://hamsterthon.github.io

Slide 3

Slide 3 text

我係邊個 自我介紹番先…… 立雜技術(包括但不限於) ● Wordpress ● Drupal ● Laravel ● React ● NodeJS

Slide 4

Slide 4 text

我係邊個 自我介紹番先…… 聯絡 ● [email protected] ● github.com/yookoala

Slide 5

Slide 5 text

自介係咁多先

Slide 6

Slide 6 text

基本要求 所謂「由零開始」

Slide 7

Slide 7 text

基本要求 所謂「由零開始」 ● 基本 PHP 知識 ● 不懂的,敢舉手去問

Slide 8

Slide 8 text

基本要求 所謂「由零開始」 ● 基本 PHP 知識 ● 不懂的,敢舉手去問

Slide 9

Slide 9 text

基本要求 所謂「由零開始」 敢去試,敢去錯

Slide 10

Slide 10 text

(註:商標屬 Nike 所有,此處借用,請高抬貴手 )

Slide 11

Slide 11 text

今日時間短 重點會多花點時間

Slide 12

Slide 12 text

網上教學很多的技術 我們會省略

Slide 13

Slide 13 text

不要忙着抄或拍照 投影片會分享給大家

Slide 14

Slide 14 text

Head First Learning

Slide 15

Slide 15 text

開始囉

Slide 16

Slide 16 text

預備你的開發環境 安裝好一個自己用的 Wordpress

Slide 17

Slide 17 text

一些朋友已經很熟悉

Slide 18

Slide 18 text

Just in Case

Slide 19

Slide 19 text

但時間有限,我們會講很快

Slide 20

Slide 20 text

如果未有經驗的 這裏只是讓你知道大概流程

Slide 21

Slide 21 text

網上資源很多 也可以私下再問我

Slide 22

Slide 22 text

基本開發環境 安裝一個環境來供你 運行及測試插件 ● 安裝及運行 MySQL ● 安裝 PHP ● 下載 Wordpress ● 安裝 VSCode ● 運行開發環境 ● 安裝 Wordpress

Slide 23

Slide 23 text

1. 安裝及運行 MariaDB 或者 MySQL

Slide 24

Slide 24 text

https://mariadb.org/

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

網上影片很多,省時間這裏不詳談

Slide 27

Slide 27 text

記得建立開發用的 Database 及 User

Slide 28

Slide 28 text

2. 安裝 PHP

Slide 29

Slide 29 text

https://php.net/

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

網上影片很多,省時間這裏不詳談

Slide 32

Slide 32 text

3. 下載 Wordpress

Slide 33

Slide 33 text

https://wordpress.org/

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

網上影片很多,省時間這裏不詳談

Slide 36

Slide 36 text

4. 安裝 IDE 開發環境

Slide 37

Slide 37 text

VSCode 蠻好用的

Slide 38

Slide 38 text

https://code.visualstudio.com/

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

網上影片很多,省時間這裏不詳談

Slide 41

Slide 41 text

5. 運行開發環境

Slide 42

Slide 42 text

PHP 自帶蠻好的 Development Server

Slide 43

Slide 43 text

php -S localhost:8080 --docroot . 運行一個 Development Server 將本資料匣作為網站的首頁 重新開機後,每次想打使用開發環境前 都需跑這個指令

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

也可以使用 VSCode 的插件

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Ctrl + Shift + P 或者 Cmd + Shift + P 開啟指令選項

Slide 49

Slide 49 text

點選 "PHP Server: Serve Project"

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

http://localhost:3000

Slide 52

Slide 52 text

6. 安裝 Wordpress

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

基本開發環境 就是剛剛談到的整個過程 ✓ 安裝及運行 MySQL ✓ 安裝 PHP ✓ 下載 Wordpress ✓ 安裝 VSCode ✓ 運行開發環境 ✓ 安裝 Wordpress

Slide 61

Slide 61 text

寫插件囉! 最基本的插件

Slide 62

Slide 62 text

最簡單的插件 沒有功能,不過能夠安裝 參考文件 https://developer.wordpress.org /plugins/plugin-basics/

Slide 63

Slide 63 text

最簡單的插件 沒有功能,不過能夠安裝 ● 進入 Wordpress 的資料匣 ● 在裏面進入 wp-content > plugins ● 新增 插件名字 為名的資料匣 ● 在新資料匣內 新增 插件名字.php 的文件

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

最簡單的插件 沒有功能,不過能夠安裝 ✓ 進入 Wordpress 的資料匣 ✓ 在裏面進入 wp-content > plugins ✓ 新增 插件名字 為名的資料匣 ✓ 在新資料匣內 新增 插件名字.php 的文件

Slide 69

Slide 69 text

最簡單的插件 沒有功能,不過能夠安裝 在 插件名字.php 內 加入插件的基本資料 ---- 參考 https://developer.wordpress.org /plugins /plugin-basics /header-requirements

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

最簡單的插件 沒有功能,不過能夠安裝

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Activate 你的 plugin 吧!

Slide 77

Slide 77 text

完!

Slide 78

Slide 78 text

未完 :-)

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

功能

Slide 81

Slide 81 text

其實 Wordpress 插件可以做啲乜?

Slide 82

Slide 82 text

其實 Wordpress 插件 可以做啲乜? 插件開發基本知識

Slide 83

Slide 83 text

插件功能 其實 Wordpress 插件 可以做啲乜? ● 修改訪客界面 ● 修改用戶界面 ● 為用戶提供簡便 ● 加強其他插件功能

Slide 84

Slide 84 text

插件功能 其實 Wordpress 插件 可以做啲乜? 介入 Wordpress 的 request lifecycle

Slide 85

Slide 85 text

插件功能 其實 Wordpress 插件 可以做啲乜? 介入 Wordpress 的 request lifecycle

Slide 86

Slide 86 text

插件功能 其實 Wordpress 插件 可以做啲乜? 參考 https://learn.wordpress.org /tutorial /the-wordpress-request-lifecycle

Slide 87

Slide 87 text

Request Lifecycle Wordpress 基本知識 1. index.php 進入點 2. wp-blog-header.php 初始化 3. wp-load.php 載入環境參數(如:安裝路徑) 4. wp-config.php 載入設定

Slide 88

Slide 88 text

Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示

Slide 89

Slide 89 text

Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示

Slide 90

Slide 90 text

Request Lifecycle Wordpress 基本知識 5. wp-settings.php 將上面的元素組合成基本 Wordpress 環境 6. wp() function Wordpress 正式載入內容 包括產生 WP_Query 7. template-loader.php 載入及運行相應的 template 檔案 進行顯示

Slide 91

Slide 91 text

淨係得一個位可以執行?

Slide 92

Slide 92 text

無理由有咁大限制喎

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

插件功能 其實 Wordpress 插件 可以做啲乜? 介入 Wordpress 的 request lifecycle

Slide 95

Slide 95 text

插件功能 其實 Wordpress 插件 可以做啲乜? ● Hooks https://developer.wordpress.org /reference/hooks/

Slide 96

Slide 96 text

Hooks 可以做乜? 兩種 Hook ● Action 執行代碼 ● Filter 修改他人代碼的輸出

Slide 97

Slide 97 text

Hooks 可以做乜? 兩種 Hook ● Action 執行代碼 ● Filter 修改他人代碼的輸出

Slide 98

Slide 98 text

Hooks 可以做乜? 兩種 Hook ● Action 執行代碼 ● Filter 修改他人代碼的輸出

Slide 99

Slide 99 text

a. Action Hook 即係點? ● Wordpress 及其他 plugin 提供不同時機 讓你跑代碼 ● 參考 https://developer.wordpress.org /plugins/hooks/actions/ https://developer.wordpress.org /apis/hooks/action-reference/

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

a. Action Hook 即係點? ● Wordpress 及其他 plugin 提供不同時機 讓你跑代碼 ● 參考 https://developer.wordpress.org /plugins/hooks/actions/ https://developer.wordpress.org /apis/hooks/action-reference/

Slide 106

Slide 106 text

b. Filter Hook 即係點? ● Wordpress 及其他 plugin 提供不同時機 讓你修改輸出 ● 參考 https://developer.wordpress.org /plugins/hooks/filters/ https://developer.wordpress.org /apis/hooks/filter-reference/

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

b. Filter Hook 即係點? ● Wordpress 及其他 plugin 提供不同時機 讓你修改輸出 ● 參考 https://developer.wordpress.org /plugins/hooks/filters/ https://developer.wordpress.org /apis/hooks/filter-reference/

Slide 112

Slide 112 text

Hooks 可以做乜? 兩種 Hook ✓ Action 執行代碼 ✓ Filter 修改他人代碼的輸出

Slide 113

Slide 113 text

進階的用戶介面

Slide 114

Slide 114 text

Grutenberg 介面

Slide 115

Slide 115 text

Grutenberg Block 高階的用戶端應用 ● 新的 Wordpress 用戶介面 ● 供 drag-drop 增減 頁面內容,所見即得 ● 需要 React (JS) 技術

Slide 116

Slide 116 text

Grutenberg Block 高階的用戶端應用 參考 https://developer.wordpress.org /block-editor /getting-started /tutorial

Slide 117

Slide 117 text

插件開發的世界好大

Slide 118

Slide 118 text

Documentation 係你好朋友

Slide 119

Slide 119 text

https://developer.wordpress.org

Slide 120

Slide 120 text

完!

Slide 121

Slide 121 text

未完 :-)

Slide 122

Slide 122 text

整好哂啦,點比人下載先?

Slide 123

Slide 123 text

方法一 Zip 檔

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

整個網頁比人下載

Slide 126

Slide 126 text

掂!

Slide 127

Slide 127 text

咁點安裝㗎?

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

記得將插件的資料匣放入 zip

Slide 132

Slide 132 text

方法二 Wordpress 官方網站

Slide 133

Slide 133 text

上載插件到 官方網站 感覺好強大 實際好簡單 要求 ● 有自己的 Wordpress.org 帳 號(可以免費申請) ● 有耐性 ● 不介意學用舊軟件 subversion 來提交

Slide 134

Slide 134 text

上載插件到 官方網站 感覺好強大 實際好簡單 參考 https://wordpress.org /plugins /developers /add

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

上載插件到 官方網站 感覺好強大 實際好簡單 留意!slug 是不能改變的! (即係 plugin 檔案的名稱) 一旦提交成功,要改名只能夠 要求刪除 plugin 然後 重新提交 (唔好問我點解知了 …… )

Slide 139

Slide 139 text

上載插件到 官方網站 感覺好強大 實際好簡單 提交後,等審查通知

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

中間可能他們會提出修改要求

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

按要求修改你的程式碼 之後再更新提交

Slide 144

Slide 144 text

如之後一切順利

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

Yes!

Slide 147

Slide 147 text

你可以正式上載插件了

Slide 148

Slide 148 text

But…

Slide 149

Slide 149 text

上載需要使用 Subversion

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

No content

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

https://developer.wordpress.org/plugins/wordpress-org/how-to-use-subversion/

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

幾好

Slide 156

Slide 156 text

但有啲朋友可能會問…

Slide 157

Slide 157 text

咁點搵錢先?

Slide 158

Slide 158 text

咁點搵錢先? 常見插件盈利模式 常見盈利方法 ● Freemium ○ 收費版本另行購買及下載 ○ 收費後提供 license key 解鎖功能

Slide 159

Slide 159 text

咁點搵錢先? 常見插件盈利模式 常見盈利方法 ● Premium ○ 免費提供試用 ○ 限時 / 限額 ○ license key 解鎖功能

Slide 160

Slide 160 text

咁點搵錢先? 常見插件盈利模式 常見盈利方法 ● Addon ○ 核心功能免費 ○ 另外提供收費 plugin

Slide 161

Slide 161 text

咁點搵錢先? 常見插件盈利模式 常見盈利方法 ● Software as a Service ○ 月費模式 ○ 以 API 形式提供服務

Slide 162

Slide 162 text

咁點搵錢先? 常見插件盈利模式 常見盈利方法 ● Pay for Support ○ 功能免費 ○ 提供收費支援服務

Slide 163

Slide 163 text

運用想像力,創造價值,換取營利

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

完 (真係)

Slide 166

Slide 166 text

我係邊個 自我介紹多次…… 聯絡 ● [email protected] ● github.com/yookoala

Slide 167

Slide 167 text

由零開始 推出你的第一個 Wordpress 插件 為你的 PHP / JS 代碼尋找機遇