Bricks Query Loop 加载更多（Load More）按钮教程

Bricks 自带 AJAX Load More

你知道吗？Bricks Builder 其实开箱自带查询循环文章的 AJAX 点击加载功能，不需要安装任何第三方插件，也不需要写一行 JavaScript。很多新手在社区里问“怎么给 Query Loop 加加载更多”，答案往往就是：Bricks 已经帮你做好了，只是入口藏得比较深。

这个功能的价值在于：当你的文章列表很长（比如几十上百篇）时，一次性全部渲染会拖慢页面加载，而“加载更多”模式可以先展示前面几篇，访客点击按钮后再异步拉取下一批。和分页（Pagination）相比，加载更多更符合现代内容站的浏览习惯，尤其适合博客列表、作品集、产品目录这类场景。

本文就来讲清楚：如何在 Bricks 中配置 AJAX Load More 功能，让访客点击按钮后动态加载下一批文章，全程无刷新、无插件。

Step 1：搭建查询循环与按钮

1. 用 Bricks 编辑你的页面或模板。

2. 复制上面演示里完整搭好的 Section 的 JSON（链接见原文），粘贴到你的页面中。注意：演示用到了少量 ACSS（Automatic CSS）工具类和变量，没有 ACSS 的话按常规方式设置容器样式即可。

3. 在按钮上设置一个点击（click）交互，方式如下：

   • 交互类型选点击；

   • 在 Query 控制项中，选择你启用了查询循环的那个元素的标签（label）或 ID。这一步是关键——按钮必须知道它要驱动的是哪一个循环。如果你的页面有多个查询循环，一定要选对对应的那个，否则点击后加载的是错误的列表。

4. 加载动画：把加载动画放在按钮下方的 AJAX Loader div 里，Bricks 会在 AJAX 请求期间自动显示它。

这样配置后，访客点击按钮，Bricks 就会向服务器发起 AJAX 请求，取回下一页的文章并追加到循环末尾，同时显示加载动画，整个过程页面不刷新，浏览器的前进后退也不受影响。

相关阅读：

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

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

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

Step 2：ACSS 用户的全局 CSS

如果你使用了 ACSS（Automatic CSS），会遇到一个常见的坑：按钮在“没有更多文章可加载”时会被 Bricks 加上 brx-load-more-hidden 类来隐藏，但 ACSS 的按钮样式（btn--*）优先级更高，会覆盖隐藏规则，导致按钮加载完后仍然显示在那里。需要在全局 CSS 里加上：

a[class*="btn--"].brx-load-more-hidden {
    display: none;
}

如果你有 Advanced Themer 插件，也可以直接在构建器里完成这个设置，不必手写 CSS。没有用 ACSS 的普通按钮一般不会遇到这个问题，但写上这行 CSS 也无妨，属于保险操作。

保存后到前端测试即可：点击按钮，更多文章出现；加载完所有文章后，按钮自动隐藏。整个过程无需刷新页面，体验很顺滑。

参考

• ACSS 社区：覆盖 brx-load-more-hidden 的 CSS

小结：Bricks 的 Load More 是内置能力，配置只需要“按钮 + 指向查询循环的交互 + 一个 AJAX Loader”三件套。唯一的常见坑是 ACSS 用户需要一行 CSS 来让按钮在加载完毕后正确隐藏。如果你想要更复杂的加载逻辑（比如按分类加载、无限滚动），可以再参考我们站内其他的 Query Loop 进阶教程。

常见误区

Bricks 自带 Load More 最大的坑是入口藏得深——它不是一个独立设置，而是按钮的交互（Interaction）指向查询循环 + 一个 AJAX Loader 的组合，新手常在错的地方找开关。第二个坑是 ACSS 用户按钮加载完不隐藏：需要一行 CSS 覆盖 brx-load-more-hidden，否则最后按钮还杵在那。第三个是关于 SEO：加载更多是异步追加，初始 HTML 里只有前几篇，搜索引擎能抓到的也是前几篇，深层内容想被收录要考虑配合 sitemap 或分页。和分页相比，加载更多体验更顺，但收录策略要想清楚。

常见问题（FAQ）

Q：为什么找不到 Load More 开关？ A：它不是单独设置，而是按钮 Interaction 指向查询循环 + AJAX Loader 的组合，Bricks 内置支持。

Q：ACSS 用户按钮加载完不隐藏？ A：补一行 CSS 覆盖 brx-load-more-hidden 即可，属保险操作。

Q：加载更多影响 SEO 收录吗？ A：初始 HTML 只有前几篇，深层内容抓取得靠 sitemap 或分页配合，收录策略要想清楚。

Q：想要无限滚动或按分类加载？ A：原生不够，可参考站内其他 Query Loop 进阶教程做定制。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 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.

获取报价 →浏览全部教程