開(kāi)發(fā) WordPress 的設(shè)置功能時(shí)，只需要幾個(gè)簡(jiǎn)單的設(shè)置選項(xiàng)，用原生 Setting API太麻煩，用設(shè)置框架又太重，也許這個(gè)對(duì)前端友好的不輕不重的方法會(huì)適合你。
問(wèn)題
Npcink 想要在 WordPress 平臺(tái)開(kāi)發(fā)一款支持微信和支付寶的退款插件，他只需要6個(gè)輸入選項(xiàng)和一個(gè)篩選選項(xiàng)。
- 3個(gè)輸入框用來(lái)填支付寶配置
- 3個(gè)輸入框用來(lái)填微信配置
- 一個(gè)下列篩選用來(lái)選擇有退款權(quán)限的客服
Setting API
首先，他想到使用 WordPress 原生的 setting APi 來(lái)實(shí)現(xiàn)，于是，他寫(xiě)下了 PHP 與 HTML 混合的代碼，其中一段類(lèi)似這樣
<tr>
<th scope="row"><label for="<?php echo $option_name_1; ?>">微信支付商戶(hù)號(hào)</label></th>
<td><input type="text" id="<?php echo $option_name_1; ?>" name="<?php echo $option_name_1; ?>" value="<?php echo esc_attr( $value_1 ); ?>"></td>
</tr>啊，頭皮發(fā)麻，他本就不夠用的頭發(fā)又稀疏了不少。而且，自己還要負(fù)責(zé)寫(xiě)功能、寫(xiě)驗(yàn)證、寫(xiě)外觀，碰到了不同類(lèi)型的輸入還得重來(lái)一次。
于是，當(dāng)他聰明的用循環(huán)寫(xiě)完了兩個(gè)tab選項(xiàng)下的三個(gè)輸入框后，隨著需求，他需要再添加一個(gè)下拉篩選框時(shí)，他陷入了深深的思考中。
本來(lái)是為了加快開(kāi)發(fā)速度，想著選項(xiàng)比較少，就用原生設(shè)置來(lái)做的，沒(méi)想到吃力不討好，加個(gè)小需求就難住了。
設(shè)置框架
還好，開(kāi)源世界中，已有大佬開(kāi)發(fā)了框架，直接拿來(lái)用就行。例如有以下幾個(gè)常用選擇
- Kirk3（小部件設(shè)置 – 主題常用）
- options framework（小插件，小主題在用）
- OptionTree – WordPress 的主題選項(xiàng) UI Builder — SitePoint
- CODESTAR 框架（主流主題在用）
- CMB2
- ACF
只要理解他們的文檔，遵循他們的方法，就能使用這些框架提供的強(qiáng)大能力了，開(kāi)發(fā)插件還不是手到擒來(lái)。
但是我只想添加6個(gè)輸入框和一個(gè)下列篩選框啊，其他功能我也用不上。
我拿著倚天劍不去稱(chēng)霸武林，去串肉串搞燒烤嘛，
……
第三種選擇
WordPress 現(xiàn)在已經(jīng)支持 REST API了，那我自己弄套前端，把數(shù)據(jù)通過(guò) REST API提供給 WordPress 就好啦。
之前，Npcink 就已經(jīng)使用 vue3 開(kāi)發(fā)了一些簡(jiǎn)單的SPA單頁(yè)，技術(shù)還是夠用的。
效果預(yù)覽
先看下最終效果
可以理解為一個(gè)簡(jiǎn)單的前后端分離的小項(xiàng)目，前端使用 vue3 和 Element Plus 給出，通過(guò) Axios 與后端的 WordPress 的 REST API 進(jìn)行通信，再讓后端通過(guò)get_option函數(shù)拿到設(shè)置選項(xiàng)，進(jìn)行功能設(shè)置。
技術(shù)流程
使用場(chǎng)景
適合那些有一些設(shè)置，但又不多的主題或插件，
- 用原生 Setting API 太麻煩，
- 用設(shè)置框架又多余
當(dāng)然，如果你是前端寫(xiě)后端的，就更適合了，甚至你可以將所有選項(xiàng)都通過(guò)此方法來(lái)實(shí)現(xiàn)，說(shuō)不定還更順手。
解決痛點(diǎn)
- 前后端分離，展示與功能分開(kāi)，方便維護(hù)
- 更適合前端的設(shè)置方法
- 后端提供兩個(gè)接口，前端一頓調(diào)用就行
