AI生成主題有個(gè)好處就是，只要你的提示詞到位，AI模型給力，就可以隨心所欲的定制。一共嘗試了兩種頁(yè)面內(nèi)容生成方式：專門針對(duì)的ui生成網(wǎng)站 和 生成主題上傳，各干千秋，按實(shí)際情況選擇吧。

第一種：使用針對(duì)的主題生成網(wǎng)站

我發(fā)現(xiàn)了一個(gè)比較好用的專門針對(duì) 生成網(wǎng)站ui的網(wǎng)站：。

如果是個(gè)人站的話，免費(fèi)賬戶可以生成2個(gè)站，簡(jiǎn)單注冊(cè)一些就可以用了，下面是注冊(cè)后的頁(yè)面：

直接按照流程寫內(nèi)容，AI就會(huì)幫你生成對(duì)應(yīng)站點(diǎn)了。

這里根據(jù)你自己的站點(diǎn)，對(duì)站點(diǎn)的描述，寫的越詳細(xì)越好。

然后自行選擇圖片：

選擇站點(diǎn)模板，這些模板應(yīng)用了你選擇的圖片，這點(diǎn)我非常喜歡。

再調(diào)整字體和背景色：

有電商需求的可以再勾選電商相關(guān)項(xiàng)，還有預(yù)定，在線客服等相關(guān)板塊

現(xiàn)在來(lái)看看建站成品：

是不是小白很友好，不過(guò)后面會(huì)需要做一些微調(diào)，這個(gè)是每個(gè)主題都避免不了的，但不妨礙我認(rèn)可他生成站點(diǎn)的頂級(jí)設(shè)計(jì)。

第二種：用Trea 國(guó)際版寫主題，自定義樣式上傳。

我的提示詞模板：

portant;word-break: break-word !important;">你是一個(gè)精通WordPress主題開(kāi)發(fā)的Claude 3.7，我需要一個(gè)新聞主題，具體要求： ?
portant;word-break: break-word !important;">?1. **強(qiáng)制文件清單** ? ? ?
portant;word-break: break-word !important;">- index.php（必須包含
portant;word-break: break-word !important;">?- style.css（首行必須包含：Theme Name: Xiaoxin Theme） ? ? ?
portant;word-break: break-word !important;">- sidebar.php（側(cè)邊欄基礎(chǔ)結(jié)構(gòu)） ? ??
portant;word-break: break-word !important;">?- templates/index.php（不能是.html！） ?
portant;word-break: break-word !important;">?2. **安全規(guī)范** ? ? ?
portant;word-break: break-word !important;">- 所有PHP文件首行添加

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
php if (!defined('ABSPATH')) exit; ?> ??
3. **功能要求** ? ? ?
- 注冊(cè)一個(gè)名為"文章側(cè)邊欄"的小工具區(qū)域 ? ? ?
- 主內(nèi)容區(qū)寬度設(shè)置為70%

生成結(jié)果

正確文件結(jié)構(gòu)：

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
xiaoxin-theme-new/?
├── style.css?
├── index.php?
├── sidebar.php?
├── functions.php?
└── templates/ ? ??
? ? ? ? └── index.php ?# 關(guān)鍵！從.html改成.php

.css核心代碼：

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
CSS
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(92, 99, 112);font-style: italic;">

.php關(guān)鍵修改：

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
PHP
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(97, 174, 238);">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(92, 99, 112);font-style: italic;">// 安全校驗(yàn)（根據(jù)你的聊天記錄新增）portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(198, 120, 221);">ifportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">?(!defined(portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(152, 195, 121);">'ABSPATH'portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">))?portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(198, 120, 221);">exitportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">;?

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(92, 99, 112);font-style: italic;">// 正確調(diào)用模板（根據(jù)你的調(diào)試過(guò)程）portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(198, 120, 221);">includeportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">(get_template_directory().portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(152, 195, 121);">'/templates/index.php'portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">);
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(97, 174, 238);">?>

壓縮打包防坑指南（真實(shí)踩坑總結(jié)）

錯(cuò)誤操作：直接壓縮外層文件夾 → 安裝時(shí)報(bào)"無(wú)效的主題文件"

正確姿勢(shì)：

全選所有文件 → 右鍵"發(fā)送到壓縮文件"

必須檢查

快速驗(yàn)證方法：雙擊打開(kāi)壓縮包 → 如果看到的是文件夾而不是文件 → 解壓后重新壓縮內(nèi)層文件

六、上傳全流程

Step 1：進(jìn)入后臺(tái)儀表盤 → 外觀 → 主題 → 點(diǎn)擊"添加新主題"

Step 2：上傳主題拖拽壓縮包到上傳區(qū)域

Step 3：安裝驗(yàn)證

主題顯示" " ? 狀態(tài)顯示"已安裝",就成功啦

七、前臺(tái)效果調(diào)試

手機(jī)端顯示問(wèn)題：文字太小 → 在.css添加：

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
CSS
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(92, 99, 112);font-style: italic;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(198, 120, 221);">@mediaportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">?(portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(152, 195, 121);">max-widthportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">:?portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(209, 154, 102);">768pxportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">) {
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">? ?portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(224, 108, 117);">bodyportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">?{portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(152, 195, 121);">font-sizeportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">:?portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(209, 154, 102);">18pxportant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">;}
}

側(cè)邊欄不顯示：檢查.php是否包含：

portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">
PHP
portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(97, 174, 238);">portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">?dynamic_sidebar(portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(152, 195, 121);">'文章側(cè)邊欄'portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;">);?portant;-webkit-font-smoothing: antialiased;scrollbar-color: var(--common-scroll-color) var(--common-scroll-bg);scrollbar-width: thin;color: rgb(97, 174, 238);">?>

一次沒(méi)成功安裝，就繼續(xù)和AI聊，聊上10來(lái)輪，總歸會(huì)有結(jié)果的。下面分享我的 終極提示詞模板：

你是一個(gè)主題專家，我需要一個(gè)[主題類型]主題，要求：

1.**必須文件**

-.php（包含/）

- .css（首行含 Name: [名稱]）

- .php（注冊(cè)菜單+小工具）

2.**模板規(guī)范**

- 所有模板文件必須用.php擴(kuò)展名

- 模板路徑用ry()

3.**安全措施**

- 每個(gè)PHP文件首行添加校驗(yàn)

4.**響應(yīng)式要求

- 移動(dòng)端隱藏側(cè)邊欄

- 圖片自動(dòng)適配屏幕

血淚經(jīng)驗(yàn)總結(jié)：

不要相信AI第一次生成的代碼

安裝失敗先查.css和.php

所有模板文件必須用.php后綴

壓縮包結(jié)構(gòu)決定生死

經(jīng)過(guò)多輪調(diào)試后，我的站點(diǎn)總算上線啦！還不完美，先上上去，后面再做優(yōu)化，獲得成就感+1！

大家實(shí)操可能還會(huì)遇到其他問(wèn)題，可以問(wèn)我，或者可以嘗試“遇事不決問(wèn)AI”。

一般我都是AI打敗AI，這個(gè)AI搞不定這個(gè)問(wèn)題，換一個(gè)AI繼續(xù)問(wèn)，總能解決，我相信AI的語(yǔ)料庫(kù)很強(qiáng)大。