主题构建器：文章页、归档页与 404 模板（完整图文步骤）

一、开始前的准备

做内容模板前，先保证有「料」可看 📋：

• ✍️ 至少发布 3–5 篇测试文章，配上特色图片（Featured Image）——没有数据，模板做出来看不出效果。
• 🗂️ 规划好分类，比如 News、教程，给文章分好类。
• 📄 建好博客列表页载体：后台 页面 → 新建页面（如「Blog」），然后 设置 → 阅读 → 文章页 选这个页面。

💡 为什么文章页要用模板做：文章是持续更新的，不可能每篇都用 Elementor 单独排版。Theme Builder 的思路是「做一次模板，所有文章自动套用」——你在模板里放好「动态内容」占位符（标题、日期、正文、特色图），每篇文章发布时自动填入自己的数据。这就是动态内容（Dynamic Content）。

---

二、制作文章详情页模板（Single Post）

🏗️ 2.1 新建模板

1. 后台 模板 → Theme Builder → Single Post → Add New。
2. 起名「文章详情页」，进入编辑器。
3. 模板库会推荐现成文章模板，可导入修改；本课从零搭建。

🧩 2.2 认识动态小部件

进入 Single Post 模板编辑后，左侧小部件面板会多出一组 「Theme Elements（主题元素）」，这些是文章模板专用部件：

• Post Title：当前文章的标题
• Post Content：当前文章的正文
• Featured Image：当前文章的特色图片
• Post Info：日期、作者、分类、评论数
• Post Navigation：上一篇/下一篇链接
• Post Excerpt：文章摘要

编辑器预览区显示的是某一篇真实文章的数据，所见即所得。

🏛️ 2.3 搭文章页结构

推荐结构：三个纵向排列的容器——容器1 文章头部（Post Title + Post Info），容器2 主体（Featured Image 全宽大图 + Post Content），容器3 底部（Post Navigation 上一篇/下一篇）。

操作步骤：

1. 添加容器1：Padding 上下 60px，背景浅色。
2. 拖入 Post Title：样式里字号 36px、居中；确认 HTML 标签是 H1（SEO 要求）。
3. 拖入 Post Info：居中，图标选日历/文件夹，文字灰色小字。
4. 添加容器2：内容宽度 Boxed（760px 左右最适合阅读），Padding 上下 40px。
5. 拖入 Featured Image：宽度 100%，圆角 8px。
6. 拖入 Post Content：这是正文的占位符，样式里设好正文字号 16px、行高 1.8。
7. 添加容器3：拖入 Post Navigation，上一篇/下一篇自动出现。

🚀 2.4 发布并设条件

1. 点「发布」→ Add Condition。
2. 选 Posts（所有文章）——也可以只选某个分类的文章，给不同分类做不同模板。
3. 保存并关闭。

✅ 打开任意一篇文章，应该自动套用了新模板。改模板一处，全站文章跟着变。

⚠️ 注意：文章正文内容仍然用 WordPress 默认编辑器写（Elementor 不适合写日常文章）。模板只管「外壳」，正文从 Post Content 部件流出。已经在用 Elementor 写的单篇文章不受影响，它有自己的独立设计。

---

三、制作归档页模板（Archive）

归档页就是博客列表页、分类页、标签页——它们共用一套 Archive 模板。

🏗️ 3.1 新建模板

1. 模板 → Theme Builder → Archive → Add New。
2. 起名「文章列表页」。

🏛️ 3.2 搭归档页结构

经典布局：顶部标题区 + 左侧文章网格 + 右侧边栏——容器1 是带背景图的标题区（放 Archive Title，自动显示当前分类名）；容器2 横向，里面小容器A（70%）放 Archive Posts 文章网格，小容器B（30%）放搜索框、分类菜单和推荐文章。

操作步骤：

1. 容器1：Padding 上下 50px，设背景图 + 深色半透明覆盖。
2. 拖入 Archive Title：居中白色大字。⚙️ 提示：4.3.x 版已取消「Include Context」开关——标题默认按系统格式显示（分类页会带「Category: 」前缀）；如果想去掉前缀，可在部件的「标题」框里填固定文案（代价：所有归档页统一显示这句，不再随分类变化）。
3. 容器2：方向横向，里面放两个小容器，宽度分别 70% / 30%。
4. 小容器A 拖入 Archive Posts 小部件（文章网格）。

⚙️ 3.3 Archive Posts 设置参考

• Layout：Classic（经典卡片式）
• Columns：3（每行 3 篇）
• Image Position：Top（图上文下）
• 图像分辨率：300×300（别用原图，拖慢列表页）
• Title HTML Tag：H2（列表页的文章标题用 H2）
• Excerpt：开启，长度 100（显示摘要）
• Read More：按需（阅读全文链接）
• Pagination：Numbers + Previous/Next（数字分页 + 前后翻页）
• Page Limit：20（单页最多显示数）

💡 三个能显示文章列表的部件怎么选：Archive Posts 专为归档页设计，自动读取当前归档查询，归档模板里用它最省心；Posts 部件更灵活但要手动把 Query Source 设为 Current Query；Loop Grid 自由度最高，卡片样式完全自定义。

🧩 3.4 填充侧边栏

小容器B 依次拖入：

1. Search Form：站内搜索框。
2. 标题「文章分类」+ WordPress Menu：选你建的分类菜单，设垂直排列。
3. 标题「推荐阅读」+ Posts 部件：Query 里手动指定 3 篇精选文章。

📱 3.5 移动端适配

侧边栏在手机上默认堆叠到文章列表上方——不合理，应该先看到文章。

1. 切手机视图，选中容器2。
2. 小容器A、B 宽度都改 100%。
3. 用 Order（排序）：文章容器设 1，侧边栏设 2——侧边栏移到下方。

（老 Section 体系用 布局 → 响应式 → Reverse Columns 实现同样效果。）

🚀 3.6 发布并设条件

• 想让所有分类、标签、博客页都用这套模板：条件选 All Archives。
• 只想用于分类页：选 Categories。
• 也可以给 News 分类单独做一套模板：条件选具体分类即可。

---

四、制作 404 页面

404 不是报错终点，而是挽回访客的兜底页。主题自带的 404 通常只有一行冷文字，自己做一个带引导的 🎯。

🏗️ 4.1 新建模板

1. 模板 → Theme Builder → Error 404 → Add New。
2. 起名「404 页面」。

🧩 4.2 404 页面该放什么

一个垂直居中的容器（最小高度 70VH）里从上到下依次是：大标题「404 / 页面走丢了」、说明安抚文本、Search Form 搜索框（⭐ 最重要）、「返回首页」按钮，以及可选的推荐内容（热门文章/产品）。

操作步骤：

1. 添加容器：方向纵向、内容居中、最小高度 70VH。
2. 拖入标题小部件：404，字号 120px，品牌色。
3. 副标题：「你要找的页面不存在或已移动」。
4. 拖入 Search Form——让迷路的人直接搜索，这是降低跳出率最有效的部件。
5. 拖入按钮：「返回首页」，链接 /。
6. 可选：放一个 Posts 部件推荐 3 篇热门文章，或放主要产品入口。

🚀 4.3 发布

发布 → Add Condition → 404 Page → 保存。

✅ 验证：访问一个故意拼错的 URL（如 你的域名/blablabla），应该看到你的新 404。

---

五、模板管理与维护

后台 模板 → Theme Builder 是全部模板的控制台 📋：

• 模板列表：每个类型下看到所有模板及其显示条件摘要。
• 修改显示条件：打开该模板的编辑器，点顶栏 「保存选项」→「Display Conditions」 随时调整。
• 导出：模板可导出 JSON 备份或搬到其他站。
• 条件冲突：多个模板条件重叠时，Theme Builder 列表会显示警告标志。发现页面套错模板，先查条件冲突。

日常维护原则：

• 换品牌色/字体：改站点设置全局样式，模板自动跟随
• 文章页要加作者框：改 Single Post 模板一处，全站文章生效
• 某分类要特殊版式：新建 Single/Archive 模板，条件限定该分类
• 主题更新后：检查模板显示是否正常（用 Hello 主题基本无此烦恼）

---

六、常见问题排查

⛔ 6.1 文章页模板发布后文章没变化

• 检查显示条件是否选了 Posts。
• 这篇文章如果是用 Elementor 单独编辑过的，它有自己的设计，不走模板——这是预期行为。
• 清缓存。

⛔ 6.2 Archive Title 显示「Archives: 分类名」

4.3.x 版没有旧版的 Include Context 开关，标题默认带「Category: 」前缀；要去掉前缀，在部件「标题」里填固定文案（全站归档统一显示）。

⛔ 6.3 归档页显示的不是模板样式

• 确认博客页已在 设置 → 阅读 里指定了文章页。
• 确认 Archive 模板条件覆盖了你访问的归档类型（All Archives 最保险）。
• 主题可能有自己的 archive.php 强势接管——换 Hello Elementor 主题最省心。

⛔ 6.4 Archive Posts 里图片大小不一

• 给部件设统一的图像分辨率（如 300×300）和图片比例（Image Ratio）。
• 文章特色图尺寸太小的文章会留白，补传高清特色图。

⛔ 6.5 404 模板不生效

• 条件必须是 404 Page，不是 Entire Site（404 不属于常规页面）。
• 部分缓存插件/CDN 会缓存旧 404 响应，清缓存后再测。