Wordpress 前後分離

簡訊插件

畫面

畫面

CSS, JS, 都有經過 minify 或 uglify

PHP 引入 CSS & JS

CSS

JavaScirpt

API

API (nonce)

<!-- php -->
<script>
    window._nonce = "<?php echo wp_create_nonce('wp_rest'); ?>";
</script>

// js
const url = `${window.location.pathname}?rest_route=/udnwpsepuser/v1/api/auth/my-profile`;
const response = await fetch(url, {
    method: 'GET',
    headers: {
        "X-WP-Nonce": window?._nonce,
    }
});

資料夾結構 (生活 + 為例)

Gulp - tasks

taskClean 清除編譯檔案 | taskCleanCopyFiles 清除複製的編譯檔案
parallelTasks 編譯所有的檔案 | taskCopyAllFiles 複製所有的編譯檔案到 wordpress 裡面 (覆蓋舊檔案)

Gulp - script

Vite

嘗試使用 Vue 開發
使用 vite-php-setup 當作模板調整

(主要調整檔案輸出的路徑)

Vite - manifest.json

透過此檔案可以知道所有資產的檔案名稱與路徑

Vite - helper.php

用 manifest.json 組合出所有的 < script > 和 < link >

Vite - SPA

udn-sms-plugin-page.php 把所有 vite 產生的檔案引入

Vite - SPA

全部相關的請求 (如下) 都用 udn-sms-plugin-page.php