教程教程
Bricks 建站实操教程——查询循环、动态数据、ACF、WooCommerce、性能优化，每篇都实测过、带可复制代码。
Bricks Query Loop 教程：在单篇文章中标记并高亮当前文章怎么做
Bricks Query Loop 教程：在单篇文章/CPT 单页的导航列表里，如何用自定义函数与 data attribute 标记并高亮当前文章，含 functions.php 白名单与 CSS 样式示例。
Ray Chan·2026 / 08 / 21·约 3 分读如何利用 Meta Box Radio 子字段值筛选 Bricks 文章 Query Loop（教程）
本 Bricks 教程讲解如何按 Meta Box 组的 Radio 类型子字段值筛选文章 Query Loop。通过 PHP query 与序列化字符串匹配，实现按 session 类型（Individual/Duet/Trio）过滤 store 自定义文章类型，适合 WP 与外贸建站开发者。
Ray Chan·2026 / 08 / 21·约 4 分读WordPress 区块开发怎么做：跟着官方教程构建第一个 block 的踩坑笔记（Bricks 教程）
本文记录跟着官方教程做 WordPress 区块开发、构建第一个 block 的完整过程：从 npx 脚手架报错、blocks-manifest 致命错误修复，到动态与静态区块实现，适合 WordPress 与 Bricks 开发者参考。
Ray Chan·2026 / 08 / 21·约 3 分读同步缩略图滑块怎么做：在 Bricks 中用 BricksExtras 实现（图文教程）
本教程手把手教你用 BricksExtras 在 Bricks 中制作同步缩略图滑块：主图滑块与底部缩略图联动，数据来自 ACF/Meta Box 图集字段，含详细配置步骤与代码片段。
Ray Chan·2026 / 08 / 21·约 3 分读Bricks 制作 404 页面模板
教程：用 Bricks 专门做 404 模板，让死链访客看到友好兜底页，带搜索和返回入口挽回跳出。
Ray Chan·2026 / 08 / 20·约 3 分读如何在 Bricks Builder 中使用 ACF（Advanced Custom Fields）
教程：ACF 负责存结构化数据，Bricks 负责用动态数据把它漂亮地展示出来。讲清怎样在 Bricks 里调用 ACF 字段。
Ray Chan·2026 / 08 / 20·约 3 分读Advanced Custom Fields 插件自定义产品内容类型
教程：当文章不够用时，用 ACF 配合自定义文章类型把产品、案例等业务对象变成结构化内容，后台好录、前台好展。
Ray Chan·2026 / 08 / 20·约 3 分读BricksExtras 插件介绍
教程：BricksExtras 是 Bricks 生态热门第三方扩展，补齐目录、阅读进度、滑块等实用组件。讲它是什么、能干什么、怎么装。
Ray Chan·2026 / 08 / 20·约 3 分读BricksUltimate 安全事件与应对
教程：第三方扩展若维护不善可能带来安全隐患。讲 BricksUltimate 这类扩展在安全问题上的通用应对——发现、处置、日常防范。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 建站完整教程：从零到上线
教程路线图：用 Bricks 从零搭站的五段流水线——买装、配全局、做模板、填内容、上线优化，照着走即可。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题添加自定义字体
教程：把自有字体文件上传并注册到 Bricks，在字体下拉里直接选用，统一品牌视觉又不被外部请求拖慢。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 动态数据详解
教程：动态数据让元素显示随内容变化的值而非写死文本。系统讲它的机制、来源与 Query Loop 里的典型用法。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 编辑器不显示添加的元素
教程：明明加了元素编辑器或前台却看不到？列出缓存、条件隐藏、容器溢出、插件冲突等常见原因与排查清单。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 的元素条件设置
教程：除了模板级条件，Bricks 每个元素还能设条件显示——满足规则才出现。讲设备/用户/字段等判断维度与场景。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Element Style 元素样式
教程：Bricks 每个元素都有完整样式控制——布局、排版、背景、边框、特效。带你过一遍样式面板结构，快速上手。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Fancy Animations 动画组件
教程：用 Bricks 生态的动画扩展零代码加淡入、视差、滚动触发等效果，并讲清克制动效的原则。
Ray Chan·2026 / 08 / 20·约 3 分读如何使用 Bricks Builder 编辑我的第一个页面
教程：适合纯新手。带你走完编辑第一个 Bricks 页面的完整闭环——进编辑器、认识界面、拖元素、改样式、保存发布。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作页脚 Footer 模板
教程：用 Bricks 模板做一次 Footer，全站自动套用，版权导航联系一次设计维护零成本。
Ray Chan·2026 / 08 / 20·约 3 分读如何使用 Bricks Builder Form 实现询盘功能
教程：外贸站、企业站的核心是询盘。用 Bricks 自带 Form 元素零插件做出可发邮件的询盘表单，并支持全站复用。
Ray Chan·2026 / 08 / 20·约 3 分读为 Bricks Builder Form 表单添加 Google reCAPTCHA v3 验证
教程：用 Google reCAPTCHA v3 给 Bricks 表单加一层无感反垃圾防护，每月百万次免费额度，无需用户点 checkbox。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Builder 新手入门教程
教程：刚接触 Bricks 不知从哪学？给一份最短学习路径——概念、第一页、模板条件、动态数据、优化上线，半天搭出能用的站。
Ray Chan·2026 / 08 / 20·约 3 分读如何在古腾堡编辑器中设置图片点击放大
教程：用古腾堡自带的灯箱能力，让访客在文章里点图片后弹层放大查看，无需装插件，阅读体验更顺。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作页眉 Header 模板
教程：用 Bricks 模板做一次 Header，全站统一顶部品牌区——Logo、导航、CTA，并处理好粘性与手机汉堡菜单。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 元素的悬停样式设置
教程：用 Bricks 每个元素的悬停态，做出变色、放大、位移等交互质感，低成本提升页面高级感。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Builder Layout 布局详解
教程：布局是搭页面的骨架。讲清 Section/Container/Element 层级，以及 Flex 排方向、Grid 做多列等核心布局工具。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题本地化 Google 字体
教程：把 Google 字体下载托管到自己服务器，去掉外部请求，提升 Bricks 站首屏速度与稳定性。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 推出新订阅和计划（2024 年变动）
资讯：Bricks 在 2024 年调整授权模式，引入终身与订阅并行方案。梳理变动要点，帮你判断买哪种更划算。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作弹出框 Popup 模板
教程：用 Bricks 的 Popup 模板做订阅框、公告浮层，并配置自动/按钮触发与关闭方式。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Post Archive 文章列表模板
教程：博客列表页就是 Post Archive。用 Bricks 的 Archive 模板加 Query Loop，自动生成整齐的文章卡片流。
Ray Chan·2026 / 08 / 20·约 3 分读Post SMTP 插件配置 Gmail 邮箱转发网站消息
教程：网站询盘/通知邮件常发不出，用 Post SMTP 走 Gmail 代发稳定可靠。讲应用专用密码、SMTP 参数与测试验证。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Product Archive 产品列表模板（自定义内容类型）
教程：不用 WooCommerce，用自定义文章类型加 ACF 也能做产品目录列表。讲非 Woo 路线的 Product Archive 做法。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Product Archive 产品列表模板（WooCommerce）
教程：用 WooCommerce 做电商时，商店页/分类页就是 Product Archive。Bricks 原生兼容，做出商品网格加加购按钮。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题购买安装指南
教程：从官网下单到站点上线的清晰五步——买授权、下 zip、上传启用激活、基础配置、开搭页面，新手照着走。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Builder 主题 Rank Math SEO 分析不生效
教程：Rank Math 在 Bricks 页面读不到正文、评分失效的成因与解法——补古腾堡正文或把 SEO 要素做实在。
Ray Chan·2026 / 08 / 20·约 3 分读如何申请 Bricks Builder 主题试用
教程：官方提供在线试用环境，任何人填邮箱就能申请，零成本先体验编辑器再决定是否购买切换。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Search Result 搜索结果页面模板
教程：站内搜索结果页也需要好版式。用 Bricks 专门的 Search Result 模板，让搜索列表与全站视觉统一。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 建站的 SEO 教程
教程：给 Bricks 站一份可落地的 SEO 清单——技术底座、内容与结构、速度、结构化数据四件套，当成持续动作做。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 的侧边栏
教程：博客、文档常要在正文旁放侧边栏。讲清 Bricks 处理侧边栏的两条路——接原生小工具，或用容器加 Query Loop 自建。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Single Post 文章详情模板
教程：每篇博客打开后的样子由 Single 模板决定。用动态数据把标题、正文、作者、相关文章自动排好，一套版式服务所有文章。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Single Product 产品详情模板（自定义内容类型）
教程：用自定义产品类型加 ACF 承载参数，把型号、材质、规格漂亮地排成展示型详情页，并给询盘入口替代加购。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 制作 Single Product 产品详情模板（WooCommerce）
教程：单个商品详情页由 Single Product 模板决定。Woo 版拉价格、相册、加购、评价等电商模块，两栏布局是标配。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题的网站速度究竟如何
教程：客观聊聊 Bricks 的性能底子——输出干净、无 jQuery 依赖，以及真正决定速度的缓存、图片、字体等优化动作。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 模板条件设置详解
教程：模板靠条件决定显示在哪些页面。把类型/分类/具体页等判断维度讲透，避免页面套错版式。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题的模版功能介绍
教程：建立 Bricks 模板整体认知——分类型设计页眉页脚/详情/列表，用条件控制显示范围，实现全站一次性复用。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 模板设置预览数据（Preview Data）
教程：做模板时页面是空壳看不到真实效果？用预览数据套用某条真实内容来预览，边看边调版式。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题设置
教程：装好 Bricks 第一步就是进主题设置配基础项。梳理后台设置里最常改的常规、性能、API 几个分区，帮你少走弯路。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks 主题全局样式 Theme Style 设置
教程：用 Bricks 的 Theme Style 定义一套全局字体、颜色、按钮基线，全站元素自动继承，改一处全站生效。
Ray Chan·2026 / 08 / 20·约 3 分读Bricks Builder vs Elementor 对比
教程：从性能、编辑器、模板与动态数据、价格几个维度客观对比 Bricks 与 Elementor，帮你按项目需求选型。
Ray Chan·2026 / 08 / 20·约 3 分读什么是 Bricks Builder 画布
教程：刚装好 Bricks 不知道哪块能拖东西？画布就是那个实时预览加编辑的可视化区域，搞懂它你才算真正上手。
Ray Chan·2026 / 08 / 20·约 3 分读在 Bricks 里用 CSS 变量搭建可维护的设计体系
教程：用 Bricks 的全局 CSS（:root 变量）建立一套设计体系——主色、圆角、间距、字号全部变量化，改一处全站生效，告别逐页改样式的噩梦。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 编辑器入门与基础操作：从创建模板到保存复用
新手实操：Bricks 编辑器界面怎么看、布局元素（排版/容器/区块）怎么用、元素/内容/样式三类参数怎么设、模板如何保存复用。一篇讲清 Bricks 日常建站的基本动作。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 流体排版：用 clamp() 让间距字号随屏幕自动缩放
教程：用 CSS clamp() 函数替代固定数值，实现 Bricks 站点的流体排版——内边距、字号、间距随视口宽度平滑缩放，桌面端宽松、手机端紧凑，视觉更和谐且免写一堆媒体查询。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks Builder 安装与后台设置全指南（父主题/子主题/Settings 逐项讲）
新手向实操：从官网下载 Bricks 到安装父主题/子主题、激活、再到后台 Settings 每个标签页（General/Builder access/Templates/Performance/API/Custom code/Theme style）逐项说明，帮你把 Bricks 配顺手。
Ray Chan·2026 / 08 / 19·约 4 分读Bricks 三大高级功能：动态数据、Query Loop 与条件显示
讲透 Bricks 做动态网站的三件套——Dynamic Data（动态数据）、Query Loop（遍历查询）、条件显示，含动态数据字段、伪 SQL 查询逻辑与 AND/OR 条件用法。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 博客列表页与归档页怎么做
手把手用 Bricks 的 Posts 小部件和 Archive 模板做博客列表页、分类/标签归档页，并说明动态数据摘要字数等易踩的小坑。
Ray Chan·2026 / 08 / 19·约 3 分读用 Bricks 重做博客文章详情页：Single 模板与小部件清单
讲解如何用 Bricks 的 Single 模板重做文章详情页布局，列出 SINGLE 分类下各小部件的作用，并给出 Featured Image 随文章联动的技巧。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 容器与 Flexbox 布局：Section、Container、Block、Div 到底怎么选
讲透 Bricks 四种布局容器的默认差异与适用场景，并拆解 Flexbox 的主轴/交叉轴、换行、对齐、排序等核心参数，配一份可直接对照的 CSS 速查。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 编辑界面与基础操作：新手的第一课
拆解 Bricks 编辑器三区布局、顶部栏断点与保存、小部件的添加/复制/删除，以及单位、样式继承、自定义 CSS 等日常必懂的基础概念。
Ray Chan·2026 / 08 / 19·约 3 分读用 Bricks 做网站页眉与页脚：模板、固定页眉与全站应用
手把手用 Bricks 的 Header / Footer 模板自由设计页眉页脚，涵盖 Logo、导航菜单、响应式分端调整、Sticky 固定页眉，以及 PC/手机用不同 Logo 的技巧。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 安装与基础设置：从启用子主题到性能优化
从官网下载、启用 Bricks Child 子主题，到 General、Builder Access、性能、全局 Custom Code 等基础设置逐项讲清，附各开关的推荐配置。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 优化设计流程：主题样式、全局 class 与全局小部件
用 Bricks 的 Theme Styles 主题样式、全局 class、全局小部件（Global Elements）提前固化常用风格与模块，告别反复手动调参，大幅提升建站效率。
Ray Chan·2026 / 08 / 19·约 3 分读用 Bricks 设计产品详情页：WooCommerce 还是 Meta Box？
拆解 Bricks 下产品详情页的两种做法：WooCommerce 现成小部件 vs Meta Box + MB CPT 自定义字段，并给出 B2B / B2C 的选型建议。
Ray Chan·2026 / 08 / 19·约 3 分读用 Bricks 做产品列表页：WooCommerce 与 Meta Box 两条路线怎么选
对比 Bricks 下做产品列表页的两种主流方案——WooCommerce 原生小部件与 Meta Box + MB CPT 自定义，并讲清 Products Filter 等核心小部件的用法与取舍。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks Theme Style 主题样式：一套预设统管全站视觉
教程：用 Bricks 的 Theme Style（主题样式）把颜色、字体、间距、按钮、表单等视觉规则存成一套预设，页面直接套用，改风格只动一处，告别逐页调样式。
Ray Chan·2026 / 08 / 19·约 3 分读Bricks 无障碍指南：让网站对所有人都可用
教程：Bricks 无障碍指南（Accessibility）——语义化 HTML、ARIA 地标、图片替代文本、键盘导航、焦点样式与菜单键盘操作，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 按 ACF Options 字段条件显示元素（Pro 思路卡）
选题卡：只有当 ACF Options 页面上的某个字段（如 phone）有值时，才渲染带电话图标的容器。思路+钩子，完整代码见 BricksLabs Pro。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Tabs 自动轮播：滚动到可视区自动切换标签页
教程：给 Bricks 的 Tabs（Nestable）元素加自动轮播——滚动到可视区域后每 x 秒自动切换标签页，适合首页产品/方案展示。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 判断 ACF Repeater 是否有数据行：条件输出进阶
教程：在 Bricks 里用自定义函数判断 ACF Repeater 字段是否有数据行，从而条件显示元素。解决基础类型条件判断搞不定的数组型字段。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks CSS Grid 布局完全指南：grid-template 与可视化栅格构建器（Visual Grid Builder）
教程：从 Bricks 1.6.1 起，任意布局元素都能用 CSS Grid 做二维布局。本文讲清 Grid Container / Grid Item、grid-template-columns/rows、fr 单位、implicit grid、minmax、auto-fill/auto-fit、repeat，以及 Visual Grid Builder 的可视化拖拽、断点与查询循环支持。
Ray Chan·2026 / 08 / 18·约 5 分读Bricks 自定义元素开发入门：扩展 Element 类，写一个自己的元素
教程：Bricks 自定义元素开发入门——扩展 Bricks Element 类创建自己的元素，含控件定义、前端渲染、注册加载与代码签名机制，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 给区块加草稿状态开关：编辑器里隐藏未定稿区块
教程：用代码片段给 Bricks 所有元素加一个“草稿状态”勾选框，勾选后前端不输出。适合临时隐藏未定稿区块（Bricks 2.0 已原生内置，本文作历史方案参考）。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 表单生成器完整指南——从字段、动作到防垃圾提交
教程：Bricks Form 元素全解析。16 种内置字段类型（另加 HTML 字段）、邮件/重定向/Webhook/保存提交等动作、用户登录注册表单、reCAPTCHA v3/hCaptcha/Turnstile 防垃圾与自定义验证，一篇讲清。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 全局类完全指南：Global CSS Classes、Class Manager 与导入管理器
教程：系统讲解 Bricks 的全局类体系——在元素面板上创建与分配 Global CSS Classes、用 Global Class Manager 管理分类/锁定/导入导出，以及 Bricks 1.12 引入的全局类导入管理器如何解决导入冲突，配合真实代码示例与最佳实践。
Ray Chan·2026 / 08 / 18·约 4 分读Bricks 嵌套滑块做网格轮播：用 SplideJS 扩展实现多行多列
教程：在 Bricks 默认嵌套滑块(nested slider)里做出多行多列的网格轮播效果，用 SplideJS 的 grid 扩展实现，适合产品墙/案例墙展示。
Ray Chan·2026 / 08 / 18·约 3 分读HTML/CSS 转 Bricks：把现成代码直接粘贴成原生元素
教程：HTML/CSS 转 Bricks——把网页库或 AI 生成的 HTML/CSS 直接粘贴进构建器，自动生成原生元素、全局类与全局变量，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 纯 CSS 无限滚动 Logo 墙：ACF + 自定义文章类型
教程：在 Bricks 里用 ACF 自定义文章类型存 logo，配合纯 CSS 动画做无限横向滚动的 logo 墙（客户/合作伙伴展示），零 JS 依赖。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 用 IsotopeJS 做筛选（一）：入队库与基础初始化
教程：IsotopeJS 筛选系列第一篇——在 Bricks 里用 WordPress 原生入队 IsotopeJS（Bricks 内置库），配好 CSS 变量响应式列数与初始化脚本。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 用 IsotopeJS 做筛选（二）：自定义分类法管理图片分类
教程：IsotopeJS 筛选系列第二篇——用 WordPress 自定义分类法（taxonomy）给图片打分类标签，配合函数取当前文章分类，让筛选完全动态化。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 菜单构建器与 Mega Menu 指南——Nav (Nestable) 全解
教程：Bricks 1.8+ 菜单构建器五件套（Nav nestable / Text link / Dropdown / Toggle / Offcanvas）的完整用法。桌面菜单、移动端菜单、一键 Mega Menu、多级下拉、WordPress 菜单混用，一篇讲清。
Ray Chan·2026 / 08 / 18·约 4 分读Bricks 嵌套滑块进度条：给轮播加播放进度指示
教程：给 Bricks 的嵌套滑块(nested slider)加一个播放进度条，随自动播放前进，用户一眼看出轮播位置。基于 SplideJS 扩展实现。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Popup Builder 与 Interactions 交互实战：弹窗、触发器与 JavaScript 钩子
教程：Bricks 的 Popup Builder 把弹窗做成一类模板，配合 Interactions（Bricks 1.6 起）用触发器+动作+目标驱动前端交互。本文讲清弹窗模板、Popup 设置、开关生命周期、弹出限制、AJAX 弹窗，以及 Interactions 的触发器/动作/目标、浏览器存储、JavaScript 函数与自定义事件。
Ray Chan·2026 / 08 / 18·约 4 分读Bricks Query Filters 分面搜索教程——无插件实现筛选、排序与实时搜索
教程：Bricks 内置的 Query Sort, Filter & Live Search 系统，用 8 种筛选元素给文章/产品/用户列表加分类筛选、价格区间、排序、每页条数、实时搜索与 AJAX 分页，全程不装插件。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Query Loop 从 API 拉数据——REST/外部 JSON 接口展示教程
教程：Bricks 2.1+ 的 Query Loop 支持 API 查询类型，直接抓外部 JSON 渲染成列表。请求配置、鉴权、响应路径、query_api 动态标签、分页与缓存，含 WordPress REST API 和 DummyJSON 两个实战例子。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Query Loop 按日期字段条件输出元素（Pro 思路卡）
选题卡：在 Bricks Query Loop 里，只有当某个日期型自定义字段（如 event_date）大于当前时间时，才显示某个元素（如“即将开始”CTA）。思路+官方钩子，完整代码见 BricksLabs Pro。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Query Loop 布局切换器：网格/列表一键切换（无插件）
教程：在 Bricks 里给用户提供 Query Loop 网格/列表布局切换按钮，纯 CSS 变量 + 原生 JS 实现，不装插件、不重复内容、不伤 SEO。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 桌面导航溢出自动折叠：菜单太多时的 More 按钮方案
教程：当桌面导航菜单项太多溢出时，用一段 JS 自动把溢出的项折叠进“More”下拉，避免写一堆媒体查询。外贸站导航项多的必备方案。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 主题样式与 Style Manager 实战：Theme Styles、变量、色彩与设计系统
教程：Bricks 的 Theme Styles 是站点级样式默认值，由条件决定在哪些页面生效、按样式层级被更具体的样式覆盖；Style Manager 则把主题样式、类、变量、色彩、排版/间距比例、Framework 与设置集中到一个面板。本文讲清两者的心智模型、条件解析、加载方式与最佳实践。
Ray Chan·2026 / 08 / 18·约 4 分读Bricks 按用户角色条件输出内容（Pro 思路卡）
选题卡：根据当前登录用户的角色（如 editor / subscriber），在 Bricks 里条件显示或隐藏某些元素。思路+钩子，完整代码见 BricksLabs Pro。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks + WooCommerce 商品循环模板：用一套模板接管默认商品循环
教程：在 Bricks 里建一个标准 WooCommerce 商品循环模板，通过钩子覆盖默认循环，避免每个页面重复设计。外贸独立站商品页批量统一的实战方法。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks + WPML/Polylang 多语言站搭建指南
教程：Bricks + WPML/Polylang 多语言站搭建——覆盖两个插件的环境准备、翻译页面与模板、组件翻译、语言切换器与常见问题排查，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读把任意自定义 WP_Query 循环接入 Bricks 查询循环
教程：把任意自定义 WP_Query 循环接入 Bricks 查询循环——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 整页滚动（FullPage.js）：把一页切成全屏区块
教程：在 Bricks 里集成 FullPage.js 做整页滚动——每个 section 占满一屏，滚轮逐屏切换，适合极简产品页/演示页。含入队代码、CSS 与初始化 JS。
Ray Chan·2026 / 08 / 18·约 3 分读GSAP 在 Bricks 中的实战案例：一个时间轴串起六种动画
教程：GSAP 在 Bricks 中的实战案例：一个时间轴串起六种动画——gsap 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 中入门 GSAP（用 data 属性在构建器里管理动画）
教程：Bricks 中入门 GSAP（用 data 属性在构建器里管理动画）——gsap 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中使用 IsotopeJS 创建筛选器（第四部分）：AJAX 筛选与无限循环、排序、列表视图与禁用动画
实战技巧：在 Bricks 中使用 IsotopeJS 创建筛选器（第四部分）：AJAX 筛选与无限循环、排序、列表视图与禁用动画——animation 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读为 Bricks 编辑器添加一键折叠所有元素按钮
教程：在 Bricks 编辑器外框中添加 COLLAPSE ALL 按钮，一键折叠左侧元素面板的所有分类，含完整 PHP 与 JS 代码。
Ray Chan·2026 / 08 / 18·约 3 分读为分享 Bricks 设计添加一键复制到剪贴板按钮
教程：在 Bricks 中添加一键复制按钮，访客可单击把你的 Bricks 元素 JSON 复制到剪贴板，含完整 JS 与 ACF 函数代码。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中创建可变宽度的全宽网格布局
教程：在 Bricks 中用 CSS Grid 命名区域实现 700px 居中正文 + 宽/更宽/全宽/侧栏多档可变宽度布局，含完整 CSS 与 PHP 代码。
Ray Chan·2026 / 08 / 18·约 3 分读用 BricksExtras 与 WP Grid Builder 在 Bricks 中实现动态文章轮播
教程：在 Bricks 中用 BricksExtras 的 Pro Slider 配合 WP Grid Builder 筛选，让轮播在筛选后重新初始化，含完整 JS 与 PHP 代码。
Ray Chan·2026 / 08 / 18·约 3 分读为 Bricks 元素添加自定义控制字段
教程：利用 Bricks 的 bricks/elements/{name}/controls 过滤器为任意元素添加自定义控制字段，并动态修改 CSS 属性，含完整 PHP 代码。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中集成自定义 SwiperJS 轮播
教程：在 Bricks 中用 SwiperJS 库实现自定义轮播，并通过 JSON 数据属性传入参数，含完整 JS 与配置代码，可直接复用。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中为多个查询循环应用同一个自定义查询参数
教程：在 Bricks 中用 bricks/posts/query_vars 过滤器，为多个查询循环批量应用自定义 meta_query 与排序，含完整 PHP 代码。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中将查询循环显示为三列布局
教程：在 Bricks 中用 Flexbox、CSS Grid 与 column-count 三种方式把查询循环容器排成三列，含可直接粘贴的 CSS 代码。
Ray Chan·2026 / 08 / 18·约 3 分读用 ACF Pro 与 Bricks 从前端提交表单动态填充嵌套轮播
教程：在 Bricks 中用 ACF Pro 前端表单提交，动态填充 Nestable Slider 推荐轮播，含页面模板与表单完整 PHP 代码。
Ray Chan·2026 / 08 / 18·约 3 分读用 ACF 从 CPT 动态填充 Bricks 地图标记（PART 1）
教程：在 Bricks 中用 Leaflet 与 ACF 从自定义文章类型动态生成地图标记，含完整 PHP 与 JS 代码，可直接复用。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 评论表单中移除姓名与网站字段
教程：在 Bricks 评论表单中移除姓名与网站字段，并保持邮箱为必填项，含完整 PHP 与 CSS 代码。
Ray Chan·2026 / 08 / 18·约 3 分读在 MetaBox 选择字段中输出 HappyFiles 文件夹
教程：用 PHP 抓取全部 HappyFiles 文件夹并输出到 MetaBox 的 select 字段，含完整函数代码，可直接复用。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks Query Loop 条件类名与 data 属性：库存大于 25 加 in-stock
教程：在 Bricks Query Loop 中根据自定义字段（如库存）条件添加 CSS 类名和 data 属性，实现视觉区分。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中使用 Automatic.css 框架
教程：在 Bricks 中接入 Automatic.css（ACSS）框架，通过加载顺序调整与变量覆盖享用其工具类与流体排版，含完整 PHP 与 CSS 代码。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 中使用 WPCodeBox 管理专属代码片段
教程：在 Bricks 站点中用 WPCodeBox 替代或补充子主题来管理 CSS 与 PHP 代码片段，含 Bricks 编辑器内/外框条件判断的完整代码，可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 18·约 3 分读WooCommerce 产品循环模板覆盖：用 Bricks 模板替换默认产品循环
教程：用 Bricks 模板覆盖 WooCommerce 默认产品循环 content-product.php，一套设计全站复用。
Ray Chan·2026 / 08 / 18·约 3 分读在 Bricks 查询循环中集成 WP Grid Builder 筛选器
教程：在 Bricks 查询循环中使用 WP Grid Builder 的 facets 实现实时筛选与搜索，含短代码与查询参数代码，可直接复用。
Ray Chan·2026 / 08 / 18·约 3 分读Bricks 2.4 更新了什么——外贸站值得关心的 6 个新特性实战解读
教程：Bricks 2.4 到底改了啥——Query Loop、全局类、性能与编辑体验的实打实变化，外贸独立站要不要升、升了注意啥。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 编辑器加了元素却不显示？Cloudflare Rocket Loader 惹的祸
教程：Bricks 编辑器后台元素时隐时现或干脆不显示，多半是 Cloudflare Rocket Loader 延迟了编辑器 JS，三招搞定。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 元素条件设置详解——不满足条件的元素直接不渲染
教程：Bricks 元素想按登录状态、用户角色、日期或动态数据来显隐？用元素条件（Conditions）设置，不满足就直接从 HTML 里消失。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 元素悬停样式怎么设？用伪类做 hover 效果实战教程
教程：按钮鼠标悬停变色、上浮，Bricks 用伪类（:hover）实现，不用写一行 JS。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 元素 Style 设置详解——背景、排版、边框、间距一站调
教程：Bricks 元素的 Style 选项卡里每一项（背景 / 排版 / 边框 / 间距 / 阴影 / 变换）是干嘛的、怎么设？一篇讲清。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 精美动画组件 Fancy Animations——滚动入场与悬停动画点选即用
教程：想给 Bricks 元素加滚动入场和鼠标悬停动画？Fancy Animations 这款 Bricks 插件把效果做成预设类，复制类名即可套用，不用手写 CSS。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 从零上手——新手第一个站的学习路线
教程：第一次用 Bricks 不知道从哪开始？这份路线带你走完安装、主题设置、模板、第一个页面的完整路径。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks Layout 布局详解——Section / Container / Block / Div 四件套与 Flexbox
教程：Bricks 的四种布局元素 Section、Container、Block、Div 各用在哪？Flexbox 的换行、方向、对齐、间距怎么设？一篇理顺。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 授权怎么选？终身版与年付版区别及购买建议实战教程
教程：Bricks 从一次性终身授权转向年付订阅，本文讲清两种授权区别和怎么选最划算。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 建站杂项技巧——古腾堡图片点击放大与那些零碎坑
教程：收录几个 Bricks / WordPress 建站中零散但实用的小技巧，比如让古腾堡里的图片点击后灯箱放大。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 产品列表模板怎么建？（自定义内容类型 CPT）
教程：用 Bricks Template 给自定义内容类型（如 Products）建列表模板，Query Loop 继承主查询，分类、分页一次搞定。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks + Rank Math SEO 分析不生效？古腾堡下失效的临时解法实战教程
教程：Bricks 站点在古腾堡里跑 Rank Math SEO 分析失效，临时关掉 Bricks 接管的内容类型即可恢复。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 建站 SEO 教程——轻量主题打底，再把元数据与结构做对
教程：用 Bricks 建站时 SEO 该做哪些事？主题是干净地基，配合 SEO 插件管元数据、保性能、理结构，独立站才上得去排名。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 侧边栏怎么调用？内置小工具法 + 模板法实战教程
教程：Bricks 自带侧边栏入口有坑，用 Section 模板 + Template 元素调用更灵活，本文讲清两种做法。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 制作 Single Product 产品详情模板——用模板系统搞定自定义内容类型的详情页
教程：WooCommerce 商品页或自定义文章类型的详情页没套用你的 Bricks 设计？用模板系统的 Single 条件精准绑定即可。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 站点 SEO 实战——Rank Math 配合 Bricks 的正确姿势
教程：Bricks 站怎么做 SEO？从 Rank Math 集成、XML 站点地图到常见分析不生效的坑，一篇讲清。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 网站速度究竟如何——实测与提速清单
教程：Bricks 站快不快，取决于生成代码质量和你的优化动作。拆解 Bricks 的性能底子，给你一套能直接抄的提速清单。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 模板编辑看不到内容？用 Populate Content 喂预览数据
教程：做 Archive / Single 模板时画布空白，是因为没设预览数据。用 Template Settings 的 Populate Content 让画布显示真实内容再调样式。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 模板功能详解——页眉、页脚、文章详情一次做好全站复用
教程：每个页面重复做页眉页脚太蠢。用 Bricks 模板功能做一次、全站套用，配合条件设置精确控制显示位置。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 主题设置全解——常规、权限、生成器、模板设置一次讲清
教程：Bricks 设置面板里每个标签是干嘛的？常规/权限/生成器/模板四个 Tab 逐项拆解，含断点、REST API、动态数据等实验项避坑。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks Builder VS Elementor——价格、性能、易用性到底差在哪
教程：选 Bricks 还是 Elementor？从授权价格、前端性能、编辑器体验和动态数据四个维度实测对比，帮你下决定。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 建站学习路线：从入门到 B2B 外贸站实战教程总览
教程：Bricks 建站该按什么顺序学——模板、动态数据、WooCommerce、表单、SEO 一条主线串起来。
Ray Chan·2026 / 08 / 15·约 3 分读BricksExtras 是什么——安装与启用高级元素的实战
教程：BricksExtras 给 Bricks 补了 30+ 高级元素（动态表格、OffCanvas、滑动菜单等）。本文讲清它怎么装、怎么按需开启元素。
Ray Chan·2026 / 08 / 15·约 3 分读用 POST SMTP 把 Bricks 表单消息转发到 Gmail——OAuth 2.0 实战
教程：Bricks 自带 Form 但不发邮件，配 POST SMTP + Gmail API 的 OAuth 2.0，让询盘/告警进你收件箱。
Ray Chan·2026 / 08 / 15·约 3 分读Bricks 博客列表页与归档页教程：Query Loop 做文章流 + 分页
Bricks 博客列表页与归档页教程：Query Loop 做文章流 + 分页——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 14·约 3 分读Bricks 博客文章页制作教程：单篇文章怎么排才 SEO 友好
Bricks 博客文章页制作教程：单篇文章怎么排才 SEO 友好——博客模板 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 14·约 3 分读Bricks Container 与 Flexbox 布局入门：建站最该先搞懂的一课
教程：Bricks Container 与 Flexbox 布局入门：建站最该先搞懂的一课——flexbox 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 14·约 3 分读Bricks 页眉页脚制作教程：全站通用的 Header / Footer 怎么搭
Bricks 页眉页脚制作教程：全站通用的 Header / Footer 怎么搭——页眉页脚 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 14·约 3 分读把任意自定义 WP_Query 循环接入 Bricks 查询循环
教程：把任意自定义 WP_Query 循环接入 Bricks 查询循环——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 让元素输出 N 次（N = 自定义字段值）：Array 查询类型实战
教程：Bricks 让元素输出 N 次（N = 自定义字段值）：Array 查询类型实战——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 编辑器界面微调合集（自定义 CSS）
教程：Bricks 编辑器界面微调合集（自定义 CSS）——css 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 建站从零到上线：完整实战指南（适配 Bricks 2.3.x）
教程：Bricks 建站从零到上线：完整实战指南（适配 Bricks 2.3.x）——建站教程 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Oxygen 用户迁移 Bricks 生存指南
教程：Oxygen 用户迁移 Bricks 生存指南——oxygen 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 条件输出教程（Conditions in Bricks Builder）
Bricks 条件输出教程（Conditions in Bricks Builder）——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 中使用 Core Framework
教程：Bricks 中使用 Core Framework——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 自定义动态数据标签入门：把自定义标签加进『选择动态数据』列表
教程：Bricks 自定义动态数据标签入门：把自定义标签加进『选择动态数据』列表——dynamic data 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 自定义字段文本限字数动态标签：{custom_field_word_limit_字段名:数字}
教程：Bricks 自定义字段文本限字数动态标签：{custom_field_word_limit_字段名:数字}——dynamic data 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读WordPress 自定义图片字段头像
教程：WordPress 自定义图片字段头像——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 构建器自定义键盘快捷键：单键插入元素 + Alt+H 切换 :hover
教程：Bricks 构建器自定义键盘快捷键：单键插入元素 + Alt+H 切换 :hover——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 自定义 WooCommerce 账户中心：完整搭建教程
Bricks 自定义 WooCommerce 账户中心：完整搭建教程——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读用 HappyFiles 做下载区
教程：用 HappyFiles 做下载区——happyfiles 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 区块草稿状态控制：一键把区块设为「草稿」不渲染
教程：Bricks 区块草稿状态控制：一键把区块设为「草稿」不渲染——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 动态条件：仅当文章存在手动摘要（Excerpt）时才输出元素
教程：Bricks 动态条件：仅当文章存在手动摘要（Excerpt）时才输出元素——dynamic data 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks Countdown 倒计时元素接入动态日期（旧版过滤器方案 + 2.4 原生支持双版本）
教程：Bricks Countdown 倒计时怎么把日期绑到 ACF 自定义字段？Bricks 2.4 起官方原生支持动态数据，零代码；2.4 之前用 bricks/element/settings 过滤器补全。外贸独立站活动倒计时必看。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 全站浮动元素：Section 模板 + wp_footer 钩子
教程：Bricks 全站浮动元素：Section 模板 + wp_footer 钩子——floating 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读GSAP 在 Bricks 中的实战案例：一个时间轴串起六种动画
教程：GSAP 在 Bricks 中的实战案例：一个时间轴串起六种动画——gsap 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读HappyFiles 文件夹图片的 Bricks 查询循环：三种取图方案
教程：HappyFiles 文件夹图片的 Bricks 查询循环：三种取图方案——happyfiles 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读给 Bricks Gallery 所有图片加自定义 Class（解决 Perfmatters 懒加载图片塌陷）
教程：给 Bricks Gallery 所有图片加自定义 Class（解决 Perfmatters 懒加载图片塌陷）——gallery 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 查询循环布局切换开关
教程：Bricks 查询循环布局切换开关——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 自适应桌面导航栏（溢出自动收纳到 More）
教程：Bricks 自适应桌面导航栏（溢出自动收纳到 More）——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读如何将 Bricks 的 Ctrl/Cmd+Shift+V 快捷键改为前端预览
教程：如何将 Bricks 的 Ctrl/Cmd+Shift+V 快捷键改为前端预览——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读从 Bricks 编辑器排除元素：bricks/builder/elements 过滤器详解
教程：从 Bricks 编辑器排除元素：bricks/builder/elements 过滤器详解——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读单次 AJAX 调用从 API 导入自定义文章：特色图 + 自定义字段
教程：单次 AJAX 调用从 API 导入自定义文章：特色图 + 自定义字段——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读通过 URL 参数 ?tab=xxx 直达 Bricks Tabs 指定标签页（补全实现）
教程：通过 URL 参数 ?tab=xxx 直达 Bricks Tabs 指定标签页（补全实现）——tabs 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读用 ACF 从 CPT 动态填充地图标记（Bricks 地图系列 PART 4：按分类术语过滤）
教程：用 ACF 从 CPT 动态填充地图标记（Bricks 地图系列 PART 4：按分类术语过滤）——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 中调用 API 入门（以 Chuck Norris 语录为例）
教程：Bricks 中调用 API 入门（以 Chuck Norris 语录为例）——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 中入门 GSAP（用 data 属性在构建器里管理动画）
教程：Bricks 中入门 GSAP（用 data 属性在构建器里管理动画）——gsap 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 构建器快捷键添加元素
教程：Bricks 构建器快捷键添加元素——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读用麦当劳点餐理解 JavaScript Promise（订单承诺类比）
教程：用麦当劳点餐理解 JavaScript Promise（订单承诺类比）——javascript 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 输出 Meta Box 设置页里选中文章的数据（PHP 查询实现）
教程：Bricks 输出 Meta Box 设置页里选中文章的数据（PHP 查询实现）——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 嵌套查询循环：按作者分组文章 + 手风琴展开（骨架+钩子补全）
教程：Bricks 嵌套查询循环：按作者分组文章 + 手风琴展开（骨架+钩子补全）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 嵌套查询循环：每个分类各自的 Load More 按钮 + 剩余数量
教程：Bricks 嵌套查询循环：每个分类各自的 Load More 按钮 + 剩余数量——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读[笔记] JavaScript 模块（ES6 Modules）
教程：[笔记] JavaScript 模块（ES6 Modules）——javascript 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 嵌套查询循环：向上取任意层父级循环对象（Parent Query Loop Object）
教程：Bricks 嵌套查询循环：向上取任意层父级循环对象（Parent Query Loop Object）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 相关文章：同作者的其他文章（PHP 查询编辑器实现）
教程：Bricks 相关文章：同作者的其他文章（PHP 查询编辑器实现）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 查询结果数量标签 {query_results_count}：循环外也能判断有无结果
教程：Bricks 查询结果数量标签 {query_results_count}：循环外也能判断有无结果——dynamic data 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读在 Bricks 中查询以特定字母开头的文章
教程：在 Bricks 中查询以特定字母开头的文章——Bricks 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读把 Basic Text 元素默认 HTML 标签从 div 改成 p（复制元素法）
教程：把 Basic Text 元素默认 HTML 标签从 div 改成 p（复制元素法）——basic text 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 12·约 3 分读Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表
教程：Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 按 ACF Gallery 图片数量做动态条件输出
教程：Bricks 按 ACF Gallery 图片数量做动态条件输出——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据
教程：Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 中输出 ACF Relationship 关联文章的数量
教程：Bricks 中输出 ACF Relationship 关联文章的数量——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读ACF Relationship 字段 + Bricks 查询循环：显示关联文章
教程：ACF Relationship 字段 + Bricks 查询循环：显示关联文章——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 查询循环按 ACF Repeater 子字段值筛选行
教程：Bricks 查询循环按 ACF Repeater 子字段值筛选行——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 按 ACF Repeater 子字段排序行
教程：Bricks 按 ACF Repeater 子字段排序行——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 中按 Select 筛选值条件隐藏其他筛选器
教程：Bricks 中按 Select 筛选值条件隐藏其他筛选器——frontend filters 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 用过滤器自定义面包屑（替换 Uncategorized 链接）
教程：Bricks 用过滤器自定义面包屑（替换 Uncategorized 链接）——breadcrumbs 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 按发布年份过滤文章（自动打年份标签 + WP Grid Builder 筛选）
教程：Bricks 按发布年份过滤文章（自动打年份标签 + WP Grid Builder 筛选）——filter 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 前端按日期选择器字段过滤文章（URL 状态同步）
教程：Bricks 前端按日期选择器字段过滤文章（URL 状态同步）——frontend filters 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 自定义查询类型：循环输出 Meta Box Checkbox List 值
教程：Bricks 自定义查询类型：循环输出 Meta Box Checkbox List 值——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 自定义查询类型：输出 Meta Box 可克隆字段
教程：Bricks 自定义查询类型：输出 Meta Box 可克隆字段——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 嵌套查询循环：CPT 循环里套 Meta Box Group 循环
教程：Bricks 嵌套查询循环：CPT 循环里套 Meta Box Group 循环——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 输出 Meta Box 图片高级字段的随机一张图
教程：Bricks 输出 Meta Box 图片高级字段的随机一张图——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Meta Box Relationship 字段 + Bricks 查询循环：显示关联文章
教程：Meta Box Relationship 字段 + Bricks 查询循环：显示关联文章——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 按 Meta Box Group 子字段排序文章
教程：Bricks 按 Meta Box Group 子字段排序文章——meta box 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop 三种三栏布局方案（Flexbox / CSS Grid / Masonry）
教程：Bricks Query Loop 三种三栏布局方案（Flexbox / CSS Grid / Masonry）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读WordPress 单篇文章页里给其他文章列表加 AJAX 分页
教程：WordPress 单篇文章页里给其他文章列表加 AJAX 分页——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop 高亮当前文章：给循环项加 data-current 属性
教程：Bricks Query Loop 高亮当前文章：给循环项加 data-current 属性——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop：精选文章置顶且不重复（PHP 查询实现）
教程：Bricks Query Loop：精选文章置顶且不重复（PHP 查询实现）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop 按 Meta Box Group 的 Radio 子字段筛选文章
教程：Bricks Query Loop 按 Meta Box Group 的 Radio 子字段筛选文章——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读HappyFiles 文件夹图片用 Bricks Query Loop 输出（三种方式）
教程：HappyFiles 文件夹图片用 Bricks Query Loop 输出（三种方式）——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop 加载更多（Load More）按钮教程
Bricks Query Loop 加载更多（Load More）按钮教程——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Query Loop 只输出自定义字段里指定的文章 ID
教程：Bricks Query Loop 只输出自定义字段里指定的文章 ID——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Templates Query Loop：在查询循环里显示模板截图
教程：Bricks Templates Query Loop：在查询循环里显示模板截图——query loop 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Terms 查询按文章自定义字段过滤（公开职位案例）
教程：Bricks Terms 查询按文章自定义字段过滤（公开职位案例）——terms query 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks Terms 查询预过滤：只输出未来年份（bricks/terms/query_vars）
教程：Bricks Terms 查询预过滤：只输出未来年份（bricks/terms/query_vars）——terms query 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 判断 WooCommerce 购物车是否为空（条件渲染）
教程：Bricks 判断 WooCommerce 购物车是否为空（条件渲染）——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 将 WooCommerce 产品分类图片设为 Section 背景
教程：Bricks 将 WooCommerce 产品分类图片设为 Section 背景——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 打造自定义 WooCommerce 账户中心（My Account Dashboard）
教程：Bricks 打造自定义 WooCommerce 账户中心（My Account Dashboard）——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 在 My Account 页面标题后追加 WooCommerce 端点名称
教程：Bricks 在 My Account 页面标题后追加 WooCommerce 端点名称——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 查询循环只显示促销中（On Sale）的 WooCommerce 产品
教程：Bricks 查询循环只显示促销中（On Sale）的 WooCommerce 产品——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 按 WooCommerce 产品属性值条件渲染元素
教程：Bricks 按 WooCommerce 产品属性值条件渲染元素——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 让 WooCommerce 数量输入框与加入购物车按钮并排
教程：Bricks 让 WooCommerce 数量输入框与加入购物车按钮并排——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读Bricks 移除 WooCommerce 产品图库中的特色图片
教程：Bricks 移除 WooCommerce 产品图库中的特色图片——woocommerce 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。
Ray Chan·2026 / 08 / 11·约 3 分读