Skip to main content

Vite + Tailwind in WordPress Theme

· One min read
Smile Hsu
Smile Hsu
Full-stack developer ,Data Analyst

✨前言​

之前有在Udemy上買過WordPress Headless CMS的課程
把WP前後端完全分離，所以我想說既然整個網站前端都能用React
那導入佈景主題，這範圍更小應該可以吧

問了Gemini ，鬼打牆一兩個小時後放棄，在github 找幾個年份相近的範例
到本機上都是error，最後問了ChatGPT 直接打包一個佈景主題檔讓我下載
丟到本機端，馬上可以使用，真不愧是我大哥ChatGPT
所以這篇我就不寫實作過程了，附上原始碼，下載就能用

💻 原始碼下載​

git clone https://github.com/rs6000/react-vite-tailwind-wp-theme.git

📁 專案結構​

react-vite-tailwind-wp-theme/
├── functions.php
├── index.php
├── style.css
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── components/
│   │   ├── Hero.jsx
│   │   └── CardGrid.jsx
│   └── style.css
└── README.md

🚀 安裝步驟​

  1. 將整個主題資料夾放入：
    wp-content/themes/react-vite-tailwind-wp-theme

  2. 在主題目錄中執行：

    npm install
    npm run build

  3. 啟用主題後，即可看到 React Hero 區塊與 3×3 卡片。

🖼 網站截圖​

demo