WordPress 单篇文章页里给其他文章列表加 AJAX 分页

问题：单篇页里的分页失效

有位站友遇到一个典型需求：他的单篇文章模板展示一本杂志（自定义文章类型 CPT），右侧栏用 Query Loop 列出所有期刊，并加了 Pagination 分页元素。结果点击“下一页”或数字 2、3 时，列表纹丝不动。为了排查，他甚至把每页显示数量设成了 1，页面上只有 3 篇期刊，翻页却毫无反应。

这其实不是 Bricks 的 Bug。正如 Bricks 论坛里 Timmse 指出的：在 WordPress 里，在单篇文章页上展示一列文章并让分页正常工作（更别提 AJAX 分页）本来就没有简单直接的办法。原因在于分页机制依赖 WordPress 的主查询（main query），而单篇页的主查询只有一个对象——也就是当前这篇文章本身。Bricks 的 Pagination 元素跟着主查询走，自然不知道“右侧栏那个循环”该翻到哪一页。

这个问题的变体非常多：单篇页右侧的“相关文章”“上一篇/下一篇”“同分类文章”列表，想加分页都会撞上同一堵墙。

好在有一个免费的优秀插件可以解决：Loops & Logic（Tangible Loops and Logic），它自带独立的循环和 AJAX 分页能力，完全不依赖 WordPress 主查询。本文演示如何用它输出指定文章类型的标题列表（排除当前正在浏览的文章），并带 AJAX 分页。

Step 1：安装 Loops & Logic

在 WordPress 后台安装并激活 Loops & Logic 插件（插件库直接搜 “Tangible Loops and Logic”）。这是一款免费插件，免费版就包含本文用到的模板循环和 AJAX 分页按钮。

Step 2：创建 AJAX 分页模板

进入 Tangible → Templates，新建一个模板：

• 标题：AJAX Paginated Posts

• 模板内容：

<If check="{Get local=post_type}" not_exists>
  <Set local=post_type>post</Set>
</If>
<ul class="posts-list">
  <Loop type="{Get local=post_type}" count=9 paged=3 orderby=date order=desc exclude="{Field id}">
    <li><a href="{Field url}"><Field title /></a></li>
  </Loop>
</ul>
<PaginateButtons />

逐行解释这段模板：开头的 <If> 检查调用方是否通过短代码传入了 post_type 这个局部变量，如果为空就默认设为 post，这样模板既能复用又不会报错。中间的 <Loop> 告诉 Loops & Logic 从数据库取该文章类型共 9 篇文章、每页显示 3 篇、按日期倒序，并且用 exclude="{Field id}" 排除当前正在浏览的文章——这个排除功能在原生 Query Loop 里反而不太好做。结尾的 <PaginateButtons /> 会渲染一组 AJAX 分页按钮。

样式标签里可加：

.posts-list {
  padding-left: 1em;
}

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

Step 3：在单篇模板中调用

用 Bricks 编辑该文章类型的单篇模板，在你想输出文章列表的位置添加一个 Shortcode（短代码）元素，内容为：

[template name=ajax-paginated-posts post_type=service]

把 service 换成你自己的文章类型名称。保存后打开任意一篇文章，右侧列表就会显示并支持 AJAX 分页——点击页码，列表无刷新切换，体验和原生分页完全一致。

补充说明：如果觉得 Loops & Logic 的 HTML 模板写法不习惯，也可以只把它当“取数引擎”，用它的循环标签在 Bricks 的短代码元素里输出纯列表，分页按钮样式再自己用 CSS 美化。不过对大多数场景，官方模板默认样式已经够用。

小结：单篇页 + 文章列表 + 分页这个组合，Bricks 原生确实绕不过去，但 Loops & Logic 免费版就够用。核心思路是把“列表 + 分页”整体包成一个 Tangible 模板，再用短代码注入单篇模板，exclude="{Field id}" 顺带解决了“不显示当前文章”的需求。这套方案同样适用于“相关文章”“同作者文章”等各类单篇页列表，是 Bricks 生态里补分页短板最省事的一条路。

注意事项

这套方案要清楚它的前提：根因是单篇页的主查询只有当前这篇文章，Bricks 原生 Pagination 跟着主查询走，所以侧栏列表翻不了页。用 Loops & Logic 把「列表 + 分页」包成模板再用短代码注入，是绕开这个限制最省事的路。留意两点：一是免费版就够，不用为分页专门上付费插件；二是**exclude 参数记得排除当前文章**，否则列表会把自己也算进去。若你对 Tangible 模板语法不熟，也可以只把它当取数引擎，列表用 Bricks 短代码元素输出、分页样式自己写 CSS。

常见问题（FAQ）

Q：为什么单篇页里的列表分页不动？ A：单篇页主查询只有当前文章，Bricks 原生分页跟着主查询走，自然翻不了侧栏列表。

Q：一定要装 Loops & Logic 吗？ A：本文方案用它，免费版就够；思路是「列表+分页包成模板再短代码注入」，也可换等价工具。

Q：列表里出现了当前这篇文章？ A：用 exclude 参数排除当前文章 ID 即可。

Q：分页样式能自己改吗？ A：能，官方模板默认样式够用，想定制就自己写 CSS 美化分页按钮。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Query Loop Api Data

站长

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.

获取报价 →浏览全部教程