2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作

開發入門的準備動作
泛傳媒／研發設計部／Audi Lu
2017/8/5
COSCUP

我是 Audi a.k.a mrmu
3寶爸、桃園人通勤台北。
有幾年WP網站開發經驗，但也有很多疑問想請教有經驗的人。
手邊在處理 WooCommerce 電商開發和 WordPress 網站開發及維運。
目前服務於泛傳媒 (泛科知識) 的研發設計部門。

不是注滿一桶水，而是點燃一把火。
今天的目標...

使用內容管理系統 (CMS) 的最佳情境，就是預
設的規格就已經完全符合你的需求。
白話翻譯：就是完全不用客製。
為何選用 WP (CMS) 開發？

適合開發小型、彈性、可擴展的電商平台，最好第一階段跟 WooCommerce
預設功能就有 87% 符合，不需要太多額外的客製。
● 受益於 WP 豐富的資源：
○ 擴展性佳：版型、外掛多
○ 開發快速：不用重新發明輪子
● 高市佔：(聽說有 30~40%)
○ 較可靠 (至少比起自行開發的初期階段要好)
○ 開發人力的養成門檻較低
○ 開源社群力量大：有問題不怕找不到解答
到底為何選用 WooCommerce 作開發？

這個版型好漂亮，那個也好棒，外掛好多，功能好棒...
「但是」這裡和那裡能不能調整一下啊？應該很簡單吧？
不過客戶和老闆都很想了解你真正的實力...

2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作

通常習慣很差或比較菜的工程師，不會先去理解正規作法。
因為目前沒有預期要跟 WordPress 維運有長期關係，所以必要
時什麼PHP檔都可以改。
「反正結完案就不關我的事了。」
PHP 工程師的 WP 客製初體驗

「你說什麼 Codex？反正我就自己連 MySQL 撈資料開幹最快了。」
「你說什麼 WP 核心？改就改了，反正最後我就當成自己的專案了。」
「自行維護 WP 所有檔案算什麼？我就是狂。」
修改核心就上線，無法升級像大便

WordPress 的核心是指什麼？
從 WordPress.org 官方網站下載下來的原始檔案大致上都是核心，除
了 wp-config.php 和 wp-content 目錄裡的東西外，其他地方最好別去
改，因為升級完都會把你客製的程式碼蓋掉。

但常常找不到要改哪個 PHP 檔，只好：
1. 改 WordPress 語系檔
2. 從前端下手，起手式 display:none
3. CSS 都搞不定，沒關係，用 JavaScript 或
jQuery 發動輕薄的假象
不改核心就好了嘛，幹嘛罵人？

是時候思考應該怎麼開始跟 WordPress / WooCommerce 有長期良好的開
發關係了。
所以，應該要從頭到尾檢視你的開發習慣和慣用的工具。
XD 太多需求要動到後端程式碼了，客製好麻煩!

LV 1. 本機開發，部署遠端：不要在線上改code，在本機改好改滿才放上遠端主機。
在 WordPress 後台線上直接修改程式碼：改錯程式碼很容易造成全站立即壞死，讓你
無法登入再改。
Cowboy Coding 與 Modern Development

LV 1. 本機開發，部署遠端：不要在線上改code，在本機改好改滿才放上遠端主機。
開始建立本機開發環境：把自己的電腦變成伺服器
1. 手動裝 LAMP/LNMP (Linux, Apache/Nginx, MySQL, PHP)
2. 找架站工具裝：mamp, xampp, ampps, VVV, Laravel Valet...
最基本的作法：在本機改完，用 FTP 上傳到遠端主機，覆蓋舊檔。
現代化的作法：在本機用虛擬化技術建立與遠端主機相同的開發環境，再用 GIT 作版
本控制，再進行遠端主機的部署，更懶一點還能自動部署。

LV 2. 理解 WordPress 架構及客製方式：Hook, templates
http://www.mrmu.com.tw/2011/10/10/wordpress-hook/
(Event-driven design pattern)

LV 2. 理解 WordPress 架構及客製方式：Hook, templates
https://developer.wordpress.org/themes/basics/template-hierarchy/

LV 3. 版本控制：備份進度，為 (比FTP更好的或自動化的) 部署作準備
Github Flow
如果你們是比較微型的團隊，蠻建議用這種協作方式。
主要精神是參與開發者一開始都 fork 一份正式環境的 code 到自己的帳號下，經過修改後再發 PR，
Review 後再 Merge 回正式環境。
GIT Flow
看起來步驟比較多，但沒實際跑過，故略XD

LV 4. 開發工具：慢慢認識及導入現代開發者都在用的工具
a. 程式碼編輯：Sublime Text, MS Code, VIM...
b. 套件管理：Composer, NPM/Yarn...
c. 任務管理：Gulp, Grunt...
d. CSS 預處理：SASS/SCSS/LESS

Starter Theme：裝完預設外觀通常很空白／很空虛／很醜
Underscore (by Automattic)
HTML5 Blank (似乎停滯更新XD)
Genesis Framework (付費)：Hook 控
UnderStrap = Underscore + Bootstrap + NPM + Gulp + SCSS + 支援 WooCommerce
Sage (by Roots) = Bootstrap/Foundation + Webpack + Yarn + Bower + Gulp ...
有客製概念了，選個佈景主題 (Theme) 來改看看？

裝完不會那麼空虛的 Theme
跨界派
Gantry Framework (Rocket Theme)
https://github.com/gantry/gantry5/tree/develop/themes
拖拉派
PageLines / Themify Builder / Visual Composer (拖拉酷!) / Divi ( 台灣 Divi 控主機商 - HelloWP )
即戰派
● 花錢買現成，客製較痛苦
● Themeforest 賣的都是這類...
● 傳奇版型 Avada (344950*60*30=620,910,000)

子佈景 (Child Theme)
善用 Child Themes 可繼承 Parent Theme 的設定，Parent Theme 可以一直 update 版本，將客
製程式碼都留在 Child Theme，最小化維護成本。
https://codex.wordpress.org/Child_Themes

把本機環境的 WP Debugging 設定先開好：在 wp-conifg.php 裡加上這些設定...
// Turn debugging on
define('WP_DEBUG', true);
// Tell WordPress to log everything to /wp-content/debug.log
define('WP_DEBUG_LOG', true);
// Turn off the display of error messages on your site
define('WP_DEBUG_DISPLAY', false);
// 為了測試wp內建的 js 所設，會改為載入非min檔案
define( 'SCRIPT_DEBUG', true );
// 把 db query 的結果存放在 global $wpdb->queries. 以方便分析
define( 'SAVEQUERIES', true );
開幹前，先讓本機所有錯誤訊息都能順利噴出來XD
https://codex.wordpress.org/Debugging_in_WordPress

WooCommerce 的可客製 templates 都放在這裡了
https://github.com/woocommerce/woocommerce/tree/release/3.1/templates
但是要怎麼開始？

接下來，如果你沒有具備一些 WP 開發經驗，你可能
會很容易晃神…但我也沒辦法。

安裝好精美的 WooCommerce 後，開始探索旅程
啟用 WooCommerce 外掛後會執行其外掛目錄下的 woocommerce.php (這跟你的 theme 目錄下的
woocommerce.php 不同)。
woocommerce.php 裡的建構子在定義完 WC 所需的常數後會 include 一大堆 interface、abstract class、
class … 等，當它判斷你在前台開啟頁面，它會另外 include 一堆 frontend 的東西，其中一個叫 class-
wc-template-loader.php。
它會負責判斷你目前所在頁面是哪個，是單一商品頁 (single product) 嗎？還是商品分類列表頁 (product
taxonomy) 呢？… 看目前打開哪種頁面就會載入哪個 template 檔。
這種 WC 會在判定後自動套用 template 目錄下樣版的頁面，估且稱它預載型 Templates。

預載型 Templates 在不熟的情況下比較難知道該去哪作客製。
但如果你在你的 theme 目錄下建立一個名為 woocommerce.php 的檔案，它會成為最優先被載入的檔案，
例如：進入單一商品頁，若在有建立 woocommerce.php 的情況下，載入順序會是：
1. woocommerce.php
2. / themes / 你的 theme 目錄 / woocommerce / signle-product.php
3. / plugins / woocommerce / templates / single-product.php
所以官方教學在講怎麼讓佈景支援 WooCommerce 時，都會提到先建 woocommerce.php，
這樣比較好取得修改優先權，比較容易進行後續預載型 templates 的客製。

預載型 Templates 在不熟的情況下比較難知道該去哪作客製。
但如果你在你的 theme 目錄下建立一個名為 woocommerce.php 的檔案，它會成為最優先被載入的檔案，
例如：進入單一商品頁，若在有建立 woocommerce.php 的情況下，載入順序會是：
1. woocommerce.php
2. / themes / 你的 theme 目錄 / woocommerce / signle-product.php
3. / plugins / woocommerce / templates / single-product.php
然後你要理解這裡的 Overriding Templates 的概念，比如你要客製購物車為空時的頁面，你就要複製：
/plugins/woocommerce/templates/cart/cart-empty.php
貼到：/themes/你的theme/woocommerce/cart/cart-empty.php
然後改後者的檔案，這樣才能將客製的程式碼留下來，避免在 WC 更新版本時被蓋掉。

幾種預載型 Templates 的載入順序：
首頁 (設為商店的頁面)：
[0] => woocommerce.php
[1] => archive-product.php
[2] => woocommerce/archive-product.php
商品分類頁 (假設是名為 test 的分類)：
[1] => taxonomy-product_cat-test.php
[2] => woocommerce/taxonomy-product_cat-test.php
[3] => taxonomy-product_cat.php
[4] => woocommerce/taxonomy-product_cat.php
商品標籤頁 (假設是名為 test 的標籤)：
[1] => taxonomy-product_tag-test.php
[2] => woocommerce/taxonomy-product_tag-test.php
[3] => taxonomy-product_tag.php
[4] => woocommerce/taxonomy-product_tag.php

哪些頁面不是預載型 Templates？
WC 安裝後自動產生的頁面：像前台的會員管理頁 (my account)、購物車頁 (cart)、結帳頁 (checkout) ..
等都不是，它們就只是一般 WP 頁面。
它們通常只貼了一段 shortcode，在開啟頁面時主動產生相關頁面內容，而不是 wc 自動判定後套上
template，所以不屬於預載型 Templates，但要客製這些 WC 產生的頁面，一樣是到 templates 目錄下
去找對應的 templates。
搜尋頁呢？no
一般文章分類頁呢？no
作者頁呢？no
一般頁面呢？：no

能判斷預載型 Templates 後，其他能客製的版面相對來說比較直白，像是購物車頁、結帳
頁…等，裡面的樣式Layout 都能在 templates 目錄下找到。
你也可以使用 Hook 的方式去客製 template 的一小部份，也可以直接修改 overriding 的
template，它們都不會受到核心及外掛本身升級的影響。
https://github.com/woocommerce/woocommerce/tree/release/3.1/templates

你可以先在頁面上找尋你想改的片段或元素名稱、屬性等，然後在 templates/ 下，
全部搜尋，找到他出現的位置再作客製。
有時候是WC內建的函式吐出的東西，所以找不到，此時 trace code 最有幫助。(可
能比 google 或 stackoverflow 的幫助還大)

例如，自動化建立 Dev, Stage, Production 環境：比如有新開發者要加入，或要在其他機器建立環境
安裝 WP-CLI + Composer
$ git clone production_repo
$ cp wp-cli-sample.yml wp-cli.yml
執行自定的 install.sh：
● composer install (composer.json) https://gist.github.com/mrmu/dd098ead7cb2e9c4ed467a09d6ef7903
○ 載入第三方or自訂的lib
○ 載入第三方WP外掛和 (父) 佈景 (https://wpackagist.org)
● 用 wp-cli 把 wp 核心裝好，把用不到的預設佈景、外掛、頁面移除，建立需要的頁面、設定
rewrite … 等。
● npm install (package.json)
○ 佈景本身需要用到的前端套件
○ 安裝 Gulp
下一步：熟悉其他進階議題
https://make.wordpress.org/cli/handbook/config/

別忘了，回饋社群!
1. 加入正體中文語系的在地化工作：請參考下午場 Alex 的解說XD，或洽 WordPress 正體中文社團：
https://www.facebook.com/groups/wordpresstw/
https://translate.wordpress.org/
1. 回報 issue 或協助 debug，分享我自己最近的經驗：
https://www.facebook.com/groups/woocommercetaiwan/permalink/912876192202143/

2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作

More Related Content

Similar to 2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作 (20)

2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作

Editor's Notes