W. 平台架設與內容產製 / WEB LAB進入課程 ↗
← 課程地圖

WEEK 05 / WordPress 網站建置

網站維護與備份+認識 AI 開發工具

01|這週你會做出什麼

完成更新檢查、帳號安全設定與備份紀錄,知道如何還原;並理解網站與 AI 開發工具的底層運作,能說出 Codex、Claude Code、Antigravity、OpenCode 的差別。

2026-10-30(學期第 7 週)
UpdateBackupRestore帳號安全動態/靜態網站LLMAI Coding AgentMCPCodexClaude CodeAntigravityOpenCode
05
先理解底層概念,再跟著操作;卡住時查操作參考。查看完成標準 ↓

02 / UNDERSTAND

底層概念|技術變了也要會判斷

WordPress 網站=資料庫+檔案

文章、頁面、設定與帳號存在資料庫;上傳的圖片、主題與外掛是檔案。完整備份要兩者都有,並存在網站之外;知道如何 Restore,才知道出問題時如何回到可用狀態。

維護有固定順序:先備份,再更新,再檢查

WordPress.com 會自動更新 WordPress 核心,但主題與外掛仍要留意。每次大改動前確認有可用的備份,改完檢查連結、表單、手機版與載入速度;移除不用的外掛與主題,記下每次變更,出問題時才知道最後動了什麼。

網站怎麼運作:動態網站與靜態網站

瀏覽器向伺服器要網頁,伺服器回傳 HTML、CSS 與 JavaScript。WordPress 每次有人造訪時,才從資料庫即時組出頁面(動態);下一單元用 AI 做的網站,多半先把頁面建置好,直接送出(靜態)。

AI 模型怎麼寫程式

大型語言模型是根據前文預測接下來的文字,不是去查一個正確答案,所以會寫錯、也會自信地編造;它只知道你提供的內容(上下文),需求說得越清楚,結果越可靠。人一定要驗收。

聊天機器人與 AI 開發工具的差別

AI 開發工具(Coding Agent)=模型+工具(讀檔、改檔、執行指令)+迴圈(規劃、動手、看結果、修正)。它會真的修改你的檔案,所以要給對權限並留下存檔點。MCP 則是讓 AI 接上外部系統(例如 WordPress)的標準插頭;讓 AI 碰你的網站之前,一定要先有備份。

四個工具,同一種架構

Codex(OpenAI)、Claude Code(Anthropic)、Antigravity(Google)、OpenCode(開源)底層都是「模型+工具+迴圈」。差別在誰提供模型、在哪裡使用(終端機、編輯器或雲端)、模型是否可選,以及費用與授權(以官方最新公告為準)。選工具時,從任務、預算與習慣出發,而不是追逐新名字。

從 WordPress 到 vibe coding:你已經會的事,換個做法
在 WordPress 裡在 vibe coding 裡
頁面、選單檔案、路由
Astra 全站設定CSS(樣式)
外掛請 AI 寫功能、引用套件
預覽、發布本機預覽 → Push → Vercel 部署
備份、還原Commit、回到舊版本

03 / MAKE

操作示範|在 WordPress 與 Astra 實作

01
Step 1

檢查更新並清理外掛與主題

在 WordPress.com 後台檢查 Astra 與外掛是否有更新,移除不用的外掛與主題;更新前先確認有可用的備份。

檢查點 → 更新狀態清楚,沒有不需要的外掛與主題。

02
Step 2

檢查帳號安全

確認 WordPress.com 帳號使用夠強的密碼,並開啟兩步驟驗證;檢查網站使用者清單,只保留需要的帳號與權限。

檢查點 → 兩步驟驗證已開啟,使用者清單沒有多餘帳號。

03
Step 3

找到備份並做一份紀錄

在 WordPress.com 後台找到網站的備份頁面,確認最近一次備份的時間與包含的內容;另用「工具 → 匯出」下載一份內容檔,存到網站之外的地方。記錄日期、範圍與保存位置。

注意:匯出檔只包含文章、頁面等內容,不含主題、外掛與網站設定,不能取代完整備份;也不要放在公開的地方。

檢查點 → 能出示一份備份紀錄,並說明備份包含什麼。

04
Step 4

找出還原入口並了解還原流程

在備份頁面找到還原入口,看看可以選擇哪些還原時間點;了解還原會覆蓋備份之後的所有變更。有測試站時才實際練習。

注意:不要在正式網站直接練習還原。

檢查點 → 能說明出問題時如何回到某個備份時間點,以及會失去什麼。

05
Step 5

聽講:網站與 AI 開發工具的底層邏輯

教師說明動態與靜態網站、AI 模型如何產生程式、AI 開發工具如何讀檔改檔,以及 Codex、Claude Code、Antigravity、OpenCode 的定位。對照上方表格,想想 WordPress 幫你做的事,換成 AI 架站後由誰來做。

檢查點 → 能用自己的話說出聊天機器人與 AI 開發工具的差別。

06
Step 6

整理一張比較筆記

用表格整理四個工具:提供者、執行位置、模型與費用、適合的任務,並寫下你下一單元打算先用哪一個、為什麼。下一單元前先註冊 GitHub 與 Vercel 帳號。

檢查點 → 筆記完成,並有一句選擇理由。

04 / REFERENCE

操作參考|需要時再查

必看

開始操作前看重點,完成後用清單自查。

WordPress 備份

WordPress.com 的更新、清理與備份示範:找到備份、留下備份紀錄,並了解還原入口與還原會覆蓋什麼。

約 15 分鐘

在 YouTube 開啟 ↗

WordPress 與 Vibe coding 的差異

從網站運作、AI 模型與 AI 開發工具的底層邏輯,說明 WordPress 幫你做的事換成 AI 架站後由誰來做,並比較四個 AI 開發工具。

約 14 分鐘

在 YouTube 開啟 ↗

卡住再看

只查你正在卡住的步驟,不必讀完整份文件。

05 / DELIVER

本週成果

本週過關目標

一份備份紀錄,以及一張 AI 開發工具比較筆記

勾選供本次瀏覽自我檢核,重新整理後重設。繳交與期限依 Google Classroom 或學校 LMS 公告。

06 / DEBUG

常見問題 / Debug

更新後網站異常怎麼辦?

記錄最後更新的項目與錯誤畫面,到備份頁面找出更新前的時間點,確認還原會失去哪些較新的內容後,再決定是否還原。

「工具 → 匯出」的檔案算備份嗎?

只算內容備份。它可以把文章與頁面搬到另一個 WordPress,但不包含主題、外掛與設定;完整還原要靠 WordPress.com 的備份功能。

四個 AI 工具一定要都學嗎?

不用。先理解它們是同一種架構,再選一個適合自己的開始;之後的 AI 架站單元會依課堂指定的工具操作。

07 / KEEP GOING

下一週,繼續往前。

帶著已備份的 WordPress 網站與對 AI 開發工具的認識,下一單元從需求描述開始,用 AI 建立新網站並部署上線。