---
title: wordpress 前後分離 (前端篇)
tags: udn
type: slide

slideOptions:
spotlight:
enabled: false
touch: false
---

# Wordpress 前後分離
前端篇 <font size="3">*(不會有後端篇)*</font>

---

用戶生活+


----

簡訊插件


---

## 目錄

- 現況 (前端做了什麼)
- 工具 (Gulp, Vite)
- 目的 (工具的目的)
- 已知問題

---

## 現況

- Docker
- 處理畫面 - js & css & images & php
- API - 前後分離，依靠 api 溝通
- 資料夾結構

----

### 畫面

<font size="5">
跟原本的寫法沒有差別，php 寫 HTML，JS & CSS 來處理畫面與行為
</font>


----

### 畫面

CSS, JS, 都有經過 minify 或 uglify

<font size="3">PHP 引入 CSS & JS</font>

<font size="3">CSS</font>

<font size="3">JavaScirpt</font>

----

### API

<font size="5">
打 API 的同時需要帶上 cookie & nonce，PS 打 API 會自動夾帶 cookie，但 url 要注意
</font>


<font size="5">
生活+ 的 api
</font>
<br/>
<font size="5">
https://lab-edumall.udn.com/malllab/?rest_route=/udnwpsepuser/v1/auth/login
</font>

<br/>

<img src="https://i.imgur.com/BoOsF7k.png" width="600px" />

<br/>

----

### 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,
    }
});

----

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

<font size="4">
gulp - 開發時撰寫的檔案、gulp 的設定
<br/>
plugins - 插件本體 (php, 處理過的 css,js)
<br/>
wordpress - wordpress 本體
</font>

<br>


<!-- <img src="https://i.imgur.com/BQ9PKYZ.png" width="400" /> -->

---

## 工具

- Gulp
- 專案: 用戶生活+ 的會員系統插件
- 全部都需要自己寫，比較麻煩
- Vite
- 專案: 簡訊插件
- ps. 開發 Vue 時設定比較方便

----

### Gulp - tasks

<img src="https://i.imgur.com/bogDfbL.png" width="700" />

<font size="3">taskClean 清除編譯檔案 | taskCleanCopyFiles 清除複製的編譯檔案</font>
<font size="3">parallelTasks 編譯所有的檔案 | taskCopyAllFiles 複製所有的編譯檔案到 wordpress 裡面 (覆蓋舊檔案)</font>

----

### Gulp - script

<font size="4">
yarn dev - 監聽檔案改動並自動編譯
<br/>
yarn build - 編譯成 production 的檔案
<br/>
yarn clean - 刪除所有編譯出來的檔案
</font>


<a href="https://drive.google.com/file/d/1Q5I7kQ3cRwv4Z9K0UqiD38DPJZVobtIO/view?usp=share_link">
dev
</a>

<a href="https://drive.google.com/file/d/1ODeidmjS8m5k1M5iAzXiW7Y_Ezhrc1WM/view?usp=share_link">
build
</a>

----

### Vite

嘗試使用 Vue 開發
使用 [vite-php-setup](https://github.com/andrefelipe/vite-php-setup) 當作模板調整

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

----

### Vite - manifest.json

<font size="3">透過此檔案可以知道所有資產的檔案名稱與路徑</font>
<img src="https://i.imgur.com/xnATjZD.png" width="750" />

----

### Vite - helper.php

<font size="5">用 manifest.json 組合出所有的 &lt; script &gt; 和 &lt; link &gt; </font>

<img src="https://i.imgur.com/7vWe4YG.png" width="750" />

----

### Vite - SPA

<font size="5">udn-sms-plugin-page.php 把所有 vite 產生的檔案引入</font>

<img src="https://i.imgur.com/tCKYA89.png" width="750" />

----

### Vite - SPA

<font size="5">全部相關的請求 (如下) 都用 udn-sms-plugin-page.php </font>

<font size="1">

https://lab-edumall.udn.com/malllab/wp-admin/admin.php?page=udn-sms-options

https://lab-edumall.udn.com/malllab/wp-admin/admin.php?page=udn-sms-record

</font>

<img src="https://i.imgur.com/4G6nXqz.png" width="750" />

---

## 達成目的

### 自動化

- 使用 Gulp 的專案就有寫複製功能，不需要手動處理
- 可以用比較新的功能，再透過工具處理相容性問題
- 用相關套件可以處理 CSS、JS 甚至圖片 (minify、uglify、tree shaking、.map 檔)

---

## 已知問題

目前沒有整合到 docker，並沒完全自動化

<font size="4">
所以開發時需要打 script ，或者開發時要手動改成開發時需要的設定，而且現在編譯完成的檔案都會進入 git
</font>