Blocksy 的开发团队酝酿已久，在一个多月前陆续于官方YouTube 频道逐步释出Blocksy 2.0 的改版新功能，终于在11/24 正式发布了！

如同其他布景主题的重大改版，Blocksy 的使用者们或多或少还是会遇到更新布景主题、外挂之后网站出现错误，或是先前设计的版面跳版、跳色等问题，根据我过去使用Thrive Themes 的经验，Blocksy升级到2.0 的步骤相对简单。

WP之家已同步更新至最新版：https://www.wphome.cc/576.html

Blocksy 2.0 新功能

为了不与其他外挂造成冲突，Blocksy 2.0 大幅度的更改CSS 的变数名称，除此之外，更新增、强化了数十种功能。

以下我们按类别撷取部分功能说明。

从以下的部分功能可以看出Blocksy 对WooCommerce 电商的功能强化与支援相当积极，使用Blocksy 架设电商网站相对幸福的多。

  • 重新排列 WooCommerce 数据层
    • 商店(Shop) 页面可以自订相关资讯(价格、品名、商品描述、加入购物车按钮等) 是否显示，以及排列顺序。
    • 单一商品页面可以自订相关资讯(价格、品名、商品描述、购买数量、加入购物车按钮等) 是否显示，以及排列顺序。
  • Reworked WooCommerce Product Tabs
    单一商品页面下方的页签除了商品描述与评分之外，可以新增额外的页签了！
  • New Extensions Manager
    管理面板中Blocksy 的Dashboard 下，Extensions 页签中对扩充功能有更好的管理与展示。
  • Compare View for Products
    使用Shop Extra 扩充功能，启用Compare View 选项即可在自订外观时使用商品比较的功能。
  • Enhanced Product Review System
    使用Shop Extra 扩充功能，启用Advanced Reviews 选项即可在自订外观时在单一商品页面中看到进阶的商品评价功能，访客可以给予评等星级、留下完整的评价内容并提供相关图片。
  • New Account Dropdown Menu
    商店网站的我的帐号图示现在提供了下拉选单功能(旧版本是连结，只能连到我的帐号页面)，选单中可以显示我的帐号、编辑个人资料、登出、自订连结、Content Block 等功能。
  • Related Posts & Products Slider View
    单一商品页面下方的关联/相关商品提供更丰富的资讯，例如评等星级，并且新增了Slider 功能能够显示更多商品。
  • Video Thumbnails for Posts & Products
    部落格的文章以及商店中的商品的精选图片可以使用影片呈现了！
  • Free Shipping Progress Bar
    使用Shop Extra 扩充功能，启用Free Shipping 选项即可在自订外观时指定此功能是否在购物车、结帐、Mini Cart 等页面出现。新增商品至购物车中能够看到达成免运门槛的进度条，可以增加顾客选购更多商品的诱因。
  • Additional Product Badges
    提供更多显示在商品左上角的标签，例如售完、新商品等标签，能提高购物的转换率。
  • Personalized “Thank You” Order Pages
    使用Shop Extra 扩充功能，启用Custom Thank You Pages 选项即可在WooCommerce 的Marketing 功能中新增自订的Thank You Pages，更能在这个页面中加入其他促销商品提高销售业绩。
  • Size Guides for Products
    使用Shop Extra 扩充功能，启用Size Guide 选项即可在WooCommerce 的Products 功能中新增自订衣物的尺寸对照表，方便顾客浏览、选购。
  • Variation Swatches for Products
    使用Shop Extra 扩充功能，启用Variation Swatches 选项即可在商店页面的可变商品中看到此商品提供的可变属性，点选不同可变属性能切换商品图片。顾客无须进入单一商品页面就能轻松浏览商品。
  • WooCommerce Product Filters
    使用Shop Extra 扩充功能，启用Filters 选项即可在外观下的小工具中，将筛选条件加到商店页面的sidebar 中。可以根据商品类别、可变属性、品牌等进行商品的筛选。

Blocksy 一直以来带给大家的感觉就是简单易用、轻量、不影响网站载入效能，但看到Blocksy 2.0 依然花费了大量精神在处理效能最佳化的问题，真的令人感到安心。

  • 本地加载头像的性能选项
  • 仅在需要时加载主题滑块 CSS
  • 优化前端字体加载逻辑
  • 在触发事件时更智能地加载覆盖 JS 文件
  • 从主包中拆分 WooCommerce 相关 JS
  • WooCommerce 迷你购物车 JS 性能
  • 更智能地加载扩展CSS文件（仅当扩展被激活并出现在页面上时）
  • 更快的 PHP 类自动加载器

期待已久的新功能

  • New Dark Mode
    大家期待已久的深色/夜间模式来了，可以提供给夜猫子访客良好的观看体验。
  • New Maintenance/Coming Soon Mode
    当网站准备改版或新增功能时，可以将访客导向至维护模式页面。
  • Copy Post Types Customizations
    当使用Post Types Extra 扩充功能，启用Copy Options 选项即可在自订外观时将某个文章类型的设计复制到其他文章类型上，借此可以统一网站呈现的风格。
  • New Conditional Manager
    对Blocksy 中的Content Block 提供了条件触发功能，可以大量减少对第三方条件触发功能外挂的依赖。
  • New Color System
    在自订外观时可以将网站形象色彩保存为自订的调色盘，这样一来在横跨各个页面进行设计时，能更方便的使用网站的形象色彩达成风格一致的设计。
  • Advanced Posts Block
    在页面中可以加入崭新的文章列表区块，从官方提供的样式范本中选取适合网站风格的文章排列方式，或是自由的自订文章列表区块的样式。

Blocksy 2.0 更新步骤

在这次的更新中，我们网站的Blocksy版本在更新前是1.9.11，更新后为2.0.1。

  • Blocksy Companion 外挂
  • Blocksy Theme 布景主题

步骤零

首先，不管对网站要做任何的更动，都别忘了要先做好网站的备份。

我是使用Cloudways 管理网站，所以从管理面板中先找到要更新版本的网站名称，接着从「Application Management」>「Backup And Restore」可以找到备份的选项。

按下右方的「TAKE BACKUP NOW」按钮即可，花费的时间视网站大小而定，稍等一下即可在左边的RESTORE 区块看到这次的备份时间。

如果后续步骤遇到任何问题，出现严重系统错误，别担心，回到Cloudways 的这个页面，找到想要回复的备份版本时间，按下「RESTORE APPLICATION NOW」后稍等一下就能让网站恢复原状了。

如果网站流量不小，为了避免影响访客对网站的体验，建议最好在夜深人静或是分析平常访客人数最少的时段来进行更新。

步骤一

为避免效能最佳化外挂的影响，在进行升级之前我先把Clearfy 效能最佳化外挂停用了。

待所有步骤都完成之后再启用Clearfy 外挂。

步骤二

我们先更新Blocksy Companion 外挂。

从后台管理面板中的「外挂」>「已安装外挂」中找到Blocksy Companion 外挂(免费与Pro 版本外挂名称略有差异)，按下「立即更新」。

Blocksy 配套插件

步骤三

接着是Blocksy Theme 布景主题。

从「控制台」>「更新」页面中往下拉可以找到布景主题的部分。勾选Blocksy 之后按下「更新布景主题」。

块状主题

步骤四

因为Blocksy 2.0 的改版涉及许多底层的变数更名，因此官方建议在这种规模的改版时可以进入布景主题外观重新发布内容，以确保系统能触发并带入新的改变。

从「外观」>「自订」进入布景主题的编辑模式。

Blocksy 主题定制器

我们采用简单的方式，将页首的元素从第二列拉到第一列，然后按下左上角的「发布」按钮。

Blocksy 主题-定制器-发布标题1

接着再把同一个元素从第一列拉回到第二列，恢复原本的设计。然后按下左上角的「发布」按钮。

在这个步骤应该会有不少站长遇到跟我一样的问题，右上角选单字体的颜色都变了。

Blocksy 主题-定制器-发布标题2 (1)

为了把选单字体颜色修正回来，找到选单的「设计」>「字体颜色」，将颜色修改回原本的设计。

Blocksy 主题-定制器-发布标题2

这部分的影响应该是新功能New Color System 造成的。当然，也别忘了检查网站其他部分的颜色设定是否正确喔。

为了重设Rest API，需要到「设定」>「永久连结」页面，拉到最下面按下「储存设定」即可。

这个步骤一般是对于有使用CPT 自订文章类型工具的站长会有需要。

步骤六

最后，不管是对网站进行任何层级的更新，更新完都建议手工清除一下快取。

Blocksy主题-清除缓存

因为我使用的是Cloudways，内建使用的Breeze 外挂就提供了相当方便的快取管理功能。按下「清除全部快取」、「清除Varnish 外取」即可回到网站页面检视内容、排版、设计是否正常。

步骤七

最后的小提醒，如果网站本来有针对布景主题进行CSS 的调整，记得参考官方提供的CSS 变数更名纪录进行调整喔。

结语

使用Blocksy两年多了，虽然这次的2.0 改版造成了一些站长与Agency 替客户管理的大量网站在升级过程中出现问题，但在按照上述步骤操作下，我的网站很顺利的无痛升级到Blocksy 2.0 ！

如果您有使用Blocksy 架设的网站，不仿参考上面的步骤进行升级。

如果您对Blocksy 一直感兴趣但尚未开始使用，因为Blocksy 2.0 大改版新增了许多功能，过了今年的黑五之后官方即将要大幅度调涨定价，可以把握黑五的大折扣购入Blocksy Pro 唷，这样我们Blocksy 社群就会又多了许多同伴能一起讨论了。(●'◡'●)

WP之家已同步更新至最新版：https://www.wphome.cc/576.html

公告： 本站提供的wordpress主题、插件等其他资源，除资源本身问题外，都不包含免费技术服务，如需技术支持需支付100+技术服务费一次，具体依客服说明为准，请大家谅解！
说明： 本站英文版主题&插件若无特别说明，均为英文原版，如需汉化请搜索Loco插件自行翻译：https://wordpress.org/plugins/loco-translate/ 申明： WP之家提供资源仅供学习用途，禁止用于搭建非法网站，本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。