Bricks 博客列表页与归档页教程：Query Loop 做文章流 + 分页

列表页与归档页的本质区别

两种页面都“列出一堆文章”，区别在数据从哪来：

• 列表页（博客首页）：你自己定规则，比如“最新 10 篇文章”。用 Query Loop 自定义查询。

• 归档页（分类 / 标签 / 作者 / 日期）：数据来自 WordPress 自带的“当前归档查询”。比如点开 /category/news/，WP 已经帮你筛选好 news 分类的文章，你只要做一个能继承这个查询的模板。

下面先讲通用的 Query Loop，再讲归档怎么“接住”系统的查询。

第一步：用 Query Loop 做文章列表

做法：

1. 新建模板，类型选 Page（或你想要的任何承载页），或者直接在某个页面用 Bricks 编辑

2. 拖一个 Container，在设置里打开 Query Loop 开关

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

4. 基础设置：每页数量（比如 9 或 12）、排序按 date 倒序（新的在前）

5. 保存

此时这个 Container 就变成“循环容器”，它会按你的查询，把每篇文章跑一遍里面的结构。

/* 列表用 CSS Grid 做响应式卡片墙最省心 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 桌面 3 列 */
  gap: 24px;
}
/* 平板 2 列、手机 1 列，用媒体查询 */
@media (max-width: 992px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .post-grid { grid-template-columns: 1fr; }
}

提示：Bricks 的 Container 本身支持 Grid 布局（Layout 里把 display 设成 grid，配 columns 和 gap），不一定非要手写 CSS。上面 CSS 是给你看原理。

第二步：循环内部的卡片怎么排

点开循环容器后，在它里面拖一个子 Container 当“文章卡片”，结构：

循环 Container（Query Loop 开）
└─ 卡片 Container（column）
   ├─ Image → 动态：Featured Image（缩略图）
   ├─ Heading（h2 或 h3）→ 动态：Post Title
   ├─ Text → 动态：Post Excerpt（摘要）
   └─ Meta → 动态：Post Date / 分类

关键点：卡片内部的元素全部绑动态数据（封面、标题、摘要、日期），这样每篇文章循环出来就是一张填好内容的卡片。标题记得包成链接（元素的链接设成动态 {post_permalink}），点卡片能进详情页。

第三步：分页 Pagination

文章多于一页时，加 Pagination（分页）元素：

1. 在循环容器外面、下方拖一个 Pagination 元素

2. 它会自动识别同页面的 Query Loop，渲染“上一页 / 下一页 / 页码”

3. 在查询设置里还能选分页类型：常规页码、无限滚动（Load more / Infinite scroll）

踩坑提醒：Pagination 元素要和 Query Loop 在同一个“查询上下文”里。如果分页不显示，检查它是否和循环容器放在了同一个父级下，且循环本身开了分页（每页数量 < 总文章数才会出分页）。

第四步：分类 / 标签归档页

归档页是“接住系统查询”，步骤：

1. 新建模板，类型选 Archive

2. Conditions 设归档范围，比如：

   • Archive type = Category（所有分类归档）

   • 或具体到某个分类 Category = News

   • 标签归档同理：Archive type = Tag

3. 进入编辑器，拖循环容器并打开 Query Loop，但查询来源选 “使用主查询 / Use main query”（不同 Bricks 版本叫法略异，核心是让它继承 WP 当前的归档查询），而不是自定义 Posts 查询

4. 循环内部布局同上（卡片结构）

这样，用户点开某个分类，自动只显示该分类文章；点标签同理。你只做一套 Archive 模板，所有分类 / 标签共用。

// 想微调归档查询时（比如按"评论数"排序），可用 Bricks 的查询参数过滤器
// 注意：过滤器钩子名请对照你所用 Bricks 版本的官方文档确认
add_filter( 'bricks/query/args', function( $args, $settings, $element_id ) {
    if ( ! empty( $settings['query'] ) && 'my_archive_loop' === $settings['query']['id'] ) {
        $args['orderby'] = 'comment_count'; // 按评论数排序
        $args['order']   = 'DESC';
    }
    return $args;
}, 10, 3 );

上面是“Bricks 查询参数过滤器”的通用写法示意，钩子名 bricks/query/args 请以你当前 Bricks 版本官方文档为准，别照抄不确定的名字。

筛选与排序

• 原生 Query Filters：Bricks 2.x 自带 Query Filters，可在前端做分类 / 标签 / 自定义字段的筛选，配合 Query Loop 使用，适合商品或文章筛选。

• 简单排序切换：在查询设置里直接改 Order by（date / title / modified 等），无需写代码。

• 复杂筛选：分类树、价格区间、多条件联动，建议上 WP Grid Builder 这类专用筛选插件，比手搓稳。

列表页常见的三个误区

写列表页最容易踩的坑：一是分页和「无限滚动」混用，爬虫只抓得到第一页，内页文章不被收录，新站建议先用普通分页；二是 Query Loop 里把整篇正文也查出来（{post_content}），列表只该取标题/摘要/缩略图，否则数据库查询翻倍；三是归档页忘了设 Conditions，分类页和标签页长得一模一样还互相抢词。把这三处理顺，列表页的收录和性能都稳了。

常见翻车点

1. 归档页显示全部文章 → 循环没选“继承主查询”，而是用了自定义 Posts 查询。改回 Use main query。

2. 分页点了没反应 / 404 → 伪静态（固定链接）没开，去 设置 → 固定链接 选除“朴素”外的任意格式。

3. 卡片点不进去 → 标题 / 卡片没包链接，给标题或卡片容器设动态链接 {post_permalink}。

4. 列表页和归档页样式不统一 → 把卡片结构做成一个“Section 模板”，列表页和归档页都引用它（用 Section 模板 + 短代码），改一处全站生效。

5. Query Loop 不输出 → 检查 Post type 是不是选对了（post 不是 page），以及每页数量 > 0。

到这里，博客四件套——页眉页脚、文章详情、文章列表、分类归档——全齐了。你已经有了一个能上线、SEO 友好的 Bricks 博客骨架。

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

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

常见问题（FAQ）

Query Loop 分页怎么开？ 在 Query Loop 里加 Pagination 元素，或勾选 Loop 设置里的分页，Bricks 会按「文章数÷每页」自动生成页码。

分类归档页和标签页要分开做吗？ 建议分开：在模板 Conditions 里分别选「分类归档」「标签归档」，文案和排序可不同，也能避免重复内容互相抢排名。

列表能按自定义字段排序吗？ 能。Query Loop 的排序条件选 Meta Key，填你的 ACF/自定义字段名，再选升序降序即可。

筛选和排序会拖慢页面吗？ 数据量不大时影响很小；量大时把查询缓存、或只查需要的字段（别查正文）就能压住。

站长

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.

获取报价 →浏览全部教程