雖然在 WordPress 中擴充功能有很多方式，例如在佈景主題上使用子佈景主題 (child theme) 並在其 function.php 中寫擴充功能。不過那是糟糕的作法。考量很多原因，例如載入順序較後，可使用的 Hook 受限，二是遇到出錯時無法像停用外掛般，停用子佈景主題，因此採用編寫外掛程式的方式在 WordPress 的生態圈中是比較正統的方式，維護較簡單，萬一外掛受歡迎的話，還有商業化營利的機會。
這一系列的 WooCommerce 電商串接實戰，就是採用設計外掛的方式進行串接實作。
這邊的命名指的是外掛的網址 slug，也是外掛的識別字串。
根據 WordPress 的外掛規則，不能把商標放在 slug 的第一位，因此命名會先加個前輟 wc。
wc-sinopac-payment
是筆者為這次的外掛命名。在寫這篇文章的同時，也以該名稱建立了 GitHub 的儲存庫
原始碼都會放在上面。
在 WordPress 的 wp-content/plugins 目錄下建立我們這次要設計的永豐金流收款外掛的目錄 wc-sinopac-shipment。並開建立一個同名的 PHP 檔案。
註：不一定要同名檔案，只是筆者習慣這麼做。在去年的鐵人賽提到 WordPress 外掛的初始化，有比較詳細的介紹，有興趣可以看看該篇文章。
圖 19-1: wc-sinopac-payment.php 外掛識別區塊
在 WordPres 後台的外掛列表頁時，會掃描 PHP 檔案的識別用的文字區塊，來判定是不是外掛檔案。因此在檔頭放進 WordPress 外掛識別用的字串，如下。
<?php
/**
* Plugin Name: WooCommerce SinoPac Payment
* Plugin URI: https://github.com/terrylinooo/wc-sinopac-payment
* Description: Credit card and virtual account (ATM) payment methods powered by SinoPac bank.
* Version: 1.0.0
* Author: Terry Lin
* Author URI: https://terryl.in/zh/
* License: GPL 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
* Text Domain: wc-sinopac-payment
* Domain Path: /languages
*/
雖然這支外掛的主要使用者會是在台灣，不過筆者依然以英文為主，再利用 WordPress 的多國語系機制來支援不同國家的使用者。外掛在釋出的時候也會夾帶繁體中文及簡體中文的多語檔案。
圖 19-2: WordPress 後台 - 外掛列表
一旦完成初始化檔案，進到 WordPress 的後台，外掛列表的頁面，會看到 WooCommerce SinoPac Payment 這支外掛已經在列表上了。
按下「啟用」，就會載入該支檔案。
這支外掛的目錄結構會是這樣的。
wc-sinopac-payment
├── controllers
├── includes
├── services
├── vendor
├── views
├── LICENSE
├── README.txt
└── wc-sinopac-payment.php
WordPress 外掛的開發者通常會把 Hook 使用和邏輯通通寫在一起。由於筆者受到 PHP 框架常用的 MVC 架構影響較深，也覺得邏輯入口和實際處理邏輯的地方切分出來會比較好維護。
如上目錄樹狀結構所示，筆者會把 Hook 的入口寫在 controllers 目錄中，而像是建立訂單、改變訂單狀態等邏輯放在 services 中，在 HTML 輸出的部分放在 views 目錄中。
圖 19-3: wc-sinopac-payment.php
這支用來初始化外掛的檔案，只要啟用後，就會被載入執行。
第 47-54 行 筆者習慣的起手式，會定義常用和路徑的常數。
第 61 行 由於程式語法有版本上的限制，沒達此版本以上不執行。
第 63 行 引入本次會用的一些幫助函式。
第 64 行 引入 Composer 自動載入器。
第 66 行 Todo 事項，準備開始進行。
啟用後，外掛已經開始執行了。Day 20 會介紹的是，定義信用卡付款閘道 (payment gateway)，先整合永豐金流的信用卡付款到 WooCommerce 中。歡迎有興趣的朋友繼續鎖定本專欄喔。^^"
iThome鐵人賽
看影片追技術