# 百里霧官網 – WordPress 導入指南

## 📋 檔案內容說明

本資料夾包含「百里霧多媒體 AI 服務網路工作室」網站的完整靜態 HTML 版本，可直接導入 WordPress。

### 檔案結構

“`
bailiwu-wordpress-export/
├── index.html # 主頁面 HTML 檔案
├── assets/
│ ├── index-BmOaFgoY.js # JavaScript 互動功能
│ └── index-CnOncFRO.css # 完整樣式表
└── images/ # 所有網站圖片資源
├── hero-bg.jpg
├── about-bg.jpg
├── portfolio-*.jpg
├── service-*.jpg
└── team-lead.jpg
“`

## 🚀 導入 WordPress 的方式

### 方式 1：使用 WordPress 外掛（推薦）

#### 步驟 1：安裝 HTML 導入外掛
1. 進入 WordPress 後台 → **外掛** → **安裝外掛**
2. 搜尋並安裝以下外掛之一：
– **HTML Import 2** (推薦)
– **Import HTML**
– **HTML to WordPress**

#### 步驟 2：導入 HTML 檔案
1. 進入外掛設定頁面
2. 選擇本資料夾中的 `index.html` 檔案
3. 點擊「導入」按鈕
4. 等待導入完成

#### 步驟 3：上傳圖片資源
1. 進入 WordPress 後台 → **媒體庫** → **新增媒體**
2. 批量上傳 `images/` 資料夾中的所有圖片
3. 記錄新的圖片 URL（用於更新 HTML 中的圖片路徑）

#### 步驟 4：更新圖片路徑
1. 進入頁面編輯器
2. 使用「尋找和取代」功能：
– **尋找**：`/images/`
– **取代**：`https://yoursite.com/wp-content/uploads/2024/12/` (實際 URL)

—

### 方式 2：手動複製內容

#### 步驟 1：建立新頁面
1. 進入 WordPress 後台 → **頁面** → **新增頁面**
2. 標題設為「首頁」或「首頁」

#### 步驟 2：切換到程式碼編輯器
1. 點擊頁面編輯器右上角的「程式碼編輯器」（或 HTML 模式）
2. 複製 `index.html` 中 `

` 標籤內的所有內容
3. 貼上到 WordPress 頁面編輯器

#### 步驟 3：上傳圖片
1. 進入 WordPress 後台 → **媒體庫** → **新增媒體**
2. 上傳 `images/` 資料夾中的所有圖片
3. 複製每張圖片的完整 URL

#### 步驟 4：更新圖片路徑
在頁面編輯器中，將所有圖片路徑從：
“`
/images/hero-bg.jpg
“`
改為：
“`
https://yoursite.com/wp-content/uploads/2024/12/hero-bg.jpg
“`

#### 步驟 5：新增 CSS 樣式
1. 進入 WordPress 後台 → **外觀** → **自訂**
2. 進入「額外 CSS」區域
3. 複製 `assets/index-CnOncFRO.css` 中的所有 CSS 程式碼
4. 貼上到「額外 CSS」欄位

#### 步驟 6：新增 JavaScript 功能
1. 進入 WordPress 後台 → **外觀** → **佈景主題檔案編輯器**
2. 編輯 `functions.php` 檔案
3. 在檔案末尾新增以下程式碼：

“`php
function bailiwu_enqueue_scripts() {
wp_enqueue_script(
‘bailiwu-app’,
get_template_directory_uri() . ‘/assets/index-BmOaFgoY.js’,
array(),
‘1.0’,
true
);
}
add_action(‘wp_enqueue_scripts’, ‘bailiwu_enqueue_scripts’);
“`

—

## ⚠️ 重要注意事項

### 功能限制
– **動畫效果**：由於 React 和 Framer Motion 的複雜性，某些動畫效果可能在 WordPress 中無法完全運作
– **互動功能**：懸停效果、滾動視差等可能需要額外調整
– **響應式設計**：在某些 WordPress 佈景主題中可能需要微調

### 圖片優化
– 建議在上傳前使用圖片壓縮工具（如 TinyPNG）優化圖片大小
– 確保所有圖片都是 Web 優化格式（JPG、PNG、WebP）

### 字體
– 網站使用 Google Fonts：Orbitron、Rajdhani、Syncopate、Exo 2
– 這些字體已在 HTML 中通過 CDN 引入，無需額外設定

### SEO 優化
建議在 WordPress 中新增：
1. **Meta 描述**：「百里霧融合 AI 多媒體整合的尖端實力，以詩意的科技語彙，重新定義設計的邊界。」
2. **關鍵字**：AI 設計、多媒體、虛擬人偶、影像剪輯、網站設計
3. **Open Graph 標籤**：用於社群媒體分享

—

## 📞 聯絡表單設定

### 使用 WPForms 或 Contact Form 7

#### 步驟 1：安裝外掛
– 進入 **外掛** → **安裝外掛**
– 搜尋並安裝 **WPForms Lite** 或 **Contact Form 7**

#### 步驟 2：建立表單
1. 進入外掛設定頁面
2. 建立新表單，包含以下欄位：
– 名稱 (Name)
– 電子郵件 (Email)
– 主旨 (Subject)
– 訊息 (Message)

#### 步驟 3：整合到頁面
1. 複製表單短代碼
2. 在聯絡區塊中替換原有的 HTML 表單

—

## 🔧 進階調整

### 自訂顏色
如需修改霓虹青（Cyan）或洋紅（Magenta）的顏色，編輯 CSS 中的以下變數：

“`css
:root {
–primary: oklch(0.7 0.15 220); /* 霓虹青 */
–secondary: oklch(0.6 0.2 330); /* 電子洋紅 */
–background: oklch(0.15 0.02 260); /* 深色背景 */
}
“`

### 修改文案
所有文案都在 HTML 中，可直接編輯：
– 品牌標語
– 服務描述
– 團隊介紹
– 聯絡資訊

—

## ✅ 檢查清單

導入完成後，請確認以下項目：

– [ ] 所有圖片都正確顯示
– [ ] 導覽列連結正常運作
– [ ] 聯絡表單可以提交
– [ ] 網站在手機上響應式顯示正常
– [ ] 所有文字都正確顯示（特別是中文）
– [ ] 顏色和風格符合預期
– [ ] 社群媒體連結正確

—

## 📚 有用資源

– [WordPress 官方文檔](https://wordpress.org/support/)
– [WPForms 教學](https://wpforms.com/docs/)
– [Contact Form 7 教學](https://contactform7.com/)
– [WordPress 外掛目錄](https://wordpress.org/plugins/)

—

## 💡 後續建議

1. **安裝 SEO 外掛**：Yoast SEO 或 Rank Math
2. **啟用 SSL**：確保網站安全（HTTPS）
3. **設定快取**：使用 WP Super Cache 或 W3 Total Cache 提升速度
4. **定期備份**：使用 UpdraftPlus 或 BackWPup
5. **監控效能**：使用 Google Analytics 和 Google Search Console

—

**最後更新**：2024 年 12 月 8 日
**版本**：1.0
**聯絡方式**：service@bailiwu.ai