教程教程
Bricks 建站实操教程——查询循环、动态数据、ACF、WooCommerce、性能优化,每篇都实测过、带可复制代码。
把任意自定义 WP_Query 循环接入 Bricks 查询循环
有时候我们需要用 Brickshttps://brickslabs.com/go/bricks 的查询循环功能做自定义文章循环,但又想用自己的 WP_Query 代码来获得更多灵活性。
Bricks 让元素输出 N 次(N = 自定义字段值):Array 查询类型实战
Bricks 2.2 新增 Array 查询类型,配合 {echo:} 函数把元素按自定义字段的数值重复输出 N 次。付费原文锁定,官方钩子补全实现。
Bricks 编辑器界面微调合集(自定义 CSS)
本文是 Bricks 编辑器的一些可用微调合集,让日常建站更顺手。「更好」当然因人而异,不是每一条都适合所有人。
Bricks 建站从零到上线:完整实战指南(适配 Bricks 2.4)
从安装、基础设置到模板体系搭建的完整 Bricks 建站流程。每步都讲清楚为什么这么配、配完怎么验证,并标注 2.x 版本下的过时项——照着做,半天搭出可上线的站。
Oxygen 用户迁移 Bricks 生存指南
这里整理了一些给从 Oxygen 切换到(或考虑切换到)Bricks Builder 的用户的小贴士和常见问题解答。
Bricks 条件输出教程(Conditions in Bricks Builder)
当时版本的 Brickshttps://brickslabs.com/go/bricks 还没有内置的条件(Conditions)功能——但这不代表不能用自定义代码手动实现。
Bricks 中使用 Core Framework
Core Frameworkhttps://coreframework.com/ 是一个免费 CSS 框架,可以独立使用(在他们官网的 webapp 里)。
Bricks 自定义动态数据标签入门:把自定义标签加进『选择动态数据』列表
Bricks 里注册自己的动态数据标签,让自定义数据出现在动态数据选择器里。付费原文锁定,给出官方钩子补全实现(Parent link 案例)。
Bricks 自定义字段文本限字数动态标签:{custom_field_word_limit_字段名:数字}
给 ACF / Meta Box / JetEngine 的文本字段输出加字数限制并自动追加省略号。注册自定义动态数据标签,官方钩子补全实现。
WordPress 自定义图片字段头像
有时候你可能不想用 WordPress 内置的头像功能,而是改用图片类型自定义字段来做头像。
Bricks 构建器自定义键盘快捷键:单键插入元素 + Alt+H 切换 :hover
这篇文章提供一段代码,给 Bricks 编辑器配置几个自定义键盘快捷键,让建站工作流更快一些。
Bricks 自定义 WooCommerce 账户中心:完整搭建教程
有人在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity/posts/1311323746198809/里提问:
用 HappyFiles 做下载区
除了正在连载的「用 HappyFiles、Meta Box 和 Brickshttps://brickslabs.com/go/bricks 做自定义画廊与滑块」系列之外,作者还写了一个能输出指定文件夹所有子文件夹的代码…
Bricks 区块草稿状态控制:一键把区块设为「草稿」不渲染
Laurent Drapeau 在 Bricks Facebook 群组https://www.facebook.com/groups/brickscommunity/posts/1068186667179186/里分享…
Bricks 动态条件:仅当文章存在手动摘要(Excerpt)时才输出元素
Bricks 里用 {echo:函数} 动态条件判断文章是否手动填写了摘要,有才显示摘要区块。完整 PHP 函数 + 白名单 + 条件配置三步搞定。
Bricks Countdown 倒计时元素接入动态日期(bricks/element/settings 补全实现)
Bricks 自带 Countdown 元素的日期不支持动态数据,无法从自定义字段取值。用官方过滤器在渲染前把日期替换成 ACF Date Time Picker 字段值。付费教程,本文给骨架并用官方钩子补全实现。
Bricks 全站浮动元素:Section 模板 + wp_footer 钩子
需要在全站每页都显示一个浮动元素(回到顶部、悬浮联系按钮等)?用 Section 类型模板 + position: fixed + wp_footer 钩子,一次搭建全站生效,这是 Bricks 社区公认的理想做法。
GSAP 在 Bricks 中的实战案例:一个时间轴串起六种动画
在这篇教程里,我们要创建一个包含多种流行 GSAP 动画的自定义时间轴(timeline),并把它集成到 Bricks Builder 中。
HappyFiles 文件夹图片的 Bricks 查询循环:三种取图方案
这篇教程探索:用 HappyFileshttps://happyfiles.io/ 整理过的 WordPress 媒体库图片,如何通过 Bricks 的查询循环(query loop)拉取并展示出来。
给 Bricks Gallery 所有图片加自定义 Class(解决 Perfmatters 懒加载图片塌陷)
Perfmatters 懒加载会让 Gallery 图片互相塌陷叠在一起,而官方默认类名太通用没法精准定位。用官方过滤器给 Gallery 输出的每张图片追加专属 class,再在 Perfmatters 里指定它跳过懒加载。付费教程,本文补全实现。
Bricks 查询循环布局切换开关
这篇教程教你:当用户点击查询循环上方的图标切换按钮时,动态改变查询循环容器的布局。
Bricks 自适应桌面导航栏(溢出自动收纳到 More)
这篇教程教你:当桌面端导航栏溢出时,自动添加一个「More」菜单项。
如何将 Bricks 的 Ctrl/Cmd+Shift+V 快捷键改为前端预览
Ctrl+Shift+V 在 Windows 里是「无格式粘贴」的常用快捷键。偏偏 Bricks 编辑器也用这组键来在前端查看当前正在编辑的页面/文章/模板。
从 Bricks 编辑器排除元素:bricks/builder/elements 过滤器详解
Bricks 提供了一个好用的 bricks/builder/elementshttps://academy.bricksbuilder.io/article/filter-bricks-builder-elements…
单次 AJAX 调用从 API 导入自定义文章:特色图 + 自定义字段
本教程将演示如何通过抓取一个公开 API,把一批电影(含图片和自定义字段)导入到自定义文章类型中。
通过 URL 参数 ?tab=xxx 直达 Bricks Tabs 指定标签页(补全实现)
分享链接想让访客直接打开第 2 个标签页?给 URL 加 ?tab=title-2 参数,页面加载时脚本按参数自动切换到对应标签。付费教程,本文给骨架并用官方 DOM 结构补全实现。
用 ACF 从 CPT 动态填充地图标记(Bricks 地图系列 PART 4:按分类术语过滤)
本教程提供 PHP 与 JS 代码,让你在 Brickshttps://brickslabs.com/go/bricks 构建器中实现:根据某个分类法(taxonomy)的术语(term)来过滤地图上的标记。
Bricks 中调用 API 入门(以 Chuck Norris 语录为例)
本教程通过从公共 API 拉取一条动态的 Chuck Norris 语录,带你掌握在 Bricks 中调用 API 的基础流程。
Bricks 中入门 GSAP(用 data 属性在构建器里管理动画)
本教程教你如何在 Bricks Builder 里,用特定 data 属性中的 JSON 对象运行基础 GSAP 动画。
Bricks 构建器快捷键添加元素
Advanced Themerhttps://advancedthemer.com/(下文简称 AT)打算加一个很实用的功能:按下 Cmd/Ctrl + Shift 会在右侧边栏的元素快捷键上显示数字,输入数字就会点击对…
用麦当劳点餐理解 JavaScript Promise(订单承诺类比)
作者把这个类比改了一点、补充了更多细节,然后让 AI 补全。下面是最终成品——用麦当劳点餐来理解 Promise:
Bricks 输出 Meta Box 设置页里选中文章的数据(PHP 查询实现)
Meta Box 设置页的 Post 类型字段选了一篇文章,如何在页面上输出那篇文章的标题、正文和自定义字段?用 Bricks PHP 查询编辑器。付费原文锁定,给出补全实现。
Bricks 嵌套查询循环:按作者分组文章 + 手风琴展开(骨架+钩子补全)
Bricks 按作者分组展示文章的嵌套查询循环:外层循环作者、内层循环该作者文章。付费原文锁定,给出官方钩子补全实现。
Bricks 嵌套查询循环:每个分类各自的 Load More 按钮 + 剩余数量
分类分组嵌套循环里,每个分类的 Load More 互不干扰且带剩余篇数。付费原文锁定,给出基于官方钩子的补全实现思路。
[笔记] JavaScript 模块(ES6 Modules)
作者最近开始了转全栈开发的旅程,正在写一个系列,记录每天学到的东西。这篇关于 ES6 模块 的文章就是系列的第一篇。
Bricks 嵌套查询循环:向上取任意层父级循环对象(Parent Query Loop Object)
嵌套查询里如何拿到任意层父级循环的对象(分类 ID、文章 ID 等)?两种方式:按元素 ID 取,或用自定义函数按层级动态取。付费原文锁定,官方钩子补全实现。
Bricks 相关文章:同作者的其他文章(PHP 查询编辑器实现)
单篇页展示当前文章作者写过的其他文章,排除当前文章。用 Bricks PHP 查询编辑器 + 动态数据 {author_meta:ID} {post_id} 一行参数搞定。
Bricks 查询结果数量标签 {query_results_count}:循环外也能判断有无结果
Bricks 1.9.1 起内置 {query_results_count:bricksid} 动态标签,可基于元素 ID 获取任意查询的结果数,在循环外做条件渲染,零代码。
在 Bricks 中查询以特定字母开头的文章
想在 Bricks 里显示所有以某个字母(比如 A)开头的文章?这篇教程给你方案。
把 Basic Text 元素默认 HTML 标签从 div 改成 p(复制元素法)
Bricks 的 Basic Text 元素默认输出 div,没有语义还烦人。通过把官方元素文件复制到子主题并修改默认值,再用 register_element 注册覆盖,让新元素默认输出 p。免费教程完整代码。
WooCommerce 产品循环模板覆盖:用 Bricks 模板替换默认产品循环
Bricks 里的查询循环(query loop)确实强大又方便,但你也肯定不想把自定义的 WooCommerce 产品循环复制粘贴到每个页面里吧?有时候你用 Bricks 把 WooCommerce 设计得挺漂亮,可产…
Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表
把 ACF Checkbox 多选字段的值用 PHP 输出为列表,再用数据 URI 形式的 SVG 背景图替换默认圆点,做出带自定义图标的清单列表效果。
Bricks 按 ACF Gallery 图片数量做动态条件输出
通过自定义函数统计当前文章 ACF Gallery 字段的图片数量,再用 echo 动态数据标签在 Bricks 中按数量做条件显示,比如图片多时显示相册链接。
Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据
ACF 图片字段存的是媒体库附件 ID,附件自带的 Alt、Caption、说明文字都能动态取出来。注册 4 个自定义动态标签,在服务/作品归档页的缩略图下方直接输出,1500 张图也不用手工填字段。
Bricks 中输出 ACF Relationship 关联文章的数量
用自定义函数统计当前文章 ACF Relationship 字段关联的文章数量,再通过 bricks/code/echo_function_names 白名单注册,在 Bricks 动态数据里直接输出数字。
ACF Relationship 字段 + Bricks 查询循环:显示关联文章
Bricks 自带 ACF Relationship 查询类型,但想自由控制排序、分页和输出结构时,用 PHP 查询循环更灵活。本文用 Game/Review 双 CPT 示例讲透 get_field 取关联 ID + post__in 的完整写法。
Bricks 查询循环按 ACF Repeater 子字段值筛选行
团队介绍页想按部门分开显示?ACF Repeater 的每一行都可以在 Bricks 查询循环里按子字段值筛选。用 bricks/query/run 过滤器,按元素 ID 区分多个循环,一个函数搞定所有筛选需求。
Bricks 按 ACF Repeater 子字段排序行
ACF Repeater 的行默认按录入顺序输出,想按某个子字段字母序或日期排序?bricks/query/run 过滤器里 usort 一行搞定,不碰构建器、不用改数据结构。
Bricks 中按 Select 筛选值条件隐藏其他筛选器
访客在 Bricks 前端筛选器里选择某个下拉选项后,自动隐藏与该选项无关的其他筛选器(如范围滑块),避免用户误设互斥条件导致列表为空。
Bricks 用过滤器自定义面包屑(替换 Uncategorized 链接)
Bricks 的 bricks/breadcrumbs/items 过滤器可以程序化修改面包屑输出。例如把单篇文章面包屑里的 /Uncategorized/ 替换成首页链接,附 BricksExtras 面包屑的对应写法。
Bricks 按发布年份过滤文章(自动打年份标签 + WP Grid Builder 筛选)
让文章的发布年份自动成为自定义分类法的术语,再用 WP Grid Builder 在 Bricks 查询循环上按年份筛选。原文为付费教程,本文给出骨架并用 WP 官方钩子补全实现。
Bricks 前端按日期选择器字段过滤文章(URL 状态同步)
让访客通过日期选择器筛选任意文章类型的内容(如按活动日期筛选活动),支持 from/to/date 三种 URL 参数,并兼容浏览器前进后退。
Bricks 自定义查询类型:循环输出 Meta Box Checkbox List 值
Checkbox List 勾选的值是一个数组,Bricks 查询循环默认没法直接逐项输出。注册一个自定义查询类型,把数组的每一项变成一个循环项——这套模式能循环任意 PHP 数组,不止 Checkbox List。
Bricks 自定义查询类型:输出 Meta Box 可克隆字段
Meta Box 可克隆(Cloneable)字段存了一组同类型值,比如一门课的多个上课日期。注册自定义查询类型把它们变成循环项,用 Basic Text 等元素自由排版;再用计数标签做条件,没填值就整块不显示。
Bricks 嵌套查询循环:CPT 循环里套 Meta Box Group 循环
课程列表页上,每个课程下面要列出它自己的日程事件?外层查询循环查 CPT,内层查询循环用 Bricks 内置的 MB Group 类型读当前文章的 Group 字段——两层循环自动对齐,几乎不用写代码。
Bricks 输出 Meta Box 图片高级字段的随机一张图
用自定义函数把 Meta Box Image Advanced 字段的图片数组打乱后取一张,配合 echo 动态数据在 Bricks 中输出随机图片,适合横幅、背景或每日一图场景。
Meta Box Relationship 字段 + Bricks 查询循环:显示关联文章
Bricks 内置的 MB Relationship 查询类型之外,用 PHP 查询编辑器自己控制更灵活。rwmb_meta 取出关联 ID 数组,post__in 喂给查询循环,附带空值兜底和双向关联的设置方法。
Bricks 按 Meta Box Group 子字段排序文章
Order by 控件只能按顶层自定义字段排序,字段一旦包在 Group 里就没辙了。用 bricks/query/result 过滤器在结果层重排:取 ID、按子字段值比较、重建文章对象,有值的排前面,空值沉底。
Bricks Query Loop 三种三栏布局方案(Flexbox / CSS Grid / Masonry)
在 Bricks 里把 Query Loop 排成 3 列:Flexbox 原生无 CSS、CSS Grid 两种变量方案、column-count 瀑布流,附完整代码和断点配置。
WordPress 单篇文章页里给其他文章列表加 AJAX 分页
在单篇模板中显示一列文章并做 AJAX 分页,WordPress 原生做不到。用免费插件 Loops & Logic 几步搞定,含完整模板代码。
Bricks Query Loop 条件类名与 data 属性:库存大于 25 加 in-stock
给查询循环的每一项按条件加类名或 data 属性:自定义函数读 ACF/Meta Box 字段值并返回类名,配合白名单和 STYLE → ATTRIBUTES 实现。
Bricks Query Loop 高亮当前文章:给循环项加 data-current 属性
在单篇文章页的导航列表里高亮当前文章:自定义函数 bl_is_current_post 对比循环文章 ID 与当前文章 ID,输出 data-current 属性,纯 CSS 即可定位样式。
Bricks Query Loop:精选文章置顶且不重复(PHP 查询实现)
把最新 2 篇 ACF 精选文章排到 Query Loop 最前面,其余按日期排序且不重复。一套 PHP 查询搞定:分两步取 ID、合并数组、post__in 保持顺序。
Bricks Query Loop 按 Meta Box Group 的 Radio 子字段筛选文章
筛选出「会话类型」等于指定值的文章:Meta Box 可克隆组里套 Radio 子字段,用 meta_query LIKE 匹配 PHP 序列化串。附完整代码和原理。
HappyFiles 文件夹图片用 Bricks Query Loop 输出(三种方式)
把 HappyFiles 分类好的媒体库图片用 Bricks 查询循环展示:嵌套循环、单个 PHP 查询、BricksExtras Dynamic Lightbox 三套方案,附完整代码。
Bricks Query Loop 加载更多(Load More)按钮教程
Bricks 自带 AJAX Load More 功能,无需任何插件。本文演示如何在查询循环(Query Loop)上配置点击加载更多,以及 ACSS 用户必加的全局 CSS。
Bricks Query Loop 只输出自定义字段里指定的文章 ID
自定义字段存了一组文章 ID,查询循环只想输出这些文章。用 Bricks 的 PHP 查询编辑器一行代码搞定,无需自定义查询或钩子。
Bricks Templates Query Loop:在查询循环里显示模板截图
Bricks 1.10 起支持模板截图。本文用自定义函数回退到自动生成的模板截图,让模板库的 Query Loop 也能显示每张模板的缩略图。
Bricks Terms 查询按文章自定义字段过滤(公开职位案例)
在 Bricks 的 Terms 查询循环中,只显示关联了特定自定义字段值的文章所归属的术语。以职位可见性字段为例,通过 bricks/terms/query_vars 过滤术语列表。
Bricks Terms 查询预过滤:只输出未来年份(bricks/terms/query_vars)
在 Bricks 的 Terms 查询循环中按术语值本身过滤,例如活动年份分类法只显示未来的非空年份,通过 bricks/terms/query_vars 官方钩子实现。
Bricks 判断 WooCommerce 购物车是否为空(条件渲染)
根据购物车是否为空条件渲染元素:注册一个自定义函数并白名单化,再用 Bricks 动态数据条件 {echo:bl_is_cart_empty} 控制任意元素显示。
Bricks 将 WooCommerce 产品分类图片设为 Section 背景
在 WooCommerce 产品分类归档模板中,把分类缩略图作为 Section 背景图。注册一个返回分类图片 URL 的自定义函数,白名单化后用 {echo:...} 动态数据标签填进背景。
Bricks 打造自定义 WooCommerce 账户中心(My Account Dashboard)
WooCommerce 自带的 Account Page 元素很受限。用 Bricks 的账户构建器从零搭一个左侧固定导航 + 右侧内容区的自定义账户中心,含导航覆盖、链接配色与端点模板完整步骤。
Bricks 在 My Account 页面标题后追加 WooCommerce 端点名称
WooCommerce 的 My account 各端点页(订单/下载/地址/账户详情)标题都一样。用自定义函数识别当前端点并拼接后缀,让页面标题变成『订单 - Orders』这种可区分的文案。
Bricks 查询循环只显示促销中(On Sale)的 WooCommerce 产品
在 Bricks Query Loop 中只输出正在促销的产品。原文为付费教程,本文给出场景与步骤骨架,并用 Bricks 官方钩子 bricks/posts/query_vars 补全实现。
Bricks 按 WooCommerce 产品属性值条件渲染元素
WooCommerce 产品属性本质是 taxonomy,可以在 Bricks 里按属性值做元素条件判断。例如属性 color=Red 时显示某个视频/区块。含 :plain 过滤器说明。
Bricks 让 WooCommerce 数量输入框与加入购物车按钮并排
WooCommerce 单产品页默认数量输入框和加入购物车按钮上下排列。用一段 Flex 布局 CSS 让它们水平并排,无需改模板。
Bricks 移除 WooCommerce 产品图库中的特色图片
WooCommerce 单产品页图库默认把特色图也算进去。用 woocommerce_single_product_image_thumbnail_html 过滤器把特色图从图库中剔除,只显示附加图库图片。