如何開發 WooCommerce 日誌紀錄外掛


每次遇到想要跟我學習 WordPress 外掛開發的朋友來信,總是只能丟些教學文件給他們,畢竟我也不知道他們想做什麼東西,只能提供官方文件給他們參考,雖然這幾年來也寫了不少,但好像都缺少比較完整的開發教學。

想到之前為了教老婆開發而整理出的一套課程大綱,似乎有這個契機可以把它發展下去,但如果只是講理論而沒應用好像無法立即派上用場,於是想到可以整合之前寫過的小工具作為內容,就可以設計出真的能做出東西的教材。

剛好上週為了除錯的事情順手寫了一支日誌外掛,整合理論與實務的教學計畫如下:

--

前言

日誌紀錄是開發者與網站維護人員最重要的好夥伴,除了可以在開發當下輸出執行結果來確認程式的邏輯外,當網站發生錯誤時也能從紀錄中去檢查問題所在原因。查看 WooCommerce 的日誌紀錄步驟為:進入後台側選單 > 點選 WooCommerce > 狀態 > 日誌紀錄 > 選擇日誌檔 > 查看,就會顯示相關的資訊。

一、WooCommerce 內建日誌紀錄的問題

WooComerce 內建的日誌有以下幾個痛點:

  1. 選單的目錄層級過多,日誌檔太多時東西不好找
  2. 要更新日誌內容必須點選查看,直接重新整理頁面會回到預設的日誌檔
  3. 日誌紀錄的時間是由舊到新,如果單一檔案內容太多必須要捲很長的頁面才能看到最新一筆紀錄
  4. 日誌紀錄的時間非本地時間,查看時腦海中必須自行轉換
  5. 紀錄種類標示不清,難以一眼區分該紀錄是重大錯誤還是單純的訊息通知

二、WooCommerce 日誌紀錄外掛開發目標

為了解決以上問題,本篇教學將會介紹如何開發一支 WooCommerce 專用的外掛,本外掛預期會達到的效果如下:

  1. 可以在後台 WooCommerce 選單下點擊日誌紀錄選單後直接進行查看,節省多次點擊的步驟
  2. 可以設定要查看的日誌檔名稱,設定完成後僅會顯示該日誌檔的紀錄,以減少翻查時間
  3. 日誌使用表格條列式呈現,並以日誌檔名稱、日期、本地時間做分類,排序方式由新到舊
  4. 日誌表格突顯紀錄類型,讓使用者可以很容易的區分需要注意的紀錄
  5. 開發完成後導入 Github Action 打包 zip 檔供使用者第一次下載安裝
  6. 開發完成後導入自主託管更新機制,讓使用者不需另行下載安裝 zip 檔便能在後台自動更新

三、適合對象

  1. 正在學習 PHP 的新手
  2. 想要了解 WordPress 開發基礎知識的 PHP 工程師
  3. 想要開發 WordPress 外掛的創業者
  4. 想設計 WordPress 課程的老師
  5. 想撰寫 WordPress 書籍的作者

四、課程大綱

1. 認識 WordPress 外掛開發基礎知識

  • 介紹 WordPress 運作的組成:Nginx、MySQL、PHP
  • 介紹開發環境的專有名詞:本機、測試主機、正式主機
  • 使用 Local WP,介面操作教學
  • 介紹 WordPress 是由哪些檔案所構成
  • 介紹外掛的基礎組成:主程式、標頭宣告
  • 介紹 PHP 變數、函式、輸出
  • 介紹 WordPress 勾點、常用 API、資料表
  • 介紹 FTP、打包上傳
  • 介紹 Git、Github、開發流程、分支
  • 安裝 WordPress Coding standard、自動格式化
  • 介紹外掛檔案拆分邏輯,使用 Autoload、Packagist
  • PHP 物件導向基礎知識

2. WooCommerce 日誌紀錄外掛後端開發流程

  • 讀取 WooCommerce 日誌紀錄檔
  • 解析日誌內容,組合日誌紀錄陣列
  • 註冊 REST API Endpoint 提供第三方讀取紀錄

3. WooCommerce 日誌紀錄外掛前端開發流程

  • 註冊後台選單
  • 使用 Master CSS 設計版面
  • 使用 PHP 輸出頁面內容

4.外掛發布與更新維護

  • 整合 Github Actions 發行安裝檔
  • 版本控管分支策略
  • 整合自主託管外掛更新機制

-

不知道這樣的教學內容對你會有所幫助嗎?有的話回信跟我說,讓我知道可以繼續發展下去~

WordPress 開發日常

Read more from WordPress 開發日常

前陣子,我教會一位朋友使用 Claude Code。他完全不會寫程式,連終端機是什麼都沒聽過。但他有一個很清楚的產品想法,一直找不到工程師幫他做。 兩週後,他把那個產品完整地實作出來了。 不是原型、不是 wireframe,是一個可以實際運作的產品。他全程沒有寫過任何一行程式碼——他只是用中文描述他要什麼功能,Claude Code 就幫他把程式寫出來、跑起來、除完錯。 你可能會想:那它跟 ChatGPT 到底差在哪? 一、你說中文,它寫程式 大部分人聽到「Claude Code」就先退了一步。Code,程式碼,那不是工程師的事嗎? 試試看跟它說這句話:「幫我把這個資料夾裡所有 PDF 的檔名,整理成一份清單。」 它會自己寫一段程式碼、跑完、把清單生出來。你完全不需要看懂那段程式碼。同樣的事在 ChatGPT 上做,它會把程式碼貼給你看,然後你得自己想辦法找地方執行。 你需要學的不是程式語言,而是怎麼把需求講清楚。但光是能下指令還不夠——如果它每次只能做一件事就停下來等你,那跟比較聰明的 Siri 也沒什麼兩樣。 二、它不是聊天機器人,它是 Agent 用過 ChatGPT 或...

如果你有在使用 AI 開發 WordPress 外掛,並且要設計一些自訂的後台管理介面時,一定遇過資料送出時無法正確儲存,或是儲存後被導向到奇怪的頁面。 根據我的經驗,這十之八九是 Nonce 的問題,AI 在處理 Nonce 這一塊常常會出錯,為了讓 AI 更好地理解該怎麼處理 Nonce,這篇文章就來分享 Nonce 的作用,以及如何讓 AI 不要再犯這種錯。 Nonce 是為了擋 CSRF 而生的 所謂的 Nonce,最主要的功能是要防止跨站請求偽造(也就是俗稱的 CSRF)。 CSRF 主要的攻擊方式,是攻擊者誘導已經登入受害者的瀏覽器,自動發送請求到你的網站,也就是說,攻擊者不需要入侵你的網站,只要你的瀏覽器在登入狀態下點擊了惡意網址,攻擊就會開始。 舉個例子: 站長登入了某個 WordPress 網站的後台沒登出,繼續開著分頁 站長切換到另一個由惡意攻擊者準備好的頁面,這個惡意頁面藏了一段惡意程式 程式裡面的連結會指向站長 WordPress 後台 瀏覽器在送出這個請求時,會自動帶上站長已經登入的 Cookie(因為原本分頁沒關) 站長踩到這個惡意網址、讀到那段...

這禮拜的主題比較硬一點,但如果你有在用 AI 開發外掛然後想讓自己的 Antigravity 或是 Claude Code 讀到網站的內容像是查訂單,這篇教學就非常適合貼給 AI 請它幫你開發~ 話說之前做 DWP 的 LINE 聊天機器人查 WooCommerce 訂單,會員可以直接在 LINE 裡問訂單狀態、查活動,背後是 OpenAI 的 Function Call 在跑。整個架子是自己刻的——每一個會員問句能對應到的後端動作,要自己定義一份 JSON Schema 告訴模型「這個工具吃什麼參數、回什麼結構」,再寫一個 dispatcher 收到 model 的 tool_calls 之後手動 routing 到對應的 WP 函式,回傳值也要自己塞回對話 context。 換一家模型供應商就要重做一次 schema 格式(OpenAI、Anthropic、Gemini 的欄位名稱都不一樣),漏處理一個錯誤路徑 LINE 那邊就吐出一堆奇怪的字。一份「查訂單狀態」的能力,被綁死在這個 LINE Bot 專案裡,搬不到別處用。 直到 WordPress 6.9 把...