有朋友是第一次接触 Bricks 主题 ,本篇文章对 Bricks 主题做一个简单的介绍以及成功安装后需要做的一些初步设置。
一、介绍前言
以下内容中的截图全部以英文界面为准,同时为了方便小白进行对比和学习,也会用中文来解释一遍,Bricks主题虽然支持中文,但是有些地方翻译非常的不准确,估计是机器翻译的吧。
直接用英文主要是为了防止给大家造成误解,BricksBuilder 编辑器设计界面中会涉及到一些CSS的基础,建议没有代码背景的朋友去B站或者 YouTube 学习一些基础的CSS。
另外,还有一点,市面上大部分的 WordPress 页面编辑器都是使用英文界面的,专业术语基本一致,可以说是一通百通的东西。在掌握英文的术语后,以后出现其他更优秀的编辑器将能够更容易切换,比如:我之前写过一些Betheme主题的教程,这次切换到Bricks主题基本上毫不费力。
同时,在熟悉英文专业术语后能够查阅大量的国外优质建站和 SEO 的教程,不用再忍受国内众多的采集搬运的内容,对以后深入学习也会有很大帮助;也建议大家学习Bricsk主题时,多看些官方的文档和教学,虽然是英文但可以借助翻译工具,我也是这样一路学过来的。
还没有安装Bricks主题的,请根据上一篇教程学习如何安装和激活,还没有购买正版的朋友可以先使用Bricks主题的免费试用版进一步学习教程内容。
二、Bricks主题后台基本设置
以上啰嗦的太多了,接下来正式开始本篇文章的教学。
打开WordPress后台,点击左侧 Bricks -> Settings -> General
1. General(常规设置)
1.1 Post types(文章类型)
可选择哪些类型的页面可以使用Bricks编辑,一般保持默认。WordPress自带的古腾堡编辑器足够我们编辑文章,后期会同时使用古腾堡的区块插件来拓展一些功能;页面的话选择打开,之后点击新建页面会显示“Edit with Bricks”按钮,可以对页面进行自定义设计。
1.2 Gutenberg data(古腾堡数据)
默认保持关闭,这个功能用不到。
1.3 SVG uploads(SVG 文件上传)
建议 Administrator 用户打开此选项,若是网站只有你自己运营的话建议只给管理员权限,其他用户根据实际情况选择。SVG是一种矢量图片格式,放大后图片不会失真(详细查维基百科),文件也非常小,常用于网站LOGO,WordPress默认是不支持SVG文件上传的,主要是怕文件含有恶意代码,导致网站被攻击;若是用不到SVG格式的图片可以保持默认关闭。
1.4 Miscellaneous(杂项)
- Disable Bricks SEO meta tags(关闭 Bricks SEO 信息配置):该选项打开
- Disable Bricks Open Graph meta tags(关闭 Bricks 图片 Meta 配置):该选项打开。
这里的官方中文翻译非常的不准确,请以英文为准,请打开以上两项。网站的 SEO 配置是使用第三方 SEO 插件(如:Yoast SEO)来设置,打开以上两项可以避免 SEO 配置冲突。
- Smooth scroll CSS(CSS平滑滚动):该选项打开。
- Save form submissions in database (将表格提交的数据保存在数据库):该选项打开。
CSS平滑滚动可以提高用户体验,给用户一种网站更流畅的感觉;默认Bricks表单收到的信息是通过邮件来发送的,需WordPress配置SMTP服务才可以使用,此选项打开后可以将表单信息保存在数据库,直接在WordPress后台即可查看(页面表单时需要进一步设置才能保存到数据库)。
1.5 Query filters(查询过滤器)
增加网站过滤器功能,允许高级实时内容排序、过滤和搜索,而无需刷新页面,从而提供更加动态和交互式的用户体验,默认关闭。
建议使用 Woocommerce 搭建 B2C 类型的独立站商城时可以启用,其他 B2B 类型的外贸企业官网可以不使用。
1.6 Custom breakpoints(自定义断点)
自定义断点,不同设备的屏幕区间大小不一样,现在大部分网站都是自适应网站,能根据不同设备显示不同的文字图片大小,一般使用默认画布尺寸即可。Bricks默认提供了4种尺寸,分别是桌面端(≥992px),平板端(798px-991px),手机横屏端(479px-767px),手机纵屏端(≤478px)。
1.7 Convert(转换)
Bricks主题的一键更新按钮,保持默认关闭即可,这功能一般用不上。
1.8 Custom authentication pages(自定义验证页面)
自定义登录界面设置,默认保持关闭即可。可以为WordPress网站设计统一的漂亮的后台登录界面,如果你的网站需要用户注册或者某些商城站需要用户登录查询订单物流信息的话可以选择开启。
2. Builder access(创作者权限设置)
2.1 Builder access(创作者权限)
默认只给管理员权限即可,其他用户角色需要用到的话看情况给。
2.2 Code execution(代码执行模块)
代码执行功能。Bricks有一个Code小部件,开启这个功能后,Code小部件底下会出现Excute Code的开关。选择执行后,我们Code小部件内添加的代码就可以运行。一般也只给管理员开启这个权限。
3. Templates(模板)
这些都是模板的相关设置,Bricks主题库里面自带的模板太少了,需要自己找一些模板库,从这里填入模板的地址和密码的远程访问。前期一般是用不到的,并且这里的设置选项的中文翻译非常通俗易懂,没有太大错误,可自行选择设置。
4.Builder(生成器)
4.1 Autosave(自动保存)
自动保存,BricksBuilder设计页面过程中自动保存默认是打开的,下方可以设置自动保存的时间间隔,默认是一分钟,可根据自己的需要修改。
4.2 Builder mode(创作模式)
更改BricksBuilder编辑器颜色,默认是灰色。若是懂一些CSS代码的话,你可以自己设计BricksBuilder编辑器的外观样式。
4.3 Language(语言)
默认是根据站点语言来的,建议设置为英文,英文术语熟悉后可以更改站点语言为中文。
4.4 Toolbar logo link(工具栏标志链接)
设置左上角Bricks主题图标的链接,一共是7个选项,我比较推荐设置为第三个“Dashboard” 可以快速返回到WordPress仪表盘。大家根据需要自己选择,下方的按钮是选择使用浏览器新标签页打开。
4.5 Control panel(控制面板)
大部分功能都用不到,保持默认关闭即可。
4.6 Canvas(画布)
画布,建议打开,可以去掉 Section,Container 的默认间隙去掉,方便设计页面的时候控制。
4.7 Structure panel(结构面板)
可增强BricksBuilder编辑器右侧结构面板的功能,个人喜好设置如下:
- Duplicate:打开复制元素功能。
- Delete:打开删除元素功能。
- Collapse on page load:页面加载时折叠。
- Expand active element & Scroll into vie:打开,当你点击某个元素之后右边的面板会自动定位到该元素。
4.8 Element actions(元素)
可以修改插入元素时的包裹类型,建议保持默认为“Block”。这里其实跟Betheme主题的排版元素是一样的,Section、Container、Block这三大排版元素够用了,而 div 元素类型使用的太少了,也不利于整个页面的代码结构。
4.9 Disable WP REST API render(禁用WP REST API渲染)
开启代表使用 AJAX 而不是 WP REST API 调用来呈现元素,能避免一些WordPress的安全隐患,不过我在启用后并没有验证成功,还是需要借助第三方插件来禁用 WP REST API 。
4.10 WP polyfill
设置在构建器中加载 wp-polyfill.min.js 以提高旧版浏览器的兼容性。由于潜在的性能影响,不建议启用。
4.11 Dynamic data(动态数据)
- Render dynamic data text on canvas(在画布上渲染动态数据文本):开启,可以在BricksBuilder编辑器中预览加载的动态数据。
- Expand panel when dropdown is visible(下拉列表显示dynamic data key):开启
- Show dynamic data key in dropdown(当下拉菜单显示时展开面板):开启
以上三项可以帮助显示BricksBuilder中动态数据的详细信息,提高动态数据的体验。
4.12 Global data sync(全局数据同步)
全局数据同步功能只有在多个用户设计同一个页面的时候才会用到,一般企业独立站是用不上的,除非像我这种为客户提供WordPress独立站页面设计的工作室,需要多人协作,才会在本地机器中打开此功能,个人使用保持默认关闭即可。
5. Performance (性能)
5.1 Disable emojis(禁用表情符号)
此选项建议打开,禁用emoji表情,提高WordPress网站加载速度。
5.2 Disable embed(禁用嵌入)
若是网站中会用到Youtube或者B站等外部视频的话,此选项建议保持关闭。嵌入式视频链接能提高公司企业形象,为客户提供更详细的产品信息介绍,也能增加页面的平均互动时长,提高页面权重。
5.3 Disable Google Fonts(禁用谷歌字体)
建议打开,不要加载谷歌字体,不然会严重影响网页的加载速度。若是需要自定义字体的话,可以到WordPress后台,Bricks主题设置下面有自定义字体选项。上传文件时建议使用ttf或woff2格式的。不过我最初测试Bricks主题的自定义字体时,有时候并不能成功在设备上加载,可能是因为CDN的问题,还在解决中……
5.4 Disable lazy loading(禁用懒惰加载)
某些WordPress缓存插件自带懒加载功能那个会与主题的懒加载功能起冲突,若是导致页面显示不正常,可选择打开此选项,禁用懒加载功能。
5.5 Disable jQuery migrate(禁用jQuery迁移)
建议打开,现在最新下载的Bricks主题都大于1.9版本,没有更老的jQuery代码来,打开后可以提高页面打开速度。
5.6 Cache query loops(使用查询循环缓存)
用不到,默认保持关闭
5.7 Disable class chaining( 禁用Class chaning )
用不到,默认保持关闭。
5.8 CSS loading method( CSS 加载方法 )
CSS加载方式推荐使用 External files,加载更快。更改CSS加载方式后点击保存,再点击生成CSS,在保存即可生效
5.9 Webfont loading method(字体加载方式)
禁用谷歌字体后,该选项是看不见的,需要关闭 5.3 中的设置。
默认情况下,通过Stylesheets来加载,即先加载文字,再加载样式,一定程度上给用户带来不流畅的体验,并且在 Google Pagespeed 测试中的 Cumulative Layout Shift 值可能会偏高。
Webfont Loader (JS) 则是先不显示文字,直到字体全部加载完毕才显示,减少了文字偏移,但是网速较慢的话,用户可能已经将页面下拉到底下,很容易忽视位于网页上方位置后续才显示出来的文字。
若是用不到自定义字体就选择禁用谷歌字体,忽略该选项即可。若是需要使用自定义字体,那此选项就选择 Webfont Loader (JS) 加载方式。
6. Maintenance mode(维护模式)
6.1 Mode(模式)
模式是Bricks新增的功能,用于网站未上线时设置,共分3种模式:
- “Maintenance(维护)”模式:HTTP 状态代码为503,表示网站暂时不可用,提示搜索引擎稍后再访问。
- “Coming Soon(即将推出)”模式:HTTP 状态代码为 200,表示网站可供搜索引擎索引,但是用户看不到网站内容。
- Disable 表示不启用该选项。
建议WordPress网站上线前选择搜索引擎不可见(详情见:WrodPress基础之前期7个必要的基本设置),并且若使用Bricks主题的话,再启用 Coming Soon(即将推出)模式。
一切调试好,可以上线时再关闭以上两个选项。这样可以使搜索引擎减少抓取不必要的页面和未设计完成的页面。
6.2 Template(维护页面模板)
维护模式和即将推出模式的页面都可以使用 BricksBuilder 设计,此选项可自己选择页面。
6.3 Bypass maintenance(旁路维护)
设置谁可以绕过维护模式。要向特定用户授予旁路权限,请直接修改该用户的配置文件设置,保持默认即可。
7. API Keys( API 密钥 )
这里主要是设置一些能用到的API密钥,如:Cloudflare表单垃圾验证保护,谷歌验证等,用得到的话,后续可以增加此设置。
8. Custom code(自定义代码)
懂一些Html、JS、CSS代码的话可以添加一些自定义样式,也可以添加GSC和GA代码等等,添加统计代码建议跟着我的教程手动添加。
三、总结
以上就是对整个Bricks主题后台设置的详细介绍,其中有部分设置是能够优化BricksBuilder设计界面和基本操作的,能帮助你更顺畅的使用BricksBuilder编辑器。还有一点,在 Performance(性能)这部分是你重点需要学习的,能够明显提高页面的打开速度。若是还有什么不太懂的,欢迎联系我或者在本篇文章下评论。
以上!