四年前那次網站改版，才明白做自己的網站有多困難，要滿足客戶的需求是一門技能，要滿足自己的需求是完全不同的境界，所以特別請朋友幫我設計與架設，才能完成那一次的改版大工程。
這次我把跑了多年的 Elementor 電商站，整站改寫成一個不依附任何頁面編輯器與自訂欄位的佈景主題，全程運用 AI 協作開發，在本機開發完成後直接部署到正式站，品牌視覺風格維持，但底層的 Elementor、Jet Engine 這些相依全部拔掉了。
為什麼想再改版一次？
第一個原因，其實跟技術無關，是「亂」。
剛開始設計好的時候美美的，但這些年陸陸續續加了太多東西——文章、外掛商品、電子報訂閱、推廣合作計畫、線上文件、會員中心。每加一塊功能就多開一個頁面、多裝一個外掛，久了整個網站的資訊架構變得很鬆散。
一個第一次來的人，很難在前幾秒就看懂我主要業務是什麼、提供哪些服務，我想重新整理這件事，讓網站的第一印象能直接說清楚我的業務內容。
第二個原因是我想擺脫對 Elementor 和 Jet Engine 這一整套外掛的依賴。
當初這個版本是四年前做的，我很感謝 Hend Design 那次幫我做的改版，那時候用 Elementor Pro 的 Theme Builder 撐起全站版型，Jet Engine 做文章卡片的動態列表，Max Mega Menu 做選單，整套組合在當年是很合理的選擇。
只是這幾年下來，頁面建構器堆疊的技術債愈來愈重：全站版型鎖在 Elementor 的資料裡，文章列表綁著 Jet Engine 的 listing，選單連結還掛著 JetSmartFilters 的 AJAX 過濾參數，要動一個小地方，得先搞懂三四個外掛彼此怎麼串，然後我常常搞不懂，所以很多想法就擺在那邊動不了。
用 Claude Code 打造 WordPress 佈景主題
我用的是 Claude Code，我捨棄了傳統的佈景主題，不再從一個現成的主題去改，而是直接做一個 oberon 的自訂主題，架構走的是經典 PHP 加上 theme.json 的混合模式，前台版型全部改寫成主題自己的 single.php、archive.php、front-page.php 這些檔案。
本來在猶豫要沒有採用最新的 Block Theme 來做，但因為自己沒有太多要從後台修改版面的需求，所以都還是直接寫死在 PHP 裡面，再加上與 WooCommerce 的相容性，還是保守一點選擇傳統的佈景主題。
開發過程中我先請 Claude Code 萃取既有站的 Design Token，保持設計風格不變：顏色、字型、間距、按鈕樣式，全部沿用舊版，結構的 HTML 和 CSS class 可以整個換掉，但讀者打開網站看到的東西不能變，而這也是 WordPress 佈景主題的好處，換外觀不換內容。
整個開發過程最花時間的是微調。像是 header 的 logo 上下邊距、文章內頁的目錄要在電腦版預設展開、手機版預設收起、圖片點擊要用燈箱打開而不是另開分頁、延伸閱讀要抓同分類文章再隨機排序——這種細節列出來有上百項，一項一項改、改完截圖確認，反覆了很多輪：
要管理這麼大量細部的修改需求，我的做法是使用 Notion，當 Claude Code 完成初版後，我自己先測試過一次，然後把我要改的東西全部用待辦清單一個一個列出來，全部列完之後，我再請 Claude 呼叫 Notion CLI 去讀我這份文件，然後根據我的需求開始逐一修改。
這樣的做法可以很方便地在一個 session 之中，去處理所有我想要改的東西，但也發現到，如果其中某項功能太複雜，或是可能一次處理太多的話，某些東西會漏掉，但它還是會跟你說它做好了，並且把 Notion 裡的待辦事項勾選為已完成 > <。
但因為這是自己的網站才能這樣子搞，如果是專案的話流程就會用之前寫過的一頁式專案管理。
實驗不同版型
當 AI 第一版設計出來的東西我不滿意時，我沒有一直用文字去描述「我想要什麼」，而是換個方式，直接請它針對首頁設計五種不同的版型讓我挑，連 Header 和 Footer 都各給我五種排版方案，配色不准變，架構不准變，只變版面的呈現方式。
於是我就收到五組完全不同的 Header、五組 Footer、五種首頁佈局、五種文章內頁佈局。挑選的時候我只要說「header 我選 2、footer 我選 1、首頁 hero 選 1、文章內頁用 4」，它就照著我挑的組合去收斂，中間我還丟了一個參考網站給它，請它照頁面結構再出三種提案。
像關於我的頁面它就幫我做了切換按鈕，讓我可以在五種不同的排版之間進行挑選：
這個過程讓我想起以前用付費佈景主題的日子，那時候一套主題會附好幾種 demo layout 讓你切換，換一個版型像換衣服，差別是這次那些版型不是主題作者預先做好的固定選項，而是 AI 針對我的內容、我的設計系統當場動態生出來的。
那個 Hero Section 的背景動畫也很有意思，一開始它用 Three.js 做了一版 3D 的粒子效果，但載一個 669KB 的函式庫只為了首頁一塊背景，我請它改寫成一段輕量的 2D canvas 粒子——用品牌色畫一堆低透明度的方塊緩慢飄移，還會跟著滑鼠視差移動，離開視窗就自動暫停。
重新思考架設 WordPress 的流程
現在如果使用 AI 架站網站，預設情況下它的首選會是 React.js + Next.js，然後主機用 Vercel、資料庫用 Supabase，如果是懂這些技術的人，架起來就會額外順手，但對於沒有概念朋友來說，用一個現成的架站工具它會幫你把不知道的細節全部顧好，讓你不用跟 AI 另外說明，或是燒 Token 跑一堆 Skill 來做後續的檢查。
然後架站工具也儘可能選老牌跟開源的，老牌的話是 AI 訓練資料比較完整，寫出來的東西正確率比較高，開源的話可以讓你不被單一主機商綁架，保有選擇的自由度也是長期經營務必要考量的點。
WordPress 就是一個很好的利基點，它夠老又開源，非常適合新手上手，萬一遇到解決不了的問題，在台灣有非常成熟的社群可以尋求協助，如果你對用 AI 寫 WordPress 程式碼還不熟，也可以先看我之前寫的 Vibe coding 入門：開發 WordPress 外掛，從一個小工具開始練手感，會比一開始就改整站來得踏實。