问题:单篇页里的分页失效
有位站友遇到一个典型需求:他的单篇文章模板展示一本杂志(自定义文章类型 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;
}
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 生态里补分页短板最省事的一条路。