「wordpress」
共 54 篇相关教程
Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）
本教程教你用 100% 纯 CSS 在 Bricks 里实现内容切换器（content switcher）——在多个内容区块间切换显示，典型场景如价格表（pricing tables）切换、功能特性切换，不需要任何 JS…
把任意自定义 WP_Query 循环接入 Bricks 查询循环
有时候我们需要用 Brickshttps://brickslabs.com/go/bricks 的查询循环功能做自定义文章循环，但又想用自己的 WP_Query 代码来获得更多灵活性。
Bricks 编辑器界面微调合集（自定义 CSS）
本文是 Bricks 编辑器的一些可用微调合集，让日常建站更顺手。「更好」当然因人而异，不是每一条都适合所有人。
Bricks 建站从零到上线：完整实战指南（适配 Bricks 2.4）
从安装、基础设置到模板体系搭建的完整 Bricks 建站流程。每步都讲清楚为什么这么配、配完怎么验证，并标注 2.x 版本下的过时项——照着做，半天搭出可上线的站。
Oxygen 用户迁移 Bricks 生存指南
这里整理了一些给从 Oxygen 切换到（或考虑切换到）Bricks Builder 的用户的小贴士和常见问题解答。
Bricks vs Breakdance 2026：性能优先派的巅峰对决
Bricks 还是 Breakdance？本文对比 2026 年两个干净代码构建器的性能基准、价格模式、动态数据能力、WooCommerce 建站和工作流差异，给出选型建议。
Bricks vs Divi 2026：性能与控制力的对决
Bricks 还是 Divi？本文对比 2026 年两者的性能、价格、代码质量、动态数据、WooCommerce 能力和工作流，给出诚实的选型结论。
Bricks 条件输出教程（Conditions in Bricks Builder）
当时版本的 Brickshttps://brickslabs.com/go/bricks 还没有内置的条件（Conditions）功能——但这不代表不能用自定义代码手动实现。
Bricks 中使用 Core Framework
Core Frameworkhttps://coreframework.com/ 是一个免费 CSS 框架，可以独立使用（在他们官网的 webapp 里）。
在 Bricks Builder 中制作可自定义的 AJAX 加购按钮
在 Brickshttps://brickslabs.com/go/bricks 中，你可以用动态数据/函数 {woo_add_to_cart} 直接创建一个加购按钮。只要在 WooCommerce > Settings…
为 SureCart 产品制作自定义加购按钮（含加载动画与 Tooltip）
Brickshttps://brickslabs.com/go/bricks 对 SureCarthttps://brickslabs.com/go/surecart v3+ 的集成提供了现成的「加购按钮（Add-to-…
Bricks 滚动自定义动画：无需任何插件的 IntersectionObserver 方案
本教程提供一套 JavaScript + CSS 代码，让你在 Bricks Builderhttps://brickslabs.com/go/bricks 里实现滚动进入视口时触发的自定义 CSS 动画，全程不需要任何…
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/里分享…
GSAP 在 Bricks 中的实战案例：一个时间轴串起六种动画
在这篇教程里，我们要创建一个包含多种流行 GSAP 动画的自定义时间轴（timeline），并把它集成到 Bricks Builder 中。
HappyFiles 文件夹图片的 Bricks 查询循环：三种取图方案
这篇教程探索：用 HappyFileshttps://happyfiles.io/ 整理过的 WordPress 媒体库图片，如何通过 Bricks 的查询循环（query loop）拉取并展示出来。
Bricks 查询循环布局切换开关
这篇教程教你：当用户点击查询循环上方的图标切换按钮时，动态改变查询循环容器的布局。
Bricks 自适应桌面导航栏（溢出自动收纳到 More）
这篇教程教你：当桌面端导航栏溢出时，自动添加一个「More」菜单项。
如何在 Bricks 中用 RoughNotation.js 实现滚动标注动画
本教程提供可直接粘贴的 PHP 与 JS 代码，让你在 Brickshttps://brickslabs.com/go/bricks Builder 里用 RoughNotation 库https://github.co…
如何将 Bricks 的 Ctrl/Cmd+Shift+V 快捷键改为前端预览
Ctrl+Shift+V 在 Windows 里是「无格式粘贴」的常用快捷键。偏偏 Bricks 编辑器也用这组键来在前端查看当前正在编辑的页面/文章/模板。
用 ACF 和 Bricks 创建动态无限 Logo 轮播
本教程提供完整的构建器设置、PHP 与 CSS 代码，教你用纯 CSS 在 Bricks Builderhttps://brickslabs.com/go/bricks 里做出一个无限循环的 Logo 轮播——Logo …
在 Bricks 中创建网格轮播
本教程教你如何在 Brickshttps://brickslabs.com/go/bricks 默认的嵌套轮播（nested slider）里做出多行多列的网格布局。Bricks 的轮播底层用的是 SplideJShtt…
为 Bricks 嵌套轮播添加进度条
本教程教你如何给 Brickshttps://brickslabs.com/go/bricks 的嵌套轮播（nested slider）元素添加进度条，效果参考 SplideJS 官网的轮播进度示例https://spl…
在 Bricks 中使用 IsotopeJS 创建筛选器（第四部分）：AJAX 筛选与无限循环、排序、列表视图与禁用动画
本教程讲解在 Brickshttps://brickslabs.com/go/bricks 构建器里用 Isotope 实现：给无限滚动查询循环容器启用 AJAX 筛选、添加排序功能、添加列表视图切换器，以及禁用筛选时的…
从 Bricks 编辑器排除元素：bricks/builder/elements 过滤器详解
Bricks 提供了一个好用的 bricks/builder/elementshttps://academy.bricksbuilder.io/article/filter-bricks-builder-elements…
单次 AJAX 调用从 API 导入自定义文章：特色图 + 自定义字段
本教程将演示如何通过抓取一个公开 API，把一批电影（含图片和自定义字段）导入到自定义文章类型中。
用 ACF 从 CPT 动态填充地图标记（Bricks 地图系列 PART 4：按分类术语过滤）
本教程提供 PHP 与 JS 代码，让你在 Brickshttps://brickslabs.com/go/bricks 构建器中实现：根据某个分类法（taxonomy）的术语（term）来过滤地图上的标记。
Bricks 中同步两个可嵌套轮播（主轮播 + 缩略图联动）
本教程教你如何在 Bricks 中同步两个可嵌套（nestable）轮播：一个作为主轮播，另一个作为缩略图轮播。
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 会在右侧边栏的元素快捷键上显示数字，输入数字就会点击对…
Bricks 手风琴（Nestable）：第一项桌面端展开、移动端收起
在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity里，有用户提问：
用麦当劳点餐理解 JavaScript Promise（订单承诺类比）
作者把这个类比改了一点、补充了更多细节，然后让 AI 补全。下面是最终成品——用麦当劳点餐来理解 Promise：
从 Elementor/Divi 迁移到 Bricks：完整分步指南
手把手教你把 WordPress 站点从 Elementor、Divi 或 WPBakery 迁移到 Bricks——内容、设计系统、WooCommerce 与 SEO 全流程拆解。
把色板选择器移到颜色弹窗顶部
在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity/里，有用户提问：
[笔记] JavaScript 模块（ES6 Modules）
作者最近开始了转全栈开发的旅程，正在写一个系列，记录每天学到的东西。这篇关于 ES6 模块 的文章就是系列的第一篇。
用按钮 data 属性填充 BricksExtras 弹窗中的 WS Form 表单字段
本教程演示如何把打开弹窗（Modal）的按钮/链接上的 data- 属性值，填充到 BricksExtrashttps://bricksextras.com/ 的 Modal 内 WS Formhttps://brick…
在 Bricks 中查询以特定字母开头的文章
想在 Bricks 里显示所有以某个字母（比如 A）开头的文章？这篇教程给你方案。
Bricks 页脚滑动露出效果（Sticky Footer Reveal）
想让 Bricks 网站的页脚做出这种「滑动露出」的效果吗？——平时页脚藏在页面底部看不见，滚动到最底部时它才从下方滑出来，而不是一直占据页面空间。
WooCommerce 产品循环模板覆盖：用 Bricks 模板替换默认产品循环
Bricks 里的查询循环（query loop）确实强大又方便，但你也肯定不想把自定义的 WooCommerce 产品循环复制粘贴到每个页面里吧？有时候你用 Bricks 把 WooCommerce 设计得挺漂亮，可产…
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 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 序列化串。附完整代码和原理。
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/query_vars）
在 Bricks 的 Terms 查询循环中按术语值本身过滤，例如活动年份分类法只显示未来的非空年份，通过 bricks/terms/query_vars 官方钩子实现。