第零節:Vue3 開發WordPress設置選項 – 效果預覽與使用場景

    開發 WordPress 的設置功能時,只需要幾個簡單的設置選項,用原生Setting API太麻煩,用設置框架又太重,也許這個對前端友好的不輕不重的方法會適合你。

    開發 WordPress 的設置功能時,只需要幾個簡單的設置選項,用原生 Setting API太麻煩,用設置框架又太重,也許這個對前端友好的不輕不重的方法會適合你。

    問題

    Npcink 想要在 WordPress 平臺開發一款支持微信和支付寶的退款插件,他只需要6個輸入選項和一個篩選選項。

    • 3個輸入框用來填支付寶配置
    • 3個輸入框用來填微信配置
    • 一個下列篩選用來選擇有退款權限的客服

    Setting API

    首先,他想到使用 WordPress 原生的 setting APi 來實現,于是,他寫下了 PHP 與 HTML 混合的代碼,其中一段類似這樣

    <tr>
     <th scope="row"><label for="<?php echo $option_name_1; ?>">微信支付商戶號</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>

    啊,頭皮發麻,他本就不夠用的頭發又稀疏了不少。而且,自己還要負責寫功能、寫驗證、寫外觀,碰到了不同類型的輸入還得重來一次。

    于是,當他聰明的用循環寫完了兩個tab選項下的三個輸入框后,隨著需求,他需要再添加一個下拉篩選框時,他陷入了深深的思考中。

    本來是為了加快開發速度,想著選項比較少,就用原生設置來做的,沒想到吃力不討好,加個小需求就難住了。

    設置框架

    還好,開源世界中,已有大佬開發了框架,直接拿來用就行。例如有以下幾個常用選擇

    1. Kirk3(小部件設置 – 主題常用)
    2. options framework(小插件,小主題在用)
    3. OptionTree – WordPress 的主題選項 UI Builder — SitePoint
    4. CODESTAR 框架(主流主題在用)
    5. CMB2
    6. ACF

    只要理解他們的文檔,遵循他們的方法,就能使用這些框架提供的強大能力了,開發插件還不是手到擒來。

    但是我只想添加6個輸入框和一個下列篩選框啊,其他功能我也用不上。

    我拿著倚天劍不去稱霸武林,去串肉串搞燒烤嘛,

    ……

    第三種選擇

    WordPress 現在已經支持 REST API了,那我自己弄套前端,把數據通過 REST API提供給 WordPress 就好啦。

    之前,Npcink 就已經使用 vue3 開發了一些簡單的SPA單頁,技術還是夠用的。

    效果預覽

    先看下最終效果

    可以理解為一個簡單的前后端分離的小項目,前端使用 vue3 和 Element Plus 給出,通過 Axios 與后端的 WordPress 的 REST API 進行通信,再讓后端通過get_option函數拿到設置選項,進行功能設置。

    技術流程

    第零節:Vue3 開發WordPress設置選項 - 效果預覽與使用場景

    使用場景

    適合那些有一些設置,但又不多的主題或插件,

    • 用原生 Setting API 太麻煩,
    • 用設置框架又多余

    當然,如果你是前端寫后端的,就更適合了,甚至你可以將所有選項都通過此方法來實現,說不定還更順手。

    解決痛點

    • 前后端分離,展示與功能分開,方便維護
    • 更適合前端的設置方法
    • 后端提供兩個接口,前端一頓調用就行

    給TA贊賞
    共{{data.count}}人
    人已贊賞
    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    ?
    購物車
    優惠劵
    搜索
    主站蜘蛛池模板: 国产激情无码一区二区| 精品人妻无码一区二区三区蜜桃一| 亚洲福利精品一区二区三区| 亚洲丰满熟女一区二区哦| 高清一区高清二区视频| 中文字幕亚洲一区| 亚洲毛片αv无线播放一区 | 亚洲成AV人片一区二区密柚| 国产成人久久一区二区三区| 精品视频无码一区二区三区| V一区无码内射国产| 成人免费一区二区三区在线观看| 一区二区视频在线| 亚洲av综合av一区| 伊人激情AV一区二区三区| 亚洲乱码国产一区网址| 天堂va视频一区二区| 亚洲性色精品一区二区在线| 日本午夜精品一区二区三区电影| 国产一区二区三区不卡观| 中文字幕一区二区三区在线不卡| 日韩精品一区二区三区视频| 精品无码成人片一区二区| 国产一区二区三区福利| 青娱乐国产官网极品一区| 国产传媒一区二区三区呀| 国产精品久久久久一区二区| 日本精品啪啪一区二区三区| 国产一区中文字幕| 性色AV 一区二区三区| 夜色阁亚洲一区二区三区| 国产激情一区二区三区 | 一区二区三区亚洲视频| 国产精品亚洲高清一区二区| 国产成人一区二区三区在线| 无码人妻精品一区二区三18禁| 日韩精品一区二区亚洲AV观看 | 国产精品亚洲一区二区三区| 国产主播一区二区三区在线观看| 青娱乐国产官网极品一区| 国产福利电影一区二区三区久久老子无码午夜伦不 |