Bricks 博客文章页制作教程：单篇文章怎么排才 SEO 友好

文章页的本质：Single 模板 + 动态数据

博客每篇文章长得都一样（都有标题、封面、正文、作者），只是内容不同。Bricks 的做法是：做一个“单篇文章模板（Single）”，里面用“动态数据”占位，发布时自动填入每篇文章的真实内容。

你不用为每篇文章单独排版——建一次，全站文章共用。

第一步：建 Single 模板并限定条件

Bricks → Templates → Add New：

• Template type 选 Single

• 进编辑器后，点 Conditions，条件设 Post type = Post（如果你想只对某个分类生效，就选 Post type = Post + 具体分类）

• 保存

这样，凡是“文章”类型的页面，都会套这个模板。

第二步：标题、封面、正文怎么绑动态数据

组件建议这样摆（外层 Container 用 Contained，最大宽度 720~800，正文阅读宽度别太宽）：

Container（article 标签，居中，max-width 760）
├─ Heading（h1）→ 动态数据：Post Title
├─ Image（封面）→ 动态数据：Featured Image
├─ 元信息行（Container row）→ 日期 / 作者 / 分类
├─ 正文（Post Content 或 Text 绑 {post_content}）
└─ 作者框（Container row）→ 头像 + 名字 + 简介

标题：拖一个 Heading，层级设 h1，数据源选动态 → Post Title（文章标题）。

封面：拖 Image 元素，图片源选 Featured Image（特色图片）。把它的 Alt 文本也绑成动态 {post_title}，对 SEO 和读屏软件都好。

正文：Bricks 有个专门的 Post Content 元素，直接把它拖进来，它会输出这篇文章的正文（包括你在 WP 编辑器里写的所有段落、图片、小标题）。最省事。如果你想更可控，也可以用 Text 元素绑 {post_content}，但不如 Post Content 元素原汁原味。

动态数据怎么插：选中元素后，在设置里找到“数据来源 / Dynamic data”，从下拉里挑对应字段即可。标签写法形如 {post_title}、{featured_image}、{post_date}。

第三步：作者信息与发布时间

元信息行（封面下面那一行）常用动态字段：

• 发布日期：{post_date}（可在设置里选日期格式）

• 作者名：{author_name}

• 分类：{post_terms_category} 或对应的分类动态标签

作者框：放一个头像（动态 {author_avatar}）、作者名 {author_name}、作者简介（若插件/主题存了 author bio，绑对应字段；没存就先放名字即可）。

/* 文章正文的阅读体验优化（在 Bricks 里给正文容器加这些样式即可） */
.post-content {
  font-size: 17px;
  line-height: 1.8;       /* 行高别太挤，1.7~1.9 最舒服 */
  color: #2b2b2b;
}
.post-content img {
  border-radius: 8px;     /* 图片圆角，没那么生硬 */
  margin: 24px 0;
}
.post-content h2,
.post-content h3 {
  margin-top: 2em;       /* 小标题上下留白，层次清楚 */
}

第四步：相关文章（同分类）

文章底部放“相关阅读”，用 Query Loop（查询循环）：

1. 拖一个 Container，打开它的 Query Loop 开关

2. 查询类型选 Posts，Post type = post

3. 在“筛选”里：分类（category）设成“与当前文章相同分类”；并勾选 Exclude current post（排除当前文章），免得把自己也列进去

4. 排序按日期倒序，数量设 3~6 篇

5. 循环内部放：封面缩略图 + 文章标题（链接）+ 简短摘要

这样读者看完一篇，下面自动推同主题的几篇，停留时间和 SEO 都受益。

SEO 友好的结构要点

光排得好看不够，结构对搜索引擎才友好：

1. 全页只有一个 h1（就是文章标题），正文里的小标题用 h2 / h3，别乱跳级。

2. 用语义化标签：给最外层 Container 设 tag = article，正文区域语义清晰，Bricks 支持给 Container 指定 HTML 标签。

3. 封面图 alt 必填：绑 {post_title}，别留空。

4. 结构化数据：SEO 插件（Rank Math / SEOPress / Yoast）会自动给文章加 Article 结构的 schema，Bricks 不冲突——记得在 Bricks → Settings → SEO meta tags 里关掉 Bricks 自带的，避免双份 meta 打架。

5. 社交分享图：Open Graph 图片设成特色图片，分享到微信 / LinkedIn 才带图。

文章页的性能与 SEO 实测维度

上线前用这几项验证文章页：用浏览器无痕打开，确认标题/封面/正文都正确绑了动态数据，没出现「文章标题」占位符；看页面源码里 h1 只有一个（标题），正文是真正的 <p>/<h2>，不是图片化排版；顺手跑一次移动端速度，确认正文图片走了懒加载、没阻塞 LCP。Bricks 默认输出语义化标签，重点别在主题里把正文塞进自定义 HTML 元素导致结构塌掉。

常见翻车点

1. 每篇文章样式不一样 → 你是在页面里手动排的，而不是用 Single 模板。正确姿势是建 Single 模板 + 动态数据，文章本身只在 WP 编辑器写内容。

2. 正文不显示 → 忘了放 Post Content 元素，或放了但没绑对。检查循环 / 数据源。

3. h1 出现两个（比如页眉 Logo 也是 h1）→ 页眉的站点名用 div / span 或 p，别用 h1，h1 只留给文章标题。

4. 相关文章把自己列进去了 → 没勾“Exclude current post”，去查询设置里补上。

5. 双份 title / description → SEO 插件和 Bricks 都输出了 meta，按上面关掉 Bricks 自带的。

单篇文章页做完，你的博客骨架就齐了：有框（页眉页脚）、有详情页。最后差一个“文章列表 / 归档”页。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Single 模板和页面模板冲突怎么办？ 看 Conditions：文章（post）走 Single 模板，普通页面走 Page 模板，二者条件不重叠就不会串。

相关文章怎么只取同分类？ Query Loop 的 Conditions 选「当前文章的分类」，再排除当前文章本身即可。

作者和时间为什么显示不出来？ 在动态数据里选 {author_name} / {post_date}，并确认文章确实填了作者和发布时间。

文章页 h1 重复怎么修？ 保证页面标题用 h1、正文小标题从 h2 起，别在正文里再写一个 h1。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程