这篇文章奶爸建站笔记给大家介绍如何在WordPress网站安装Blocksy主题来搭建企业官网。
Blocksy主题介绍
Blocksy 是一款快速、现代的 WordPress 主题，支持高级 WooCommerce，与区块编辑器完全兼容。
奶爸没有做专门的对比，但是感觉上认为Blocksy比Astra要更轻量一些，奶爸的小店就是使用的Blocksy搭建。
Blocksy带有免费版和高级版，奶爸这边有高级版出售，需要的可以联系我。
Blocksy的优势：
- 极致的加载速度（轻量级代码架构）
- 与古腾堡编辑器、Elementor、Brizy等页面构建器完美兼容
- 实时自定义器提供直观的视觉编辑体验
- 专为WooCommerce优化，适合电商网站
- 完全响应式设计，适配所有设备
Blocksy主题安装与基础配置
Blocksy主题安装教程
在WordPress网站后台（还没有WordPress网站的先去搭建一个WordPress网站再来，参见WordPress教程）：
- 登录WordPress后台，进入“外观”>“主题”
- 点击“添加新主题”，搜索“Blocksy”
- 找到Blocksy主题后，点击“安装”按钮
- 安装完成后，点击“启用”激活主题
激活主题配套插件
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来创建，后文会提到。
修改页面内容
设置完页眉页脚，我们就可以开始对具体页面进行修改了。
修改路径：
- 网站前台 → 顶部adminbar → Edit with Elementor
- 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 页面设置按钮，通常需要设置的项目如下：
- 页面标题 → 禁止
- 内容区垂直间距 → 禁止
设置完毕后保存，然后“使用Elementor编辑”
进入Elementor编辑界面后，内容为空，所以需要你自己创建。
对于新手来说，自己创建可能比较麻烦，有一个简单的办法是从主题已经使用Elementor设计的页面，把自己喜欢的设计通过鼠标右键，复制，然后回到新开的这个页面右键粘贴，然后再修改内容。
如果你需要自己设计，先从1的位置选择容器或者网格，然后拖动需要的元素到容器里面。
添加产品管理功能
在WordPress教程一文的“添加产品管理”部分有介绍，实现产品管理有以下几种方式：
- WooCommerce插件
- Portfolio作品集
- 自定义页面
- 使用ACF自定义字段
- 奶爸建站笔记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主题教程就到这里结束了，还有不明白的地方可以留言。
