想自己搭建一个专业的网站，但是不会写代码，也不懂网页设计，该怎么办？
以前，我们想制作一个 WordPress 网站，通常需要自己安装主题、调整页面布局、设置字体、上传图片，再一个个配置网站插件。对于完全没有建站经验的新手来说，整个过程可能需要花费好几个小时，甚至几天时间。
不过，现在有了 AI，搭建网站已经变得简单了很多。
这篇教程，我会教大家使用 ChatGPT Codex + WPVibe + WordPress，通过 AI 自动生成网站设计、创建网页、配置插件，最后把网站正式发布上线。
整个过程基本不需要自己编写代码，只需要按照步骤操作，再通过简单的提示词告诉 AI 你的需求，就可以完成一个具有专业设计风格的网站。
即使你之前完全没有接触过 WordPress，也可以跟着这篇教程从零开始学习。
一、AI建站需要准备哪些工具？
这次使用的建站方案，主要涉及四款工具。
1. Hostinger：网站主机托管平台
Hostinger 主要负责托管我们的网站。WordPress 程序、网站图片、页面文件等内容，都需要存放在服务器上，其他用户才能通过互联网访问我们的网站。
对于刚开始接触 WordPress 的朋友，我比较推荐使用 Hostinger，因为它提供了中文管理后台、WordPress 一键安装，以及域名、SSL 证书等相关功能。
Hostinger 主机购买优惠：
专属优惠码：WINDY（适用套餐可享10%优惠，具体以结算页面为准）
提示词1：
Awwwards 风格网站设计生成器
请根据我的企业信息，为我生成 3 套独特的、完整的电脑端网站首页设计图。
设计风格要高端、有创意，并参考 Awwwards 上优秀网站的设计理念。
在开始生成之前，请先询问我喜欢以下哪一种设计风格：
- Editorial（杂志编辑风格）：使用超大字体、醒目的网格布局、竖排文字标签，以及具有实验性和创意感的页面布局。
- Cinematic Luxury（电影级奢华风格）：使用具有视觉冲击力的图片、高端字体、雕塑感的建筑元素，以及精致、有层次的光影效果。
- Creative Hybrid（创意混合风格）：将杂志式排版、电影级视觉效果和打破常规的页面布局结合起来。
- Surprise Me（给我惊喜）：三套设计分别采用上述三种不同风格，每种风格生成一套。
请等待我的回答，然后再开始生成设计。
企业信息（BUSINESS DETAILS）
- 企业名称：XXX
- 企业类型：XXX
- 提供的服务：XXX
- 目标客户：XXX
- 网站目标：吸引潜在客户
- 网站配色：
生成设计方案（GENERATE THE DESIGNS）
- 直接使用 AI 图片生成功能来创建网站设计图，不要从 Unsplash 或其他网站搜索图片。
- 分别生成 3 张独立的设计图，每次生成一张。不要将三套设计拼接到同一张图片中。
- 每张设计图都必须完整展示网站首页，从顶部导航栏一直到最底部的页脚。
- 设计图必须是正面展示的完整网页截图，不要放在电脑、手机或平板等设备模型里面。
- 三套设计在导航菜单、首页首屏、字体排版、页面布局和图片风格方面，都必须有明显区别。
- 避免使用普通的网站模板，也不要反复使用千篇一律的卡片式网格布局。
首页必须包含以下内容
- 顶部导航栏（Header）
- 首页首屏展示区（Hero），包含行动号召按钮（CTA）
- 作品展示区（Portfolio）
- 服务介绍区（Services）
- 简短的公司介绍（About）
- 三个步骤的服务流程介绍
- 页面底部的行动号召区域（Closing CTA）
- 网站页脚（Footer）
作品展示区域要使用看起来真实可信的网站设计预览图。
如果展示的是虚构项目，必须明确标注为“Concept project”（概念设计项目）。
不要编造真实客户、客户评价、获奖经历或者项目成果。
完成设计之后
请分别展示这三套首页设计图。
每套设计需要提供一个设计名称，并用一句话简单说明它的设计特点。
然后询问我：
- 我最喜欢哪一套设计？
- 我希望对设计进行哪些修改？
注意：
这一步只需要生成网站设计截图，不需要编写代码，也不要实际搭建网站。
提示词2
我喜欢第 X 套设计方案。
接下来，请根据这套设计截图，为我生成网站中使用的图片。
我希望生成的图片尽可能与截图中的图片保持一致，并且具有足够高的清晰度，能够直接用于我的 WordPress 网站。
同时，请对生成的图片进行适当压缩，确保图片文件不会太大，避免影响网站加载速度。
提示词3
请使用 WPVibe，根据我上传的网站设计截图，在以下 WordPress 网站上重新搭建首页：你的网站链接
这个首页必须使用 Gutenberg（WordPress 古腾堡区块编辑器）搭建，确保网页中的所有内容都可以单独编辑。
请将我上传的截图视为已经确认的最终设计方案。
你的任务是尽可能准确地还原截图中的设计，而不是重新设计网站。
一、首先分析设计截图
在开始搭建之前，请仔细研究截图中的以下内容：
- 各个页面模块的排列顺序、布局、栏目宽度和比例。
- 字体排版、字重、标题大小，以及文字的换行位置。
- 页面颜色、背景、边框和装饰性图形符号。
- 外边距、内边距、元素之间的间隔，以及各个模块的高度。
- 图片尺寸、裁切方式、摆放位置，以及作品预览图之间的重叠效果。
- 导航菜单、按钮、行动号召区域和网站页脚。
二、使用 Gutenberg 搭建网页
- 所有标题、段落、图片、按钮和页面模块，都必须使用 Gutenberg 原生区块搭建。
- 根据实际需要，使用 Group（组合）、Columns（分栏）、Image（图片）、Cover（封面）、Heading（标题）、Paragraph（段落）、Buttons（按钮）和 Navigation（导航）等区块。
- 如果 Gutenberg 自带的设置无法实现某些设计细节，可以使用少量只作用于当前页面的 CSS 样式进行调整。
- 必须确保页面文字和布局都可以继续编辑。不要将整个页面制作成一张图片，也不要把全部网页内容塞进一个 Custom HTML（自定义 HTML）区块。
- 请还原参考设计中的竖向导航、超大字体、星号装饰图形、箭头、交替变化的背景颜色，以及作品展示图片的重叠效果。
- 尽可能还原截图中显示的文字内容，并确保在相近的电脑屏幕宽度下，标题的换行位置与参考设计基本一致。
- 继续使用网站当前启用的 WordPress 主题。如果主题默认的页面标题、内容宽度或者间距影响设计效果，可以调整当前页面的相关设置。
三、使用我已经上传的图片（USE MY UPLOADED IMAGES）
请通过 WPVibe，在 WordPress 现有的媒体库（Media Library）中，找到与参考设计对应的以下图片：
- Objects 家具网站预览图
- Ember 餐厅网站预览图
具体要求：
- 将这些已经上传的图片放到作品展示区对应的位置。
- 调整图片的宽高比例、显示尺寸、边框和重叠效果，使其尽可能接近参考截图。
- 如果图片本身已经包含文字，请保留图片中的原有文字，不要再通过 Gutenberg 区块在图片上方重复添加相同内容。
- 使用 WordPress 媒体库中原有的附件 ID，并为图片设置合适的描述性替代文字（Alt Text）。
- 不要从网上搜索其他素材图片，不要使用 AI 重新生成替代图片，也不要重复上传已经存在的图片。
四、适配不同设备（RESPONSIVE LAYOUT）
首先按照参考截图完成电脑端的页面设计。
完成之后，再针对平板电脑和手机进行响应式适配。
需要注意：
- 根据屏幕大小调整超大标题的字体尺寸。
- 在小屏幕上合理地调整各个模块的排列方式。
- 修改移动端导航菜单的显示方式。
- 调整作品展示图片的重叠位置和尺寸。
- 确保所有内容都能完整显示，不会被裁切。
- 避免页面出现横向滚动条。
五、检查并保存页面（VERIFY AND SAVE）
完成页面搭建后，请打开实际网页的预览效果，并与我提供的设计截图进行对比。
重点检查并修正：
- 字体排版
- 模块间距
- 页面颜色
- 图片位置
- 各个模块的尺寸和比例
请在完成这些调整之后再结束操作。
重要要求：
- 只将新页面保存为草稿（Draft）。
- 不要发布这个页面。
- 不要替换网站当前已经上线的首页。
- 不要修改整个网站的全局设置。
最后，请提供：
- 这个草稿页面的预览链接。
- 如果某些字体无法完全匹配，请说明使用了哪些替代字体。
- 如果存在无法准确还原的设计细节，请简单列出来。
提示词4
请将目前已经搭建的网站首页，与我之前确认的设计截图进行对比，并修正两者之间存在的视觉差异。
一、检查以下内容
- 页面布局结构
- 视觉层次
- 字体排版
- 网站配色方案
- 用户界面组件（UI Components）
- 页面间距体系
- 各个内容模块的组织方式
- 整体设计风格
请确保对比时，两个页面使用相同的电脑端浏览器显示宽度。
二、重点检查以下细节
- 标题的宽度、字体大小和换行位置。
- 各个模块的高度和外边距。
- 不同栏目的宽度比例和对齐方式。
- 图片尺寸和裁切效果。
- 按钮大小及摆放位置。
- 竖排文字标签和横向排列的文字。
- 分隔线、装饰性图形和页脚文字样式。
请优先修正最明显的设计差异，然后再逐步调整较小的细节。
三、保持页面可编辑
必须继续保留 Gutenberg 原生区块的可编辑性。
不要将整个页面或者某些模块转换成静态截图。
不要额外添加动画效果。
不要重新设计已经确认的设计方案。
四、检查手机端
请单独检查移动端页面，确保：
- 文字大小合适，容易阅读。
- 各个内容模块的排列方式合理。
- 页面不会出现内容溢出或横向滚动的问题。
五、验证实际网站
如果当前访问权限允许，请直接检查 WordPress 网站中的实际页面。
请明确区分哪些检查是在真实网站中完成的，哪些只是通过本地预览完成的。
保持页面当前的发布状态不变，不要擅自发布或者取消发布。
完成调整后，请返回更新后的页面链接，并说明还有哪些细节与参考设计存在差异。
注意：
如果没有经过实际验证，不要声称已经实现了与参考截图完全一致的像素级还原效果。
提示词5
网站首页的设计已经确认。
接下来，请继续搭建网站的其他页面。
一、创建以下页面
请将下面这些页面全部创建为草稿：
- About：关于我们
- Services：服务介绍
- Work：产品展示
- Contact：联系我们
二、统一网站设计风格
请继续沿用首页已经确定的设计元素，包括：
- 字体排版
- 颜色
- 页面间距
- 按钮样式
- 分隔线
- 整体视觉风格
每个页面都应该根据自身展示的内容，采用合适的布局。
不要直接将整个首页复制到其他页面中。
三、各个页面的内容（PAGE CONTENT）
About（关于我们）
介绍设计公司，包括：
- 公司简介
- 我们的工作理念和方法
- 公司的价值观
Services（服务介绍）
介绍公司提供的以下服务：
- XXX
- XXX
- XXX
Work（作品展示）
展示公司的作品和项目案例。
如果其中某些项目只是概念设计，而不是真实完成的客户项目，必须清楚地进行标注。
Contact（联系我们）
页面需要包含：
- 项目咨询介绍
- 我提供的联系方式
- 预留用于放置联系表单的区域
四、页面搭建要求
- 使用 Gutenberg 原生区块和可重复使用的页面模块设计模式。
- 确保页面中的所有内容都可以单独编辑。
- 根据实际需要，重复使用 WordPress 媒体库中已经存在的图片。
- 如果还需要添加其他图片，请单独列出需要的图片清单。
不要编造：
- 团队成员
- 客户评价
- 获奖经历
- 企业地址
- 客户项目成果
五、保存和交付
所有新创建的页面都必须保持草稿状态。
不要修改目前已经上线的网站公共组件，例如全站共用的页眉和页脚。
完成后，请分别提供每个页面的：
- 预览链接
- 编辑链接
提示词6：
请通过 WPVibe，在我们正在搭建的 WordPress 网站上安装并配置 Fluent Forms 表单插件。
所有客户咨询信息都需要发送到以下邮箱：
[YOUR EMAIL ADDRESS]（填写我的电子邮箱地址）
一、安装插件并创建表单（INSTALL AND CREATE）
如果网站还没有安装 Fluent Forms，请安装并启用 Fluent Forms Free 免费版。
如果网站已经存在合适的表单，可以直接使用现有表单。
否则，请新建一个项目咨询表单（Project Enquiry Form）。
表单需要包含以下字段：
- Name（姓名）：必填。
- Email（电子邮箱）：必填。
- Business or Website（企业名称或网站）：选填。
- Service Required（需要的服务）：根据网站实际提供的服务设置选项。
- Project Details（项目详情）：必填。
提交按钮的文字设置为：
Send Enquiry（发送咨询）
同时：
- 启用插件自带的垃圾信息防护功能。
- 设置清晰易懂的表单提交成功提示。
二、让表单与网站设计保持一致（MATCH THE DESIGN）
请调整表单样式，使其与网站整体设计风格保持一致。
需要匹配的内容包括：
- 字体
- 颜色
- 背景
- 边框
- 元素间距
- 按钮样式
优先使用 Fluent Forms 插件自带的样式设置功能。
如果某些细节无法通过插件设置完成，可以添加仅针对这个表单的 CSS 样式。
请始终显示表单字段的标签文字。
确保表单在电脑和手机上都可以正常显示和使用。
三、将表单添加到联系页面（ADD THE FORM）
找到 Contact（联系我们）页面中之前预留的表单位置。
使用 Fluent Forms 的 Gutenberg 区块，将新建的表单添加进去。
如果 Gutenberg 编辑器中无法使用 Fluent Forms 区块，可以使用 Shortcode（短代码）区块代替。
添加表单时，请保留原来已经设计好的页面布局。
表单周围的其他内容也必须继续保持可编辑状态。
四、配置邮件通知（CONFIGURE EMAILS）
请设置表单邮件通知功能。
当访问者提交表单后，系统需要将咨询内容发送到我提供的电子邮箱。
邮件中必须包含用户填写的全部字段。
同时，将邮件的 Reply-To（回复地址）设置为提交表单的访问者邮箱。
这样我收到咨询邮件之后，就可以直接回复客户。
发件人名称请使用我的企业名称。
发件邮箱必须使用与网站邮件服务兼容、并且已经完成验证的邮箱地址。
不要自行编造发件邮箱地址。
请检查网站当前是否已经配置好邮件发送功能。
如果还需要连接 SMTP 或其他邮件发送服务，请明确告诉我需要进行哪些设置。
五、测试并保存（TEST AND SAVE）
请提交一条测试咨询信息，并清楚标注这是一条测试消息。
测试以下内容：
- 必填字段是否正常验证。
- 表单提交后是否显示成功提示。
- 手机端布局是否正常。
- 邮件发送时是否出现错误。
只有在实际确认邮件已经成功送达到收件箱之后，才能告诉我邮件接收功能已经验证成功。
如果没有验证成功，请如实说明。
重要要求：
Contact 页面继续保存为草稿，不要发布。
完成后，请提供：
- 页面预览链接。
- Contact 页面的编辑链接。
- Fluent Forms 表单的编辑链接。
- 表单测试结果。
- 仍然需要进一步配置的内容。
提示词7
请在网站正式上线之前，对整个网站进行一次完整的检查和测试。
一、需要检查的内容
- 电脑、平板和手机上的页面布局是否正常。
- 字体排版、间距、对齐方式以及图片裁切效果是否正确。
- 导航菜单、按钮和网站内部链接是否可以正常使用。
- Gutenberg 区块是否有效，页面内容是否可以正常编辑。
- 是否支持通过键盘操作网站，以及键盘焦点是否具有清晰可见的提示效果。
- 图片是否设置了 Alt Text（替代文字），文字和背景颜色之间是否具有足够的对比度。
- 联系表单的字段验证是否正常，邮件发送功能的测试状态如何。
- 页面标题、页面描述以及标题层级结构是否合理。
- 图片尺寸、文件大小是否合适，页面是否存在明显的加载问题。
- 是否存在尚未替换的占位内容、没有完成的模块或者不准确的宣传信息。
二、修复发现的问题
请在已经确认的设计方案基础上修复问题。
不要重新设计整个网站。
不要额外安装其他 WordPress 插件。
三、验证实际网站
如果当前访问权限允许，请直接检查 WordPress 网站中的实际页面。
对于无法实际测试的内容，请明确说明，不要假装已经完成验证。
四、完成后向我提供以下信息
- What passed（通过检查的项目）：哪些功能和页面已经通过测试。
- What you fixed（已经修复的问题）：检查过程中发现并修复了哪些问题。
- What still needs my input（仍然需要我提供的信息）：哪些地方需要我进一步确认或者提供资料。
- Final preview links（最终预览链接）：提供各个页面最终版本的预览链接。
注意：
这一步只是检查和测试。
不要发布任何页面。
提示词8
我已经确认整个网站的设计和内容，可以正式上线了。
一、发布网站
请只发布我已经确认的页面。
将之前确认的网站首页设置为 WordPress 网站的正式首页（Front Page）。
二、配置网站导航
连接所有最终确认的导航菜单链接。
确保这些页面使用统一的页眉和页脚，并且与最终确认的设计保持一致。
三、保留现有网站内容
不要修改、删除或者覆盖其他无关的页面和内容。
继续使用网站当前已经启用的 WordPress 主题，不要更换主题。
四、上线后进行验证
正式发布之后，请检查以下内容是否可以正常访问和显示：
- 网站公开首页
- 已经确认并发布的其他内部页面
- 导航菜单
- 各种按钮
- 网站图片
- 联系表单
请特别确认：已经将这次制作的网站首页正确设置为 WordPress 的正式首页。
五、最终结果
完成所有操作之后，请向我说明：
- 网站是否已经正式发布。
- 是否还有尚未解决的问题。
- 提供正式上线的网站链接。
2. WordPress：免费网站搭建程序
WordPress 是一款开源内容管理系统，英文叫 Content Management System，简称 CMS。
简单理解，它就是用来搭建和管理网站的程序。
无论是企业官网、个人博客、作品展示网站，还是跨境电商独立站，都可以使用 WordPress 来制作。
3. WPVibe：让AI直接操作WordPress的插件
WPVibe 是本期教程非常重要的一款工具。
它由 SeedProd 团队开发，主要作用是把 WordPress 网站与 ChatGPT、Claude 等 AI 工具连接起来。
安装并完成授权以后，我们可以通过自然语言，让 AI 帮助我们创建页面、修改内容、安装插件、管理网站，甚至处理网站主题相关的工作。
WPVibe 官方网站：
WordPress 插件页面：
WPVibe 提供免费使用方案，同时也有付费套餐。具体功能和使用额度，以官方说明为准。
4. ChatGPT Codex：负责AI编程与网站搭建
Codex 是 OpenAI 推出的 AI 编程工具，可以帮助我们编写代码、修改项目文件、处理开发任务。
这次我们主要利用 Codex 配合 WPVibe，来完成 WordPress 网站的自动化搭建。
ChatGPT 官方地址：
ChatGPT 电脑版下载：
二、购买Hostinger主机，准备WordPress建站环境
在正式开始 AI 建站之前，我们需要先准备一台服务器，也就是网站主机。
如果没有服务器，WordPress 程序和网站文件就没有地方存放，我们制作出来的网站也无法正常对外提供访问。
1. 进入Hostinger官网
首先打开 Hostinger：
进入网站以后，如果页面显示的是英文，可以通过网站的语言选择功能，切换到中文界面。
接下来找到网站托管相关产品，进入主机套餐选择页面。
2. 如何选择Hostinger主机套餐？
Hostinger 提供多种网站托管套餐，包括普通虚拟主机和云主机。
对于第一次搭建网站的新手，我建议优先考虑中间档位的托管套餐。
一般来说，主要关注以下几个方面：
- 网站数量： 套餐允许创建多少个网站。
- 存储空间： 用来保存网页、图片、程序和数据库。
- NVMe存储： 一种高速固态存储技术，有助于提升服务器的数据读取效率。
- 自动备份： 网站出现问题时，可以通过备份进行恢复。
- 免费域名： 部分符合条件的长期套餐提供首年免费域名。
- SSL证书： 让网站支持 HTTPS 安全连接。
如果你只是搭建普通的企业官网、个人博客或者展示型网站，通常不需要一开始就购买价格较高的云服务器。
如果网站将来需要运行较复杂的电商系统，或者访问量比较大，再考虑升级也不迟。
需要注意，Hostinger 的套餐名称、网站数量、存储空间和价格可能会调整，购买时请以当前官方页面显示的信息为准。
3. 选择购买周期并使用优惠码
选择套餐以后，进入购物车页面。
Hostinger 通常会提供不同的购买周期，例如12个月、24个月或者48个月。
一般来说，购买时间越长，折算下来的首期月均价格可能越便宜。
但这里需要注意，页面展示的月均价格通常是将整个购买周期的费用平均计算，并不代表每个月单独付款。
另外，续费价格也可能与首次购买的优惠价格不同。
如果你已经确定长期运营网站，可以根据自己的预算选择合适的购买周期。
接下来，在优惠码输入框中填写：
WINDY
点击应用，查看结算页面是否成功获得优惠。
► 点击购买 Hostinger 主机并使用 WINDY 优惠码
4. 注册账号并完成付款
接下来根据页面提示注册 Hostinger 账号。
可以使用邮箱注册，也可以选择页面支持的第三方登录方式。
然后填写账单信息，选择可用的付款方式，完成主机购买。
Hostinger 在部分地区支持支付宝等本地支付方式，具体以结算页面实际提供的选项为准。
Hostinger 对符合条件的主机产品提供30天退款保障，但部分产品、域名费用或其他服务可能存在例外，建议购买前查看退款政策。
完成购买以后，就可以进入 Hostinger 的主机管理后台。
三、安装WordPress，创建第一个网站
购买好 Hostinger 主机以后，接下来正式安装 WordPress。
1. 创建WordPress网站
进入 Hostinger 的管理后台，也就是 hPanel。
在左侧菜单找到“网站”，然后点击“创建网站”或者“添加网站”。
接下来系统会让我们选择建站方式。
这里建议直接选择：
WordPress
需要注意的是，Hostinger 自己也提供 AI Website Builder，也就是 AI 网站构建器。
但是这次我们要使用的是 WordPress + Codex + WPVibe，所以不要选择 Hostinger AI Website Builder。
我们要先安装标准 WordPress 程序，再通过 WPVibe 连接 AI。
2. 设置网站域名
接下来，系统会要求选择网站域名。
如果你已经拥有自己的域名，可以直接输入域名。
如果还没有购买或者暂时没有想好，也不用担心。
Hostinger 通常支持先使用临时域名搭建网站，后面再连接正式域名。
例如，先通过临时网址完成网站设计、页面测试和功能配置，等所有内容都准备好以后，再更换成自己的品牌域名。
这样可以避免网站还没有做好，就被正式访客访问。
3. 设置WordPress管理员账号
接下来填写 WordPress 管理员信息。
包括管理员邮箱、登录账号以及密码等。
这些信息一定要妥善保存，因为以后登录 WordPress 网站后台时会用到。
WordPress 的后台登录地址通常是：
https://你的域名/wp-admin
打开这个地址，就可以进入 WordPress 登录页面。
4. 选择从零开始建站
在 WordPress 的安装过程中，如果系统提供“AI建站”和“从零开始”等选项，我们选择从零开始。
原因很简单：这次我们并不是要使用 Hostinger 自带的 AI 生成网站，而是准备让 Codex 来完成后面的设计和搭建工作。
完成设置以后，等待 WordPress 安装结束。
然后点击“WordPress 管理后台”或者“打开 wp-admin”，就可以进入网站后台。
四、安装WordPress主题和必要插件
WordPress 安装完成以后，先不要急着让 AI 开始制作网站。
我们需要简单设置一下网站的基础环境。
1. 整理WordPress预装插件
进入 WordPress 后台，点击：
插件 → 已安装插件
你可能会看到一些 Hostinger 自动安装的插件。
这些插件并不一定没有用，但如果暂时不需要，可以根据实际情况停用或者删除。
在删除之前，建议先确认插件的作用。
尤其是涉及安全、缓存、邮件发送和备份功能的插件，不建议在不了解用途的情况下全部删除。
2. 安装LiteSpeed Cache缓存插件
接下来可以安装一个网站性能优化插件，名字叫：
LiteSpeed Cache
官方插件地址：
在 WordPress 后台点击“插件”，然后点击“安装插件”。
在搜索框输入：
LiteSpeed Cache
找到插件后，点击“立即安装”。
LiteSpeed Cache 可以提供缓存管理、图片优化、CSS 和 JavaScript 优化等功能。
不过，完整的服务器级页面缓存功能需要相应的服务器环境支持。
这次我们可以先安装插件，等网站制作完成以后，再根据实际主机环境启用和配置。
3. 启用Twenty Twenty-Five主题
接下来点击：
外观 → 主题
这里建议使用 WordPress 官方的 Twenty Twenty-Five 主题，也就是2025默认主题。
官方主题地址：
这是一个支持 WordPress 区块编辑功能的主题。
它可以配合 WordPress 自带的 Gutenberg 区块编辑器使用，方便后面通过 AI 创建和修改页面内容。
找到主题以后，点击“启用”即可。
注意，Twenty Twenty-Five 是一个 WordPress 主题，不是插件。
五、安装WPVibe插件，让AI连接WordPress
网站的基础环境准备完成以后，接下来安装本期教程最重要的工具——WPVibe。
WPVibe 的核心作用，就是让 AI 可以在获得授权以后，直接读取和管理 WordPress 网站。
我们不需要每次都自己进入 WordPress 后台手动修改页面，而是可以通过对话让 AI 帮忙完成操作。
1. 安装WPVibe插件
进入 WordPress 后台，点击：
插件 → 安装插件
在搜索框输入：
WPVibe
找到由 SeedProd 开发的 WPVibe 插件以后，点击“立即安装”，然后点击“启用”。
WPVibe 官方网站：
WordPress 插件下载页面：
2. WPVibe可以完成哪些工作？
安装并正确连接以后，WPVibe 可以配合 AI 执行多种 WordPress 管理任务。
例如，创建新的网页、修改网站文字、上传和管理图片、安装插件、调整网站菜单、检查 SEO 设置，以及处理主题和页面样式等。
它使用的技术叫作 MCP（Model Context Protocol，模型上下文协议）。
简单理解，MCP 就像 AI 和外部软件之间的一座桥梁。
以前我们让 ChatGPT 帮忙修改网站，可能需要先让它生成代码，再手动把代码复制到 WordPress。
而通过 WPVibe，AI 在获得相应权限以后，就可以通过工具直接执行部分 WordPress 操作。
这也是它和普通 AI 聊天工具的主要区别。
六、下载安装ChatGPT Codex
WordPress 和 WPVibe 都准备好以后，接下来我们需要配置 AI 工具。
这次使用的是 OpenAI 的 Codex。
1. 下载ChatGPT桌面版
打开官方地址：
根据自己的电脑系统，选择 Windows 或 macOS 版本。
安装完成以后，打开 ChatGPT 桌面应用，并登录自己的账号。
在支持的新版本桌面应用中，可以切换到 Codex 工作区。
Codex 主要面向编程、项目开发和自动化任务，比较适合这次的 AI 建站操作。
2. 是否需要ChatGPT Plus会员？
如果只是简单体验，可以先查看免费账号当前提供的 Codex 使用额度。
但如果需要连续生成网站设计、图片、页面代码，以及多次修改网站，使用额度可能消耗得比较快。
对于经常使用 ChatGPT 和 Codex 的用户，可以根据自己的实际需求考虑 ChatGPT Plus。
ChatGPT 官方网站：
对于中国大陆用户，如果无法使用官方支持的支付方式，可以自行了解第三方订阅服务，但需要特别注意账号安全和平台风险。
ChatGPT会员相关服务平台：银河录像局
银河录像局是第三方服务平台，并非 OpenAI 官方渠道。购买前建议确认具体的交付方式、退款政策、账号安全及服务条款，不要随意向第三方提供个人账号密码或验证码。
3. 创建Codex项目
打开 Codex 工作区以后，可以新建一个项目。
例如，我们可以把项目命名为：
AI建站
然后在电脑上选择或者创建一个文件夹，用来保存项目相关文件。
这样以后生成网站设计、修改代码或者处理图片时，相关文件就可以统一管理。
七、在ChatGPT中连接WPVibe
现在 WordPress 网站已经安装好了 WPVibe 插件，接下来需要在 AI 工具中完成连接。
1. 添加WPVibe连接
在 ChatGPT 支持的插件或工具目录中，搜索：
WPVibe
找到对应工具以后，按照提示安装或者连接。
不同版本的 ChatGPT 和 Codex，菜单名称和安装入口可能有所不同。
如果找不到相同的界面，可以参考 WPVibe 官方连接说明：
WPVibe 官方文档：
2. 登录WPVibe账号
连接过程中，系统可能要求登录 WPVibe。
一般可以通过邮箱接收验证码完成登录。
输入邮箱以后，查看收到的验证码，并完成验证。
3. 检查WordPress网站连接状态
完成 WPVibe 账号验证以后，返回 WordPress 网站后台。
找到左侧的 WPVibe 菜单。
进入以后，先检查网站连接状态。
确认插件与网站之间的连接正常，再继续后面的操作。
4. 授权Codex访问WordPress
WPVibe 可能提供不同的连接方式。
本期演示采用的是通过提示词完成连接的方式。
按照 WPVibe 页面提供的步骤，复制连接提示词，然后粘贴到 Codex 中执行。
AI 会根据配置流程引导你连接网站。
在授权页面中，使用 WordPress 管理员账号登录，并确认应用连接权限。
完成授权以后，Codex 就可以通过 WPVibe 与网站进行交互。
需要注意，授权 AI 管理 WordPress 后，它可能具备修改网站内容、配置插件等权限。建议优先在测试网站操作，重要修改前做好备份，并仔细检查需要确认的操作。
5. 验证连接是否成功
最后，可以使用下面这段简单的提示词测试：
参考提示词：
请检查当前 WordPress 网站是否已经通过 WPVibe 成功连接。读取网站的基本信息，包括网站名称、首页地址、当前主题和已安装插件。暂时不要修改任何内容，只需要告诉我连接是否正常，并使用简体中文回复。
如果 Codex 能够正常读取网站信息，就说明基本连接已经完成。
接下来，我们就可以正式开始使用 AI 搭建网站了。
八、先让AI生成3套网站设计方案
这次 AI 建站，我比较推荐大家采用一种方法：
先生成网站设计图，确定满意的风格，再让AI真正开始搭建网站。
为什么要这样做？
因为如果我们直接告诉 AI：“帮我做一个好看的网站。”
这个要求其实非常模糊。
AI 并不知道你的公司叫什么、主要销售什么产品、客户是谁，也不知道你喜欢什么颜色和设计风格。
最后生成出来的网站，很可能和你想象中的完全不一样。
如果等到网站全部做好以后才开始修改，就容易浪费大量时间。
所以建议先让 AI 提供几套不同的网站视觉方案。
1. 参考专业网站设计
在正式生成设计图之前，我们可以先了解一些优秀网站的设计风格。
例如：
Awwwards：优秀网站设计作品参考平台
这个平台收录了大量专业网站设计作品。
我们可以参考里面的布局、字体、颜色和视觉效果，再告诉 AI 自己喜欢什么样的风格。
2. 使用Color Hunt选择网站配色
如果不知道网站应该使用什么颜色，我推荐大家使用 Color Hunt。
Color Hunt 提供了大量现成的配色方案。
比如你准备搭建一个女性护肤品牌网站，就可以尝试粉色、米白色、浅金色等配色组合。
如果是科技公司网站，则可以考虑深蓝色、黑色、紫色等配色。
找到满意的配色以后，可以复制对应的配色链接。
然后在 Codex 的提示词中提供这个链接，让 AI 参考相同的颜色来设计网站。
3. 让AI生成网站首页设计图
接下来，我们可以使用下面的提示词。
AI建站提示词一：生成3套网站首页设计方案
请你扮演一名专业的网站设计师，参考 Awwwards 上优秀网站的视觉设计水平，为我设计3套不同风格的 WordPress 网站首页方案。
我的企业信息如下：
企业名称：【填写品牌名称】
企业类型：【填写企业类型】
主营产品或服务：【填写产品或服务】
目标客户：【填写目标客户】
网站目标：【填写网站的主要用途】
网站语言：【中文或英文】
网站配色：【填写颜色或者Color Hunt配色链接】
请先生成3套不同风格的首页设计预览图，让我能够直接看到网站最终可能呈现的效果。
设计需要符合品牌定位，同时考虑电脑和手机访问体验。
现阶段不要直接修改 WordPress 网站，也不要发布页面。等我确认喜欢的设计方案以后，再继续下一步。
4. 选择喜欢的设计方案
AI 生成设计图以后，我们可以分别查看每套方案。
比如第一套偏简约，第二套偏高端，第三套偏创意设计。
你可以选择自己喜欢的方案，也可以继续要求 AI 修改。
如果某一套方案整体不错，但是字体太小、颜色太深或者图片太多，都可以直接告诉 AI。
等设计效果基本确定以后，再进入下一步。
九、让AI生成网站所需的图片素材
确定网站设计方案以后，接下来我们要准备网站图片。
为什么不直接让 AI 一次性完成所有工作？
因为网站图片对最终效果影响很大。
如果直接让 AI 根据设计图开始制作页面，有时候生成出来的图片可能存在分辨率不足、尺寸不合适等问题。
所以这次我们采用先准备图片、再搭建网页的方法。
AI建站提示词二：生成高清网站图片
我已经确定使用第【填写数字】套网站设计方案。
请根据这套设计图，为网站生成需要使用的图片素材。
要求图片风格、颜色、构图尽量与之前确认的设计方案保持一致。
图片需要具有较高的清晰度，适合直接用于 WordPress 网站。
同时，请合理压缩和优化图片文件大小，在保证视觉质量的前提下，尽量减少网站加载时间。
请将生成的图片分别保存，并说明每张图片适合放在网站的哪个位置。
将图片上传到WordPress
图片生成完成以后，我们需要把这些文件上传到网站。
进入 WordPress 后台，点击：
媒体 → 添加媒体文件
然后选择刚才生成的图片，上传到 WordPress 媒体库。
如果图片比较多，也可以一次性批量上传。
这样后面 AI 在搭建网页时，就可以使用这些已经上传到网站的图片素材。
十、使用Codex自动搭建WordPress首页
接下来就是整个教程最重要的一步：
让 AI 根据我们确认的设计图，真正开始搭建 WordPress 网站。
前面生成的图片，只是设计效果的参考。
现在我们需要让 Codex 将这些设计转换成真正的网站页面。
1. 准备网站首页地址
首先打开 WordPress 网站首页。
复制网站地址。
例如：
https://你的域名.com
如果你使用的是临时域名，就复制临时域名地址。
2. 使用AI搭建首页
AI建站提示词三：根据设计图生成WordPress首页
请通过已经连接的 WPVibe，在我的 WordPress 网站中创建首页。
网站地址：【填写你的WordPress网站地址】
请参考我已经确认的第【填写数字】套网站设计方案，以及上传的首页设计截图。
尽量还原设计图中的页面布局、字体大小、颜色搭配、图片位置、按钮样式和整体视觉效果。
请优先使用 WordPress 原生 Gutenberg 区块编辑器能够管理的页面结构，方便我后续手动修改内容。
请使用已经上传到 WordPress 媒体库的相关图片。
页面需要适配电脑、平板和手机。
请先保存为草稿，完成后提供预览方式，不要直接发布网站。
3. 检查AI生成的网站效果
AI 完成页面搭建以后，我们可以打开预览页面。
重点检查网站的整体布局、图片位置、字体大小、颜色搭配，以及按钮和导航的设计。
如果效果和原来的设计图比较接近，就可以继续制作其他页面。
如果有明显差距，可以直接让 AI 修改。
4. 让AI修复设计偏差
AI建站提示词四：修复网站首页的视觉问题
请将目前已经搭建好的 WordPress 首页，与我之前确认的网站设计截图进行对比。
检查页面布局、颜色、字体、图片尺寸、内容间距和模块位置是否存在明显差异。
请在不破坏现有页面内容的情况下，尽量修复这些视觉问题，让最终网页更加接近原始设计方案。
完成以后，请告诉我修改了哪些内容，并提供页面预览。
这也是 AI 建站比较方便的地方。
我们不需要自己去研究所有 CSS 样式，只需要告诉 AI 哪里不满意，让它帮助我们修改即可。
当然，AI 修改的结果还是需要人工检查。
十一、让AI继续创建网站其他页面
一个完整的网站，通常不只有首页。
例如，企业官网一般还会包含关于我们、服务介绍、作品展示和联系我们等页面。
因为我们前面已经确定了网站首页的视觉风格，接下来可以让 AI 按照相同的设计，继续创建其他页面。
AI建站提示词五：自动创建网站其他页面
目前 WordPress 网站的首页已经设计完成。
请参考现有首页的品牌风格、颜色、字体和页面布局，继续为网站创建以下页面：
关于我们：介绍企业背景、品牌理念和核心优势。
服务介绍：介绍企业提供的产品或服务。
作品展示：展示企业案例、作品或者相关项目。
联系我们：展示联系方式，并为联系表单预留位置。
请确保所有页面保持统一的视觉风格，并且适配电脑和手机。
同时，请正确设置网站顶部导航菜单，让首页、关于我们、服务介绍、作品展示和联系我们等菜单分别链接到对应页面。
所有新页面先保存为草稿，完成后供我检查。
执行完成以后，我们就可以逐个打开网页查看。
如果发现某个页面内容不完整，或者设计不满意，继续通过提示词修改即可。
十二、安装Fluent Forms，创建网站联系表单
很多企业网站都会有一个“联系我们”页面。
这个页面除了展示邮箱、电话等联系方式以外，最好还可以让访客直接提交咨询信息。
比如填写姓名、邮箱、咨询内容，然后点击提交。
这样网站管理员就可以收到访客发送的消息。
这次我们使用的 WordPress 表单插件叫作 Fluent Forms。
官方插件地址：
1. 安装Fluent Forms
进入 WordPress 后台，点击：
插件 → 安装插件
然后搜索：
Fluent Forms
找到对应插件后，点击“立即安装”，再点击“启用”。
2. 使用AI配置联系表单
如果手动设置表单，需要调整字段、邮件通知、页面嵌入方式，以及表单样式等内容。
对于完全没有经验的新手来说，可能需要花费不少时间。
我们也可以通过 WPVibe，让 AI 帮忙完成这些配置。
AI建站提示词六：配置联系表单
请通过 WPVibe 检查并配置 WordPress 网站中的 Fluent Forms 插件。
为“联系我们”页面创建一个联系表单。
表单至少包含姓名、邮箱和咨询内容三个字段，并提供提交按钮。
访客提交表单以后，请将通知邮件发送到以下邮箱：
【填写你的邮箱地址】
请让联系表单的颜色、字体、输入框、按钮和整体布局，与现有网站设计风格保持一致。
请同时检查表单是否能够正常提交，并确认邮件通知功能的配置状态。
如果邮件发送还需要 SMTP 设置，请告诉我具体需要完成哪些配置，不要假定邮件已经发送成功。
3. 检查联系表单
配置完成以后，打开“联系我们”页面。
检查输入框和按钮是否显示正常。
然后可以自己填写一条测试信息，提交以后看看是否成功。
如果网站没有收到邮件，可以进一步检查 SMTP 邮件发送设置。
SMTP 是一种邮件发送协议，WordPress 网站有时需要专门配置邮件发送服务，才能提高通知邮件的送达率。
十三、网站正式发布前，让AI检查所有页面
网站的所有页面制作完成以后，不建议马上发布上线。
最好先检查一遍，避免出现页面布局错乱、图片打不开、导航链接错误等问题。
这次我们可以使用 AI 来帮助检查。
AI建站提示词七：网站发布前检查
请通过 WPVibe 对当前 WordPress 网站进行一次完整的发布前检查。
重点检查以下内容：
网站首页及其他页面的布局是否正常。
网站导航菜单是否正确链接到对应页面。
图片是否正常显示。
电脑、平板和手机上的页面布局是否存在明显问题。
字体、颜色、边距和按钮样式是否统一。
联系表单是否配置完成。
页面标题和基本 SEO 设置是否合理。
是否存在无效链接、空白模块或者明显的显示错误。
请先列出发现的问题，对于低风险问题可以提供修改建议。涉及删除内容、修改重要配置或者可能影响网站正常运行的操作，请先征求我的确认。
检查完成以后，再决定是否正式发布。
对于准备长期运营的商业网站，这一步非常重要。
特别是网站以后可能会用来获取客户、展示产品或者开展跨境电商业务，网站的稳定性和使用体验都需要认真检查。
十四、正式发布WordPress网站
如果前面的检查没有问题，就可以正式发布网站了。
AI建站提示词八：发布WordPress网站
目前网站首页和其他页面已经完成。
请通过 WPVibe 检查所有待发布页面，并将确认无误的页面正式发布。
同时，请检查并设置网站首页、导航菜单及相关页面链接，确保访客访问网站时能够正常浏览。
完成以后，请告诉我网站的正式首页地址，并检查各个主要页面是否可以正常访问。
发布完成以后，我们可以通过浏览器打开网站。
检查首页、关于我们、服务介绍、作品展示和联系我们等页面。
如果所有页面都可以正常访问，说明网站已经基本搭建完成。
不过，网站发布并不代表所有工作已经结束。
后续还可以继续完善网站内容、优化 SEO、增加博客文章，或者添加其他商业功能。
十五、让AI自动设计网站Logo
如果你还没有准备网站 Logo，也可以尝试让 AI 帮忙设计。
比如直接告诉 Codex：
请根据当前网站的品牌名称、品牌定位和网站配色，设计一个简洁、现代、适合企业官网使用的 Logo。
Logo 需要与现有网站的整体视觉风格保持一致，并且适合用于网站导航栏。
生成完成后，请先让我确认设计效果，再将最终选定的 Logo 应用到 WordPress 网站。
确认 Logo 满意以后，就可以让 AI 将它添加到网站中。
如果你已经有自己的品牌 Logo，则直接上传原来的 Logo 即可，不需要重新生成。
十六、如何手动修改AI生成的WordPress网站？
虽然我们已经可以通过 Codex 自动修改网站，但有时候只是想更改一句文字或者替换一张图片，直接在 WordPress 后台操作可能更加方便。
进入 WordPress 后台，点击：
页面 → 所有页面
找到想修改的页面，然后点击“编辑”。
进入编辑界面以后，就可以使用 WordPress 自带的 Gutenberg 区块编辑器进行修改。
例如，点击网页上的文字，可以直接修改内容。
点击图片区块，可以替换图片。
点击按钮区块，可以修改按钮文字和跳转链接。
如果需要修改字体大小、颜色或者内容间距，也可以通过右侧的区块设置进行调整。
修改完成以后，记得点击“保存”或者“更新”。
如果遇到比较复杂的布局问题，也可以继续让 Codex 帮忙处理。
也就是说，我们既可以使用AI修改网站，也可以直接通过WordPress后台手动编辑。
这两种方式可以结合起来使用，不需要完全依赖某一种方法。
十七、如何将Hostinger临时域名连接到正式域名？
在前面的教程中，如果你使用的是 Hostinger 提供的临时域名，那么网站做好以后，还需要连接自己的正式域名。
比如你准备经营一个护肤品牌，就可以使用自己的品牌名称注册一个 .com 域名。
这样既方便客户记忆，也更适合长期运营。
具体操作可以进入 Hostinger 的 hPanel 后台。
点击左侧“网站”，找到刚才创建的 WordPress 网站。
然后通过网站管理菜单，寻找“连接域名”或者“更改域名”等相关功能。
输入自己准备使用的正式域名，按照页面提示完成设置。
如果域名本来就是在 Hostinger 注册的，通常操作会比较简单。
如果域名是在其他平台注册的，可能还需要修改 DNS 解析记录或者域名服务器设置。
完成以后，记得检查 HTTPS 证书是否正常，以及网站是否能够通过新域名访问。
正式更换域名时，还要确认 WordPress 站点地址、内部链接和必要的重定向是否正确，避免出现网站打不开或者跳转错误的问题。
十八、利用WPVibe Cookbook继续优化网站
除了 AI 自动建站以外，WPVibe 还有一个非常实用的功能，叫作 Cookbook。
Cookbook 可以理解成 WPVibe 官方提供的提示词操作手册。
里面有很多已经整理好的 WordPress 操作流程和 AI 提示词，可以帮助我们完成网站管理任务。
WPVibe Cookbook 官方地址：
例如，你想优化网站 SEO，就可以找到 SEO 相关的操作方案。
你也可以让 AI 检查网站哪些页面缺少 SEO 标题或者 Meta Description（网页描述），再根据页面内容补充合适的信息。
如果想提高网站加载速度，还可以查看性能优化相关的提示词。
如果网站以后准备销售产品，也可以通过相关方案了解 WooCommerce 电商功能的配置方法。
需要注意，AI 可以帮助我们发现 SEO 问题、优化网站内容和技术设置，但这些操作并不保证网站一定会获得更高的 Google 搜索排名。
真正做好 Google SEO，还需要长期积累高质量内容、优化用户体验，并持续维护网站。
网站优化还可以使用哪些工具？
如果你准备长期运营 WordPress 网站，特别是希望通过 Google 搜索获取流量，可以考虑使用 Semrush。
Semrush：SEO关键词研究与竞争对手分析工具
Semrush 可以辅助分析网站关键词、搜索表现、竞争对手和 SEO 问题，适合希望通过自然搜索流量获取客户的网站经营者。
十九、WordPress和AI建站有什么区别？
很多第一次接触 AI 建站的朋友可能会有一个疑问：
既然 AI 可以自动生成网站，那为什么还需要 WordPress？
其实这两者并不冲突。
WordPress 是网站运行和内容管理的基础平台。
AI 则是帮助我们提高设计、开发和管理效率的工具。
通过 WordPress，我们可以管理文章、图片、页面、插件、用户和其他网站功能。
而通过 Codex + WPVibe，我们可以减少一部分重复性的手动操作。
比如以前需要自己调整的页面布局，现在可以先通过 AI 生成。
以前需要自己安装和配置的部分插件，现在可以让 AI 协助处理。
以前修改网页代码比较麻烦，现在可以直接告诉 AI 希望修改哪些内容。
但 AI 生成的网站仍然需要进行测试、维护和安全检查。
所以我更推荐大家把 AI 当成建站助手，而不是完全不用检查的自动化工具。
二十、AI搭建WordPress网站，还需要注意什么？
虽然现在 AI 建站已经方便了很多，但想把网站真正运营起来，还有几个方面需要注意。
1. 网站内容不要完全依赖AI
AI 可以帮助我们生成网页内容，但企业介绍、产品信息、服务价格等重要信息，最好根据真实情况进行修改。
特别是商业网站，不能为了让内容看起来丰富，就随意编造客户评价、合作案例或者产品效果。
2. 网站需要适配手机
现在很多访客都是通过手机浏览网站。
所以不能只关注电脑端的效果。
网站做好以后，最好分别使用电脑和手机打开，检查页面是否存在文字太小、图片错位、按钮不好点击等问题。
3. 定期备份WordPress网站
网站正式运营以后，建议定期备份网站文件和数据库。
特别是在安装新插件、升级 WordPress 或者让 AI 批量修改页面之前，最好先创建备份。
这样即使操作过程中出现问题，也可以尝试恢复到之前的版本。
4. 做好Google SEO优化
如果网站准备通过 Google 获取自然搜索流量，还需要做好以下工作：
- 为重要页面设置准确的 SEO 标题和描述。
- 使用清晰的 H1、H2、H3 标题结构。
- 给图片添加有意义的替代文字。
- 合理设置页面之间的内部链接。
- 持续发布真实、有帮助的原创内容。
- 优化网站加载速度和移动端体验。
如果需要系统学习，可以使用：
二十一、更多实用的建站工具推荐
除了这次介绍的 WordPress、WPVibe 和 Codex，如果你准备长期运营网站，下面这些工具也值得了解。
1. Fiverr：海外自由职业者外包平台
如果你不想自己制作网站 Logo、品牌素材或者英文内容，也可以通过 Fiverr 寻找相关服务人员。
例如，外包英文文案、Logo 设计、网页设计和视频制作等工作。
2. Color Hunt：免费网站配色工具
不知道网站应该使用什么颜色，可以使用 Color Hunt 查看现成的配色组合。
3. Elementor Pro：WordPress可视化页面构建器
如果你不想完全依赖 AI，也希望自己通过拖拽的方式设计网页，可以了解 Elementor Pro。
Elementor 是 WordPress 生态中常用的可视化页面构建工具之一。
它提供丰富的页面布局和设计功能，适合需要较高自由度的网站。
不过，本期教程主要使用的是 WordPress 原生区块编辑器，并不要求额外购买 Elementor Pro。
4. Shopify：跨境电商独立站搭建平台
如果你准备做跨境电商，主要目的是在线销售商品，也可以考虑 Shopify。
Shopify 是专门面向电子商务的建站平台，提供商品管理、订单处理、支付和店铺运营等功能。
与 WordPress 相比，Shopify 更注重电商业务的整体管理。
➜ https://shopify.pxf.io/BnBxny
5. Semrush：Google SEO网站分析工具
如果网站制作完成以后，希望通过 Google 搜索吸引潜在客户，可以使用 Semrush 进行关键词研究和竞争对手分析。
二十二、总结：2026年如何用AI快速搭建WordPress网站？
通过这次教程，我们完成了一套从零开始的 AI 建站流程。
首先通过 Hostinger 准备网站主机，安装 WordPress。
然后安装 WPVibe 插件，将 WordPress 网站与 ChatGPT Codex 连接起来。
接下来，通过简单的 AI 提示词，先生成网站设计图，再制作图片素材、搭建首页、创建其他页面、配置联系表单，最后检查并发布网站。
这套方法最大的好处，就是把很多原本需要手动完成的工作，交给 AI 辅助处理。
尤其对于不懂代码的普通用户来说，能够明显降低网站设计和开发的入门门槛。
当然，实际搭建时间会受到网站复杂程度、AI 使用额度、服务器环境等因素影响，并不是所有网站都能在几分钟内完成。
但如果你想尝试用 AI 搭建自己的第一个 WordPress 网站，这套方法确实值得学习。
开始搭建自己的WordPress网站
如果你还没有准备网站主机，可以先通过下面的链接购买 Hostinger。
Hostinger 高性价比网站托管平台
► 点击进入 Hostinger，开始搭建你的第一个WordPress网站
Hostinger 优惠码：WINDY
适用套餐可享10%优惠，最终折扣以结算页面为准。
WPVibe AI建站插件
ChatGPT Codex 电脑版
➜ https://chatgpt.com/download/
ChatGPT会员相关服务平台：银河录像局（第三方平台）
遇到问题，可以加入我的知识星球交流
如果你在 WordPress 建站、Hostinger 主机配置、AI 工具使用或者网站运营方面遇到问题，也欢迎加入我的知识星球，一起学习交流。
向有风咨询 · 知识星球
► 点击加入知识星球，交流WordPress建站与AI工具使用经验
➜ https://t.zsxq.com/16QP9JP8b
希望这篇教程能够帮助大家更轻松地掌握 WordPress 和 AI 建站工具，逐步搭建并运营好自己的网站。
说明：本文部分工具购买链接属于联盟推广链接。如果你通过这些链接购买产品或服务，本站可能获得一定推广佣金。相关产品价格、优惠、功能以及服务条款，均以对应平台实际公布的信息为准。
