Bricks 用 IsotopeJS 做筛选（一）：入队库与基础初始化
IsotopeJS 是 Bricks 原生核心库之一，不需要上传到服务器——我们只需要像 Bricks 一样把它入队，再配两个自定义文件（CSS + init.js）即可实现筛选。
本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to create filters with IsotopeJS in Bricks (Part 1)
步骤一：入队 IsotopeJS
在子主题 functions.php 粘贴：
/**
* Register/enqueue custom scripts and styles
*/
add_action( 'wp_enqueue_scripts', function() {
// 只在画布与前端入队（不要在 builder 面板里，否则自定义 CSS 会污染构建器）
if ( ! bricks_is_builder_main() ) {
// Isotope JS（库脚本）
// 在此 wp_enqueue_script 引入 isotope 库
// 以及你的 init.js 与自定义 CSS步骤二：初始化脚本
官方提供了带错误处理、注释完善、data-attribute 辅助的完整 init 文件——你在 Bricks 里几乎不用写任何代码，直接粘贴即可：
window.addEventListener('DOMContentLoaded', () => {
const isotopeWrappers = document.querySelectorAll('.isotope-wrapper');
// 没有筛选容器则停止
if (isotopeWrappers.length < 1) {
return console.log('No isotope wrapper found. Make sure to ');
}步骤三：响应式列数 CSS
用 CSS 变量控制列数与间距，断点自动切换：
.isotope-selector {
width: calc(calc(100% / var(--col)) - calc(calc(var(--gutter)* calc(var(--col) - 1))/var(--col)));
}
.isotope-wrapper {
--col: 1;
--gutter: 0px;
}
@media screen and (min-width: 768px){
.isotope-wrapper {
--col:2;
}
}@media screen and (min-width: 1200px) {
root{
--col:4;
}
}小结
- IsotopeJS 是 Bricks 内置库，无需上传
- 入队 + init.js + CSS 三步即可用
--col/--gutter变量控制响应式网格
下一篇继续讲筛选按钮与排序逻辑。
延伸阅读
延伸阅读
tutorial
Bricks 用 IsotopeJS 做筛选（二）：自定义分类法管理图片分类
教程：IsotopeJS 筛选系列第二篇——用 WordPress 自定义分类法（taxonomy）给图片打分类标签，配合函数取当前文章分类，让筛选完全动态化。
tutorialBricks Tabs 自动轮播：滚动到可视区自动切换标签页
教程：给 Bricks 的 Tabs（Nestable）元素加自动轮播——滚动到可视区域后每 x 秒自动切换标签页，适合首页产品/方案展示。
tutorialBricks 判断 ACF Repeater 是否有数据行：条件输出进阶
教程：在 Bricks 里用自定义函数判断 ACF Repeater 字段是否有数据行，从而条件显示元素。解决基础类型条件判断搞不定的数组型字段。
tutorialBricks 给区块加草稿状态开关：编辑器里隐藏未定稿区块
教程：用代码片段给 Bricks 所有元素加一个“草稿状态”勾选框，勾选后前端不输出。适合临时隐藏未定稿区块（Bricks 2.0 已原生内置，本文作历史方案参考）。