亚洲第一狼人区,久久精品99国产精,在线免费观看日韩av

本節(jié)中，我們實(shí)現(xiàn)了兩個輸入框進(jìn)行獲取和修改選項(xiàng)，并通過保存按鈕將選項(xiàng)的值保存進(jìn) WordPress 中。本節(jié)代碼較多，但注釋詳細(xì)，做好準(zhǔn)備咯

承接上文，我們解決了PHP傳遞數(shù)據(jù)給JS的問題，現(xiàn)在，我們可以創(chuàng)建兩個輸入框和一個保存按鈕。

輸入框存儲和修改選項(xiàng)值
保存按鈕用于保存選項(xiàng)值

在頁面加載的開始獲取選項(xiàng)的值，將其作為輸入框的默認(rèn)值，修改輸入框內(nèi)容后點(diǎn)擊保存按鈕，將輸入框的值通過 REST API 保存到 WordPress 中，并通過 get_option() 函數(shù)拿到對應(yīng)的值。

流程介紹

詳細(xì)流程如下

第二節(jié)：Vue3 開發(fā)WordPress設(shè)置選項(xiàng)- 從輸入框開始，配置基礎(chǔ)設(shè)置選項(xiàng)

后端準(zhǔn)備

在后端，我們要準(zhǔn)備兩個接口，分別是

讀取選項(xiàng)接口，在頁面的開始獲取選項(xiàng)初始值
保存選項(xiàng)接口，點(diǎn)擊保存按鈕時保存選項(xiàng)

這兩個接口會在后續(xù)的前端開發(fā)中用到。為了方便大家理解，我們會從最簡單的函數(shù)開始，然后逐步加大難度。

我們在 vue-spa 文件夾下新建 interface.php 文件，用來放置接口相關(guān)的代碼。
填入以下代碼，創(chuàng)建兩個接口

//接口文件
function vuespa_create_api()
{
    register_rest_route('pf/v1', '/get_option/', array( // 完整命名空間為：/wp-json/pf/v1/
        'methods' => 'POST',
        'callback' => 'get_option_by_RestAPI',
    ));
    register_rest_route('pf/v1', '/update_option/', array( // 完整命名空間為：/wp-json/pf/v1/
        'methods' => 'POST',
        'callback' => 'update_option_by_RestAPI',
        'permission_callback' => function () {
            return current_user_can('manage_options'); // 只有管理員才有權(quán)限修改
        },
    ));
}
add_action('rest_api_init', 'vuespa_create_api');

讀取選項(xiàng)接口

我們填入以下內(nèi)容

//讀取Option
//僅支持一對一的數(shù)據(jù)請求
function get_option_by_RestAPI($data)
{
    //將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型
    $dataArray = json_decode($data->get_body(), true);
    //新建數(shù)組
    $return = array();
    //循環(huán)獲取對應(yīng)選項(xiàng)ID的值，并將其存儲在對應(yīng)關(guān)聯(lián)數(shù)組中，若拿不到值，則為空
    foreach ($dataArray as $option_name => $value) {
        $return[$option_name] = get_option($option_name) ? get_option($option_name) : "";
    }
    return $return;
}

保存選項(xiàng)接口

我們填入以下內(nèi)容

//保存Option
//一對一保存
function update_option_by_RestAPI($data)
{
    //判斷是否是管理員
    if (current_user_can('manage_options')) {
        //將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型
        $dataArray = json_decode($data->get_body(), true);
        //循環(huán)保存選項(xiàng)
        foreach ($dataArray as $option_name => $value) {
            update_option($option_name, $value);
        }
        //返回成功信息
        return new WP_REST_Response(array(
            'success' => true,
            'message' => "已保存！"
        ), 200);
    } else {
        //返回失敗信息
        return new WP_Error('save_error', '保存失敗！', array('status' => 500));
    }
}

引入

現(xiàn)在，我們的 interface.php 文件準(zhǔn)備好了，我們在 vue-spa.php 中添加以下代碼引入該文件，

//接口
require_once plugin_dir_path(__FILE__) . 'interface.php';

前端準(zhǔn)備

我們需要用到 Vue3 和 Axios ，當(dāng)然，只要能實(shí)現(xiàn)功能的，你喜歡的任何工具均可。

我們還需要在菜單頁面中展示兩個輸入框和一個保存按鈕

載入資源

修改 vue-spa.php 中的 vuespa_load_vues() 函數(shù)，我們需要引入 vue3 和 Axios 資源。改為以下代碼

//載入所需 JS 和 CSS 資源 并傳遞數(shù)據(jù)
function vuespa_load_vues($hook)
{
    //判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '53';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    //加載到頁面底部
    wp_enqueue_script('vue', 'https://unpkg.com/vue@3/dist/vue.global.js', array(), $ver, true);
    wp_enqueue_script('axios', 'https://unpkg.com/axios/dist/axios.min.js', array(), $ver, true);
    wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, true);

    $pf_api_translation_array = array(
        'route' => esc_url_raw(rest_url()),     //路由
        'nonce' => wp_create_nonce('wp_rest'), //驗(yàn)證標(biāo)記
        'data' => vuespa_data(),               //自定義數(shù)據(jù)
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項(xiàng)目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

在這里，為了讓我們的 vue3 的 JS 文件能正確拿到文檔節(jié)點(diǎn)，我們將 JS 的加載都從 false 改為 true ,這樣，JS 就會加載到頁面底部了。

現(xiàn)在，我們就能在菜單頁面正常使用 vue3 的功能了。

準(zhǔn)備輸入框和按鈕

我們修改 index.js 文件為以下代碼

//vite/dist/index.js
const App = {
  setup() {
    //初始值
    const datas = Vue.reactive({
      dataOne: "",
      dataTwo: "",
    });

    //獲取數(shù)據(jù)
    const vuespa_get_option = () => {
      axios
        .post(dataLocal.route + "pf/v1/get_option", datas, {
          headers: {
            "X-WP-Nonce": dataLocal.nonce,
            "Content-Type": "application/json",
          },
        })
        .then((response) => {
          const data = response.data;
          datas.dataOne = data.dataOne;
          datas.dataTwo = data.dataTwo;
        })
        .catch((error) => {
          window.alert("連接服務(wù)器失敗或后臺讀取出錯！數(shù)據(jù)讀取失敗");
          console.log(error);
        });
    };

    //保存數(shù)據(jù)
    const vuespa_update_option = () => {
      axios
        .post(dataLocal.route + "pf/v1/update_option", datas, {
          headers: {
            "X-WP-Nonce": dataLocal.nonce,
          },
        })
        .then((response) => {
          alert("保存成功");
        })
        .catch((error) => {
          alert("保存失敗");
          console.log(error);
        });
    };

    //頁面初始加載
    Vue.onMounted(() => {
      console.log("簡簡單單");
      vuespa_get_option();
    });

    return { datas, vuespa_update_option };
  },
  template:
    '文本框1：<input type="text" v-model="datas.dataOne"><br/>文本框2：<input type="text" v-model="datas.dataTwo"><hr/><button class="button button-primary" @click="vuespa_update_option">保存</button>',
};

Vue.createApp(App).mount("#vuespa");

作用如下：

創(chuàng)建了一個響應(yīng)式變量datas
創(chuàng)建了獲取數(shù)據(jù)函數(shù)vuespa_get_option()通過上一節(jié)傳來的網(wǎng)址進(jìn)行拼接后發(fā)出post請求，并在標(biāo)頭中傳入驗(yàn)證信息。
創(chuàng)建了保存數(shù)據(jù)函數(shù)vuespa_update_option(),與上述函數(shù)作用類似
我們在頁面的開始，就加載vuespa_get_option()函數(shù)，將拿到的值作為輸入框的默認(rèn)值
我們通過 vue3 的模版，提供了兩個 input輸入框和一個按鈕，
input 的值與 datas 的變量進(jìn)行雙向綁定，按鈕的點(diǎn)擊事件綁定vuespa_get_option()函數(shù)進(jìn)行數(shù)據(jù)保存

現(xiàn)在，刷新頁面，就能看到我們創(chuàng)建的輸入框，進(jìn)行簡單的修改，點(diǎn)擊保存按鈕，就能將數(shù)據(jù)保存到 WordPress 了。

wordpress 會緩存部分 JS 文件，建議您每次修改 JS 文件后，都修改函數(shù) vuespa_load_vues() 中的版本號信息

原理淺析

當(dāng)我們進(jìn)入菜單頁 VusSpa 時，觀察控制臺，會有一個get_option的請求，內(nèi)容如下

發(fā)出了請求，拿到了選項(xiàng)值，并將其作為默認(rèn)值。

現(xiàn)在，我們修改輸入框中的值，點(diǎn)擊保存按鈕，會觸發(fā)update_option,內(nèi)容如下：

已將我修改的值傳出了，并返回保存成功的信息。

調(diào)用

get_option() | Function | WordPress Developer Resources

跟傳統(tǒng)方法一樣，我們使用get_option來調(diào)用對應(yīng)的選項(xiàng)值。

選項(xiàng)已準(zhǔn)備好，我們開始調(diào)用，為了方便展示調(diào)用的數(shù)據(jù)，我們將選項(xiàng)值在菜單頁中展示，
我們修改回調(diào)函數(shù)vuespa_menu_page_display(),添加以下內(nèi)容

    echo "<h3>調(diào)用選項(xiàng)值</h3>";
    echo get_option('dataOne');
    echo "<br/>";
    echo get_option('dataTwo');

可看到以下效果

完整代碼

vue-spa.php

<?php
/*
Plugin Name: Vue - SPA 
Plugin URI: http://m.kartiktrivedi.com
Description: 將vue構(gòu)建的頁面嵌入WordPress 中并產(chǎn)生交互
Author: Muze
Author URI: http://m.kartiktrivedi.com
Version: 1.0.0
*/


//接口
require_once plugin_dir_path(__FILE__) . 'interface.php';
//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

//菜單回調(diào) - 展示的內(nèi)容
function vuespa_menu_page_display()
{
?>

    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換{{data}}</div>
    </div>



<?php

    //展示準(zhǔn)備的數(shù)據(jù)
    echo "<pre>";
    print_r(vuespa_data());
    echo "</pre>";

    echo "<h3>調(diào)用選項(xiàng)值</h3>";
    echo get_option('dataOne');
    echo "<br/>";
    echo get_option('dataTwo');
} // vuespa_menu_page_display



//載入所需 JS 和 CSS 資源 并傳遞數(shù)據(jù)
function vuespa_load_vues($hook)
{
    //判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '53';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    //加載到頁面底部
    wp_enqueue_script('vue', 'https://unpkg.com/vue@3/dist/vue.global.js', array(), $ver, true);
    wp_enqueue_script('axios', 'https://unpkg.com/axios/dist/axios.min.js', array(), $ver, true);
    wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, true);

    $pf_api_translation_array = array(
        'route' => esc_url_raw(rest_url()),     //路由
        'nonce' => wp_create_nonce('wp_rest'), //驗(yàn)證標(biāo)記
        'data' => vuespa_data(),               //自定義數(shù)據(jù)
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項(xiàng)目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');


//準(zhǔn)備待傳輸?shù)臄?shù)據(jù)
function vuespa_data()
{
    $person = [
        "str" => "Hello, world! - Npcink",
        "num" => 25,
        "city" => [1, 2, 3, 4, 5],
    ];
    return $person;
}

interface.php

<?php
//interface.php
//接口文件
function vuespa_create_api()
{
    register_rest_route('pf/v1', '/get_option/', array( // 完整命名空間為：/wp-json/pf/v1/
        'methods' => 'POST',
        'callback' => 'get_option_by_RestAPI',
    ));
    register_rest_route('pf/v1', '/update_option/', array( // 完整命名空間為：/wp-json/pf/v1/
        'methods' => 'POST',
        'callback' => 'update_option_by_RestAPI',
        'permission_callback' => function () {
            return current_user_can('manage_options'); // 只有管理員才有權(quán)限修改
        },
    ));
}
add_action('rest_api_init', 'vuespa_create_api');


//讀取Option
//僅支持一對一的數(shù)據(jù)請求
function get_option_by_RestAPI($data)
{
    //將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型
    $dataArray = json_decode($data->get_body(), true);
    //新建數(shù)組
    $return = array();
    //循環(huán)獲取對應(yīng)選項(xiàng)ID的值，并將其存儲在對應(yīng)關(guān)聯(lián)數(shù)組中，若拿不到值，則為空
    foreach ($dataArray as $option_name => $value) {
        $return[$option_name] = get_option($option_name) ? get_option($option_name) : "";
    }
    return $return;
}


//保存Option
//一對一保存
function update_option_by_RestAPI($data)
{
    //判斷是否是管理員
    if (current_user_can('manage_options')) {
        //將傳遞數(shù)據(jù)轉(zhuǎn)成數(shù)組類型
        $dataArray = json_decode($data->get_body(), true);
        //循環(huán)保存選項(xiàng)
        foreach ($dataArray as $option_name => $value) {
            update_option($option_name, $value);
        }
        //返回成功信息
        return new WP_REST_Response(array(
            'success' => true,
            'message' => "已保存！"
        ), 200);
    } else {
        //返回失敗信息
        return new WP_Error('save_error', '保存失敗！', array('status' => 500));
    }
}

index.js

//vite/dist/index.js

const App = {
  setup() {
    //初始值
    const datas = Vue.reactive({
      dataOne: "",
      dataTwo: "",
    });

    //獲取數(shù)據(jù)
    const vuespa_get_option = () => {
      axios
        .post(dataLocal.route + "pf/v1/get_option", datas, {
          headers: {
            "X-WP-Nonce": dataLocal.nonce,
            "Content-Type": "application/json",
          },
        })
        .then((response) => {
          const data = response.data;
          datas.dataOne = data.dataOne;
          datas.dataTwo = data.dataTwo;
        })
        .catch((error) => {
          window.alert("連接服務(wù)器失敗或后臺讀取出錯！數(shù)據(jù)讀取失敗");
          console.log(error);
        });
    };

    //保存數(shù)據(jù)
    const vuespa_update_option = () => {
      axios
        .post(dataLocal.route + "pf/v1/update_option", datas, {
          headers: {
            "X-WP-Nonce": dataLocal.nonce,
          },
        })
        .then((response) => {
          alert("保存成功");
        })
        .catch((error) => {
          alert("保存失敗");
          console.log(error);
        });
    };

    //頁面初始加載
    Vue.onMounted(() => {
      console.log("簡簡單單");
      vuespa_get_option();
    });

    return { datas, vuespa_update_option };
  },
  template:
    '文本框1：<input type="text" v-model="datas.dataOne"><br/>文本框2：<input type="text" v-model="datas.dataTwo"><hr/><button class="button button-primary" @click="vuespa_update_option">保存</button>',
};

Vue.createApp(App).mount("#vuespa");

問題

目前的功能是可以用了，但還有些問題

只能一對一的獲取數(shù)據(jù)，在一些復(fù)雜場景中，這種數(shù)據(jù)結(jié)構(gòu)很不友好
目前是手動載入 Vue3 和 Axios文件，加載緩慢，導(dǎo)致頁面都加載好了，選項(xiàng)內(nèi)容有些許延遲，有閃動感，體驗(yàn)不好
為了簡單的功能，載入了 vue3 這個龐然大物，而且vue3的很多功能都沒用上。
沒有人員篩選、文章篩選和分類篩選之類的，與 WordPress 產(chǎn)生交互的功能，

針對以上問題，我們將在下一節(jié)中繼續(xù)進(jìn)行優(yōu)化改進(jìn)。

{{userData.name}}已認(rèn)證

第二節(jié)：Vue3 開發(fā)WordPress設(shè)置選項(xiàng)- 從輸入框開始，配置基礎(chǔ)設(shè)置選項(xiàng)

流程介紹

后端準(zhǔn)備

讀取選項(xiàng)接口

保存選項(xiàng)接口

引入

前端準(zhǔn)備

載入資源

準(zhǔn)備輸入框和按鈕

原理淺析

調(diào)用

完整代碼

vue-spa.php

interface.php

index.js

問題

TePostViews-Typecho文章瀏覽數(shù)統(tǒng)計(jì)插件

WordPress主題開發(fā)：制作文章頁面single.php

給剛開始學(xué)習(xí)Linux的你

怎么配置阿里云企業(yè)郵箱？ – wordpres教程

WordPress 技巧：屏蔽 DEMO 賬號修改密碼

Qalam – 報(bào)紙和雜志W(wǎng)ordPress新聞主題

久久精品国产99国产精品免费看_中文成人在线_日本在线播放视频_精品国产一区二区三区在线观看

{{userData.name}}已認(rèn)證

流程介紹

后端準(zhǔn)備

讀取選項(xiàng)接口

保存選項(xiàng)接口

引入

前端準(zhǔn)備

載入資源

準(zhǔn)備輸入框和按鈕

原理淺析

調(diào)用

完整代碼

vue-spa.php

interface.php

index.js

問題

第一節(jié)：Vue3 開發(fā)WordPress設(shè)置選項(xiàng) - PHP傳數(shù)據(jù)給JS

第五節(jié)： Vue3 開發(fā)WordPress設(shè)置選項(xiàng) - 使用Vite打包JS資源

第四節(jié)：Vue3 開發(fā)WordPress設(shè)置選項(xiàng) - 添加圖片上傳功能

第三節(jié)：Vue3 開發(fā)WordPress設(shè)置選項(xiàng) - 從篩選功能研究前后臺數(shù)據(jù)交互