この記事では、Naibaサイト構築ノートが、WordPressサイトにBlocksyテーマをインストールして企業公式サイトを構築する方法を紹介します。
Blocksy Theme紹介
Blocksyは、高速でモダンなWordPressテーマで、高度なWooCommerceをサポートし、ブロックエディターと完全に互換性があります。
Naibaは詳細な比較は行っていませんが、感覚的にはBlocksyはAstraよりも軽量だと考えており、NaibaもよくBlocksyを使用してサイトを構築しています。
Blocksyには無料版と有料版があり、Naibaでは有料版を販売しています。必要な方はこちらで購入。
Blocksy の利点：
- 究極の読み込み速度（軽量コードアーキテクチャ）
- Gutenberg エディター、Elementor、Brizy などのページビルダーと完全互換
- ライブカスタマイザーは直感的なビジュアル編集体験を提供
- WooCommerce 向けに最適化されており、EC サイトに適しています
- 完全レスポンシブデザイン、すべてのデバイスに対応
Blocksy Themeインストールと基本設定
Blocksy Themeインストールチュートリアル
WordPressサイトの管理画面（まだWordPressサイトをお持ちでない方は、まずWordPressサイトを構築してください。参照：WordPressチュートリアル）：
- WordPress管理画面にログインし、„外観“>„テーマ“に進みます
- „新規テーマを追加“をクリックし、„Blocksy“を検索します
- Blocksy Themeを見つけたら、„インストール“ボタンをクリック
- インストール完了後、„有効化“をクリックしてThemeをアクティベート
Theme対応プラグインを有効化
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
然后インストール需要用到的插件。
Page作成＆ナビゲーションメニュー修正
创建页面
演示数据的页面肯定和你企业网站需要的页面不一致，所以我们先来创建必要的页面和修改导航菜单。
我们可以看到导入的这个演示数据包含了首页、关于、博客、联系这4个主要页面，我们企业网站通常还是有产品和服务页面。
这里我们先添加服务页面，产品后面会单独讲。
我们这里教程演示，创建了Our Services、Service 1、Service 2这3个页面。只需要添加页面标题然后发布即可，具体装修后文会介绍。
Sample Page这个页面和多余的选择Privacy Policy页面可以删除。
ナビゲーションメニューの変更
修改路径：WordPress后台 → 外观 → 菜单
我们把刚才添加的服务页添加到导航菜单并且拖动排序。然后保存菜单。
这个时候回到网站前台，就可以看到已经生效的导航菜单。
Themeの色を変更
修改路径：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作品集
- カスタムPage
- 使用ACF自定义字段
- 奶爸建站笔记B2B产品管理插件
这里比较简单的方式是使用WooCommerce或者Naibabiji B2B Product Showcase两种方式来实现。
| ソリューション | 技术难度 | デメリット |
| WooCommerce | 中程度 | 臃肿，吃硬件配置 |
| Portfolio | 簡単 | 设计限制，更偏向案例 |
| カスタムPage | 簡単 | 考验设计，不适合数量多的产品 |
| ACF自定义字段 | 难 | 小白劝退 |
| B2B製品管理Plugin | 最简单 | 不一定适配你使用的主题，需要样式微调 |
如果你后期打算直接销售商品或者想要更多功能自定义，可以考虑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主题教程就到这里结束了，还有不明白的地方可以留言。
