Bricks 的默认值偏「开发者友好」,直接开建常见会踩三类坑:宽度不受控、字体外链拖慢、样式无处存放。先花二十分钟把设置调好。
一、Bricks → Settings(全站层面)
- Root CSS:全站最底层的 CSS 落点。只放自定义属性与重置类规则,别把组件样式写这里。根 CSS 在生成的样式表之前输出,优先级最低,正好适合定义变量
- 使用缓存与生成文件位置:确认样式表可写。改完样式前台不动,先看是不是缓存目录权限问题
- 字体:Bricks 支持把 Google 字体本地托管。建议开启,首屏少一次跨域请求,欧盟站也少一层隐私争议
- 断点:默认桌面、平板、手机三档。外贸站的真实断点建议核对一次:很多布局在 991 与 767 之间会难看,必要时自定义断点值
- 许可与更新:升级前必看 changelog。Bricks 大版本会改部分部件结构与 class,先在测试站点过一遍,并且务必备份,见 八项安全设置
二、代码执行权限(最容易出事的一项)
Bricks 里的 Code 元素、自定义函数、PHP 片段都依赖「允许执行代码」开关。要做的判断是:
- 只有你一个人维护,且你懂 PHP:给自己的管理员角色开启即可
- 有多个编辑、或客户会自己登录后台:对非技术角色一律关闭。一个能执行 PHP 的账号等于交出整站
- 把可用角色设置成最小权限,别为了省事勾 Author 和 Editor
另外,DISALLOW_FILE_EDIT 这类 wp-config 常量会和构建器的代码功能相互影响,改动前先确认你现在靠什么方式写自定义代码。
三、主题设置(Theme → Settings)
- Content width:正文容器宽度,全站统一。Bricks 的 Container 宽度来自这里,不要每个 section 手动写 max-width,否则改一处要改全站。本站把宽度做成 CSS 变量,宽度只在一个地方定义
- 页头与页脚:在模板里指定 Site Header 与 Site Footer,之后所有页面自动带,不要在每个页面复制一份
- 默认颜色与排版:在这里定义 body 与标题的字号、行高、字族,元素里只写例外
四、页面设置(编辑器左下角 Settings)
每个页面与文章都有独立的 Page Settings,四件事必填:
- SEO Title 与 Meta Description:Bricks 会输出这两个字段。留空时前台常常没有 description,谷歌自己编一段。这是落地页最容易白捡的分,见 URL 与 Slug
- Template:选内容模板(Content)还是全宽模板(Full Width),别混着来
- 是否显示页头页脚与面包屑:着陆页常要关掉页头减少跳出
- 评论开关:教程文章开着攒长尾与互动,落地页关掉
五、编辑器效率设置
- 结构树里给元素起可读的名字(Rename),三个月后你会感谢自己
- 用类名而不是 id 控制样式;id 只用于锚点跳转和 JS 挂载
- 善用 Copy styles 与 Paste styles,不要复制整个元素
- 把常用组合存成 Pattern(本地模式),比去模板库下载更可控
- 关掉编辑器内的「显示为框架」类预览开关做移动端真机测试
配好后自测一遍
- 新建一个测试页,改一次全局 Content width,看内页是否统一跟随
- 改一个全局颜色变量,看首页、文章页、页脚是否同时变化
- 无痕窗口看 Network,确认没有 gstatic 字体外链
- 用一个 Editor 角色账号登录,确认看不到执行代码的入口
这些设置的价值在第二次改站时才显现。第一个页面怎么舒服都不重要,第二个页面开始还在手写 max-width,就说明该回到设置了。
接着学布局:容器、Flex 与 Grid。