在 Bricks 中使用 WPCodeBox 管理专属代码片段

如果你正在为 Bricks 站点寻找子主题（child theme）的替代方案，或想找一个能更灵活注入代码的互补工具，WPCodeBox 会非常顺手。它是一款优秀的代码片段管理插件。本教程介绍如何借助 WPCodeBox 的条件（condition）功能，让代码片段精确运行在 Bricks 编辑器的「外框」或「画布」中。

注：本文原文发布于 2024 年 5 月 9 日。原站提到 WPCodeBox 提供 25% 折扣优惠码 WPDEVDESIGN，按需使用即可。

在 Bricks 编辑器中添加 CSS

当你想在 Bricks 编辑器（builder）的结构面板里高亮当前选中的元素时，可以新建一段 CSS 片段，并让它只在编辑器外框生效：

1. 点击 New Snippet（新建片段）。
2. 填写标题，例如「Bricks Editor CSS」。
3. 将 Type 改为 CSS。
4. 点击 Open condition builder，再点击 Add Condition。
5. 在 Location 处选择 Custom PHP Condition，并填入：

<?php

bricks_is_builder_main();

6. 点击 Save and close。
7. 粘贴你的 CSS 代码。

下面是一段示例 CSS，用于让结构面板中「当前激活元素」的高亮更醒目：

/* --- Make highlight of the active element in structure more prominent --- */
#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent);
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active>.structure-item input::selection {
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active .structure-item:hover .actions .action .bricks-svg-wrapper path {
  fill: #111;
}

保存并启用该片段，打开或刷新 Bricks 编辑器页面（确保页面中至少有 1 个元素），选中任意元素即可看到高亮效果。

bricks_is_builder_main() 在外框（outer frame）中返回 true。因此上面的自定义条件告诉 WPCodeBox：这段代码只在 Bricks 编辑器的外框中运行，而不会作用于内嵌画布（也就是你真正的页面/模板）。

相关阅读：为 Bricks 元素添加自定义控制字段，可参考 为元素添加自定义控制字段。

仅在 Bricks 编辑器画布运行代码

有些片段只需要运行在 Bricks 画布（canvas）中，例如为编辑器中的元素添加描边。对应的条件是：

<?php 
bricks_is_builder() && ! bricks_is_builder_main();

需要注意的是：截至 WPCodeBox v1.4.1，通过云端下载代码片段时，自定义 PHP 条件不会被保留。作为变通方案，你可以把条件代码粘贴到 Description 字段里，方便之后复制使用。

Bricks 条件函数速查

下面整理了常用的 Bricks 条件函数组合：

外框与画布都运行：

if ( bricks_is_builder() ) {
}

仅外框：

if ( bricks_is_builder_main() ) {
}

仅画布：

if ( bricks_is_builder() && ! bricks_is_builder_main() ) {
}

在画布（内框）与前端运行，但不在编辑器面板（外框）运行：

if ( ! bricks_is_builder_main() ) {
}

仅前端：

if ( bricks_is_frontend() ) {
}

或者：

if ( ! bricks_is_builder() && ! is_admin() ) {
}

小结

WPCodeBox 让你无需修改子主题就能在 Bricks 站点中按需注入 CSS 与 PHP 代码。关键在于利用 bricks_is_builder_main()、bricks_is_builder()、bricks_is_frontend() 等条件函数，把代码片段精确限定在编辑器外框、画布或前端。配合本文的速查表，你可以快速搭建属于自己的 Bricks 开发片段库。

站长

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.

获取报价 →浏览全部教程