Blocksy主题教程：使用WordPress+Blocksy搭建企业官网

这篇文章奶爸建站笔记给大家介绍如何在WordPress网站安装Blocksy主题来搭建企业官网。

Blocksy主题介绍

Blocksy 是一款快速、现代的 WordPress 主题，支持高级 WooCommerce，与区块编辑器完全兼容。

奶爸没有做专门的对比，但是感觉上认为Blocksy比Astra要更轻量一些，奶爸的小店就是使用的Blocksy搭建。

Blocksy带有免费版和高级版，奶爸这边有高级版出售，需要的可以联系我。

Blocksy的优势：

• 极致的加载速度（轻量级代码架构）
• 与古腾堡编辑器、Elementor、Brizy等页面构建器完美兼容
• 实时自定义器提供直观的视觉编辑体验
• 专为WooCommerce优化，适合电商网站
• 完全响应式设计，适配所有设备

Blocksy主题安装与基础配置

Blocksy主题安装教程

在WordPress网站后台（还没有WordPress网站的先去搭建一个WordPress网站再来，参见WordPress教程）：

1. 登录WordPress后台，进入“外观”>“主题”
2. 点击“添加新主题”，搜索“Blocksy”
3. 找到Blocksy主题后，点击“安装”按钮
4. 安装完成后，点击“启用”激活主题

激活主题配套插件

Blocksy的主题功能都是通过配套插件来实现的，和Astra主题一样，分为免费插件和付费插件，如果你购买了高级版的就直接去插件里面上传高级版插件。

使用免费版的话直接点击安装Blocksy Companion按钮安装插件就行了。

高级版的功能更多，所以我们上传的高级版，如果下面教程讲到的地方你没有对应的设置，则代表免费版不支持。

Blocksy Companion插件介绍

当安装完Blocksy Companion并且启用之后，在后台菜单可以看到Blocksy菜单。

Dashboard菜单是整个Blocksy主题设置功能和文档的界面。

• 首页 – 快速进入主题设置界面和相关文档
• Starter Sites – 预制的演示模板
• Extensions – 主题可以单独打开的一些功能
• 有用的插件 – 主题推荐的一些插件
• 更新日志 – 主题更新记录

新手不会自行设计网站外观的话，从Starter Sites导入一个你中意的设计，然后进行修改是比较好的选择。

Extensions里面，如果你需要cookies提示，可以打开Cookies Consent，这样网站就有一个cookies弹窗。

需要超级菜单的话可以打开Advanced Menu功能。

Shortcuts Bar功能也可以打开，这样移动端访问网站时最底下有联系信息的快捷栏。

Blocksy从零开始装修网站

考虑到绝大多数观看本教程的都是新手朋友，让你们从一个空白网站开始装修，难度比较大，而且出来的效果会不太专业，所以我们建议从预制模板导入后进行细节修改比较好。

导入演示数据

导入演示数据的路径：WordPress后台 → Blocksy → Dashboard → Starter Sites

考虑到大多数朋友都是外贸行业的，我们这里选择了免费的Business模板导入。

导入时会要求你选择Page Builder，在WordPress的基本概念和术语一文里面，跟大家介绍过什么叫Page Builder：

WordPress页面构建器插件是一种用于创建和编辑网站页面的工具，它可以帮助用户轻松地创建和编辑网站页面，无需编写代码。页面构建器插件通常具有可视化的界面，用户可以通过拖拽、放置等方式来创建和编辑页面。

Blocksy主题支持古腾堡（Gutenberg）、Brizy和Elementor这3种页面构建器。

新手建议选择Elementor。

从性能上说，古腾堡应该是最快的，而且是WordPress官方现在推广的编辑器，兼容性也会更好一些。但是，古腾堡目前操作方式还不如Elementor灵活，新手用Elementor琢磨一天能弄出来的东西，古腾堡可能几天你都琢磨不出来，所以新手不要去纠结那一点点的性能差距，黑猫白猫，能抓到老鼠才是好猫，你会用的构建器才是最好的构建器。

全选导入这些内容，直接Next

然后安装需要用到的插件。

创建页面&修改导航菜单

创建页面

演示数据的页面肯定和你企业网站需要的页面不一致，所以我们先来创建必要的页面和修改导航菜单。

我们可以看到导入的这个演示数据包含了首页、关于、博客、联系这4个主要页面，我们企业网站通常还是有产品和服务页面。

这里我们先添加服务页面，产品后面会单独讲。

我们这里教程演示，创建了Our Services、Service 1、Service 2这3个页面。只需要添加页面标题然后发布即可，具体装修后文会介绍。

Sample Page这个页面和多余的选择Privacy Policy页面可以删除。

修改导航菜单

修改路径：WordPress后台 → 外观 → 菜单

我们把刚才添加的服务页添加到导航菜单并且拖动排序。然后保存菜单。

这个时候回到网站前台，就可以看到已经生效的导航菜单。

修改主题颜色

修改路径：WordPress后台 → 外观 → 自定义 → 颜色

也可以直接前台点击顶部导航菜单里面的自定义快速进入

这么修改后网页还有一些颜色没变化，后面介绍Elementor编辑页面时会讲，仔细看教程哦。

修改页眉

修改路径：WordPress后台 → 外观 → 自定义 → 页眉

默认的页眉包含3行：顶部行、主要行和底部行

• 顶部行，一般我们成为topbar，常规设计是用来放联系方式和社交媒体
• 主要行就是放导航菜单和按钮
• 底部行一般使用的比较少

选择每一个行，可以看到行的设置界面。

想要添加什么元素到页眉，直接拖入到对应的位置即可。

点击截图种左侧元素旁边的页眉，还有更多的页眉设置选项，例如：

• Sticky Functionality – 是否固定在屏幕顶部
• Transparent Functionality – 是否透明

修改页脚

修改路径：WordPress后台 → 外观 → 自定义 → 页脚

页脚的设置方法和页眉类似，上图中的小工具区域的内容可以从WP后台 → 外观 → 小工具 下设置，会更方便一些。

如果这个主题自带的页脚效果你设计起来觉得麻烦，也可以通过elementor来创建，后文会提到。

修改页面内容

设置完页眉页脚，我们就可以开始对具体页面进行修改了。

修改路径：

1. 网站前台 → 顶部adminbar → Edit with Elementor
2. WP后台 → 页面 → 所有页面 → Edit with Elementor

在修改页面内容前，我们先来修改Elementor的全局颜色和字体。

进入Elementor编辑界面后，点击左上角Elementor图标，然后选择Site Settings

主要设置全局颜色和全局字体，其他的内容你愿意设置也可以设置，搞不懂就先保持默认。

我们导入的这个主题演示数据还是使用的Section设计，现在最新的Elementor已经全面采用了Container布局，所以你会看到一个Convert to container的按钮，可以点击按钮进行转换。

转换完毕后把之前的Section删掉。（有些转换后样式会变化，需要自己调整，不会调整就不要转化，保持Section先用着，或者付费找奶爸帮你处理）

Elementor的基础使用还是非常简单的，想要修改哪里就点击哪里，然后左侧编辑区域进行内容修改和样式调整就行。

调整完毕点击右上角的Publish按钮就可以更新页面。

为空白页面进行设计

我们以前面创建的Our Services页面为例，给大家介绍如何使用Elementor来编辑页面设计。

修改路径：WP后台 → 页面 → 所有页面 → 编辑

打开编辑页面后如上图，首先点击1处的Blocksy 页面设置按钮，通常需要设置的项目如下：

1. 页面标题 → 禁止
2. 内容区垂直间距 → 禁止

设置完毕后保存，然后“使用Elementor编辑”

进入Elementor编辑界面后，内容为空，所以需要你自己创建。

对于新手来说，自己创建可能比较麻烦，有一个简单的办法是从主题已经使用Elementor设计的页面，把自己喜欢的设计通过鼠标右键，复制，然后回到新开的这个页面右键粘贴，然后再修改内容。

如果你需要自己设计，先从1的位置选择容器或者网格，然后拖动需要的元素到容器里面。

添加产品管理功能

在WordPress教程一文的“添加产品管理”部分有介绍，实现产品管理有以下几种方式：

1. WooCommerce插件
2. Portfolio作品集
3. 自定义页面
4. 使用ACF自定义字段
5. 奶爸建站笔记B2B产品管理插件

这里比较简单的方式是使用WooCommerce或者Naibabiji B2B Product Showcase两种方式来实现。

解决方案	技术难度	缺点
WooCommerce	中等	臃肿，吃硬件配置
Portfolio	简单	设计限制，更偏向案例
自定义页面	简单	考验设计，不适合数量多的产品
ACF自定义字段	难	小白劝退
B2B产品管理插件	最简单	不一定适配你使用的主题，需要样式微调

如果你后期打算直接销售商品或者想要更多功能自定义，可以考虑WooCommerce，如果你只需要简单的产品管理和展示，可以考虑Naibabiji B2B Product Showcase

网站优化

网站搭建完毕后，需要的优化工作，新手朋友不需要纠结太多，只需要做自己能做到的工作就行了。

1、安装SEO插件

操作路径：WordPress后台 → 插件 → 安装插件，搜索SEO，出来的热门插件都可以装。

SEO插件的原理都是一样的，并没有说使用哪个就一定更好，随便装一个。

2、清理没使用到的页面

演示数据导入的页面并不是每个页面你都需要，把不需要的就删除。

3、安装速度优化插件

操作路径：WordPress后台 → 插件 → 安装插件 → 搜索“Converter for Media”

图片转换为webp格式，可以安装Converter for Media，如果你是宝塔面板用户，需要手动修改nginx配置，参考：宝塔面板修改nginx配置支持Converter for Media插件

缓存插件：WordPress后台 → 插件 → 安装插件 → 搜索“cache”，出来的随便装一个热门的即可。

如果你主机自带了缓存插件，直接使用主机自带的缓存插件，不用迷信付费缓存插件（有钱买了用也行，有一定效果）

如果你是宝塔面板用户，也可以考虑使用：宝塔面板为WordPress启用Nginx FastCGI缓存

总结

到这里Blocksy主题教程就到这里结束了，还有不明白的地方可以留言。