Electro是专为WooCommerce电子产品商店设计的主题,内置丰富电商组件,易于定制。
- 专为电子商店设计的WooCommerce主题
- 内置部门超级菜单、产品比较等组件
- 支持单一品牌、多供应商及联盟网站
- 基于Underscores框架,便于开发者定制
- 多个预建首页可一键导入
关键术语:
- WooCommerce:WordPress的开源电商插件,支持搭建在线商店。
- Underscores:Automattic开发的极简主题框架,方便开发者定制。
- 部门超级菜单:按产品类别分类的多列导航菜单,提升浏览效率。
一个好的多功能主题几乎可以构建任何东西。这正是问题所在。
把一个通用主题交给一个正在搭建电子商店的人,你会得到一个能用的店铺,但永远不会让人感觉是卖电子产品的。部门菜单是用插件伪造的。优惠行是有人硬塞进去的小工具。比较按钮缺失,直到你安装另外三个插件并祈祷它们匹配你的样式。它看起来像一家商店,但行为却像一本带购物车的宣传册。
Electro 主题则反其道而行之。它是一个专为单一任务——运营电子商店——而构建的 WooCommerce 主题,并且开箱即带有所需的组件:部门超级菜单、产品比较、心愿单、促销轮播、品牌列表,以及十二个只需几次点击即可导入的预建首页。
我花了不少时间研究 Electro,在后台摸索,阅读主题的实际 PHP 代码,并梳理它提供给开发者和商店所有者的内容。这是诚实的评测:它哪里出色,哪里拖沓,以及我会在朋友开始点击之前告诉他们的部分。
Electro 主题到底是什么
Electro 是 MadrasThemes 出品的一个 WooCommerce 主题,专为电子商店、供应商市场和联盟网站而构建。其设计语言明显借鉴了你常逛的大型零售商的风格:亚马逊的侧边栏目录、Flipkart 密集的产品网格、AliExpress 的促销行。如果你曾在网上买过手机充电器,那么你就是在看起来很像 Electro 首页的布局上购物的。
这是让我惊讶的部分。在引擎盖下,Electro 基于 Underscores——Automattic 为开发者构建的极简 starter 主题。这一点比营销文案所传达的更为重要。许多电商主题是专有框架,将所有内容隐藏在设置面板后面,当你需要修改面板未覆盖的内容时,就会陷入困境。Electro 不是这样。它是一个标准的、基于标准的主题,拥有真正的钩子和过滤器 API、标准的 WooCommerce 模板覆盖以及子主题支持。开发者可以真正深入其中。
它的目标是什么: 实际上有三种类型的网站。
- 一个单一品牌 电子用品商店 销售手机、笔记本电脑、音频设备、相机、配件等常见的电子产品目录。
- 一个 多供应商市场 由 Dokan 驱动,众多卖家在一个品牌店面上列出产品。
- 一个 联盟或比价网站 依靠密集的产品列表和产品对比表,推动买家前往优惠。
这个主题处理商店前端的外观(头部、菜单、购物车、页脚、产品页面)并注册 WooCommerce 小工具,而一个名为 Electro Extensions 的配套插件添加了页面构建器元素和商店集成。您可以选择页面构建器(WPBakery 或 Elementor)来在前页排列这些小工具。WooCommerce 负责实际的销售。Electro 让一切看起来像一个连贯的电子产品超级商店,而不是一堆插件的堆砌。
安装 Electro 及其配套插件
安装主题本身是枯燥的部分。将压缩包上传到 外观 » 主题 » 添加新主题,激活它,完成。有趣的部分在激活之后才开始,此时 Electro 会告诉你它需要一些伙伴插件。
Electro 依赖 TGM 插件激活库,因此当你激活它时,会在管理后台顶部看到一个黄色提示: 此主题需要以下插件。 点击进入 外观 » 安装插件 ,你会看到完整的列表。以下是每个插件的作用及存在原因:
- Electro Extensions (必需)。这是一个配套插件,将主题接入页面构建器,添加了用于布局首页的 WPBakery 和 Elementor 元素,以及额外的商店集成。WooCommerce 小部件本身已包含在主题中,但部分首页功能依赖 Electro Extensions 启用,因此请将其视为必要。该插件从主题作者的服务器安装,而非 WordPress.org 仓库。
- 页面构建器。 您可以选择 WPBakery Page Builder 或 Elementor。它们用于布局首页。演示库为两者都提供了首页套装,所以请选择您真正喜欢使用的构建器。
- Redux Framework。 为主题选项面板提供支持。功能深入,我们将在其中用一整节来介绍。
- 一键演示导入。 该导入器可拉取完整的预建首页,包含占位产品与菜单。
- MAS Brands for WooCommerce。 添加品牌分类法,以便为每个产品关联制造商并显示品牌标志。
- MAS Static Content。 可复用的静态块,用于商店巨幕和横幅区域。
- YITH WooCommerce Wishlist 和 YITH WooCommerce Compare. 心愿单心形图标和对比表格,均来自 YITH。
- 以及其他辅助插件,例如 Advanced Custom Fields, Revolution Slider,以及用于联系页面的表单插件。
注意: 请按顺序安装这些插件,并等待每个插件安装完成后再开始下一个。TGM 会逐个安装插件,其中 Electro Extensions 必须成功安装,因为其他多项功能都依赖它的激活。如果你的主机内存限制严格,请先激活构建器和 Electro Extensions,然后再添加其余插件。
一旦必需的插件全部显示为绿色,你就可以开始导入演示数据了。此时 Electro 不再像一个空白的 WordPress 安装,而开始像一个在线商店了。
提示: 在一个全新的站点上,导入你选择的演示数据 在 你添加任何真实产品或页面之前。演示数据导入器会创建菜单、小工具和示例内容,从一个完整的布局开始并替换你的产品,远比将演示导入与你已创建的页面进行协调要整洁得多。
十二个预制首页和演示数据导入器
这是 Electro 的核心功能,而且确实非常出色。该主题提供了 十二种预制首页布局,分别标记为 Home v1 到 Home v12,其中大多数布局同时提供 WPBakery 版本和 Elementor 版本。这是一个真正的布局库,而不是只有两种换肤色的皮肤。

您可以通过以下路径访问 外观 » 导入演示数据 (一键演示导入)。该库以首页缩略图网格形式呈现,顶部有筛选标签: 所有演示, WP Bakery Page Builder, Elementor, 其他,以及 CRM 与在线聊天。点击筛选器后,网格会缩小至仅显示这些布局,这样如果你已决定使用 Elementor,就不必翻过九个 WPBakery 设计来找你自己的。
这些设计本身专注于特定的电子产品细分领域。有通用小工具超市、以英雄优惠为主的智能手机优先布局、深色风格的音频和扬声器商店、智能手表与可穿戴设备设计,以及几个类似完整零售商着陆页的密集多部门首页。你选择的不是“蓝色”或“绿色”,而是店铺原型;每一种原型对组件的排列方式都不同:有些以大型优惠倒计时开场,有些采用部门与特色产品分栏,有些则首先堆叠品类图块。
工作流程异常简单:
- 打开演示库,按你的建站器筛选。
- 选择最接近你所需商店的主页。
- 点击导入。导入器会拉取页面布局、示例产品、菜单和组件配置。
- 将示例产品替换为你的真实商品目录,并在你的建站器中编辑首页区块。
这最后一步才是实打实的。 关键在于: 导入器会给你一个完整的、布置好的展厅,但它只是一个 示例 展厅。你仍然需要用你自己的产品替换演示产品,将菜单指向你真实的分类,并放入你自己的Logo和品牌图片。将导入视为一个专业排列的起点,而不是一个完成的店铺。它节省了你数天的布局工作;但它并不能节省你花在实际产品上的那些小时。
你可能想知道导入演示是否会清除你已经有的内容。它不会覆盖已有的文章,但会添加一堆示例产品和页面。在一个新网站上,这正是你想要的。在一个已经有真实产品的网站上,请有选择性地操作,考虑只导入首页而不是完整的演示内容。
在主题选项面板中设置商店
演示导入后,其他所有内容都位于 Electro 管理侧边栏的菜单中。这是一个由Redux驱动的选项面板,而且很深。我这么说既是称赞也是温和的提醒。

面板左侧是一堆标签页: 常规、商店、页眉、页脚、移动端、导航、博客、社交媒体、样式、排版、 以及 导入/导出。 你不会一开始就用上所有功能,但了解各自的用途还是值得的。
常规 是用来设置全站行为的地方。其中你会注意到的是 网站模式,一个真正的 深色或浅色 切换开关,适用于整个商店前端。Electro 内置了深色模式,你还可以开启 模式切换器 这样访客可以自己在前端切换。还有一个 深色 Logo 用于在浅色 Logo 在深色头部消失时的插槽,一个 滚动到顶部 按钮开关,以及一个用于重新生成缩略图的注册图片尺寸选项。如果你曾想过要一个暗色主题的电子商店而无需修改 CSS,这是一个只需两次点击的设置。
商店 是你实际使用的选项卡,因为它控制着 WooCommerce 在主题内的行为方式。

这里有几个值得指出的设置:
- 目录模式。 把整个商店变成仅可浏览的目录:价格和加入购物车按钮消失。这正是联盟网站或“询价”B2B电子供应商需要的开关,而且只需要勾选一个复选框。
- 品牌属性。 你告诉Electro哪个产品属性代表品牌(比如一个“制造商”属性),主题就会将其关联到品牌图片和品牌轮播中。这样,三星、索尼和Bose的logo就会出现在你的首页上。
- 商品对比页面。 设置托管产品对比表的页面。
- 商店页面的Jumbotron(大型展示区)。 和 底部Jumbotron(大型展示区)。 静态内容模块(来自MAS Static Content),位于商店网格的上方和下方。适合放置分类横幅或促销条。
- 产品存档视图。 你可以拖拽排列顾客可以切换的布局选项, 网格, Grid Extended,以及 列表,排在最上面的就成为默认布局。Grid Extended 是更宽大的卡片,包含更多规格细节,适合用规格参数来吸引消费者的电子产品。
- 此外还有商店页面布局选择器和子分类列数控制。
其余选项卡 的功能如其名称所示。Header 配置顶部栏、大菜单和粘性行为。Footer 管理小工具列和版权行。Mobile 有独立设置,因为移动端头部是另一回事。Navigation、Blog、Social Media、Styling 和 Typography 则覆盖其余外观、颜色和字体。以及 导入/导出 让你能将整个选项配置保存为一个字符串,然后粘贴到另一个站点,这正是代理商在客户项目中保持统一风格的做法。
注意: Redux面板功能强大但内容繁多。不要在发布前试图触碰每一个设置。先配置好General和Shop,选好页眉样式,设置颜色,其余保持默认,直到有实际需求再调整。选项过多导致瘫痪的风险在这里真实存在。
让它成为电子产品商店的门面功能
去掉演示内容和选项面板,真正让Electro感觉像电子产品商店的是一套特定的前端功能。通用主题通过插件来模拟这些功能,而Electro将它们作为设计的一流组件直接提供。
部门分类超级菜单。 这是位于页眉左侧的垂直、分类优先菜单,每个大型电子产品零售商都在使用。它展开成一个包含子分类和特色商品的大型面板。对于拥有数十个分类(如手机→配件→保护壳,音频→耳机→无线等)的商店来说,这是你能拥有的最重要的导航模式,而Electro将其视为核心配置而非附加功能。
顶部栏。 页眉上方的一条细长区域,用于显示客服电话、支持时间或账户链接。Electro将电话号码及其标签作为筛选器开放,因此设置或更改非常容易。虽然是小细节,但这是电子产品买家在花费真金白银购买笔记本电脑之前会寻找的那种信任信号。
侧滑式购物车抽屉。 点击购物车图标,一个小型购物车会从侧面滑出,而不是将您跳转到单独页面。它让购物者停留在他们正在查看的商品页上,这正是在浏览过程中您想要的。该功能默认开启,如果您希望将用户引导至完整的购物车页面,只需关闭一个筛选器即可(我们将在开发者部分介绍)。
商品对比与心愿单。 两者均通过 YITH 插件 Electro 捆绑包提供。对比功能是让 Electro 真正适合电子产品的特性:购物者可以并排排列三款手机,在表格中查看规格差异。心愿单添加了小心形图标,方便买家为心仪的相机存钱到发薪日。对于电子产品这种人们购买前会做调研的品类,这些功能不是锦上添花,而是让用户愿意留在您网站上而不跳转到对比博客的关键。
促销与特价轮播。 Electro 包含专门的促销组件、特价商品栏以及突出折扣的轮播。电子产品营销依赖促销(闪购、捆绑优惠、清仓甩卖),而将这些促销模块作为现成组件意味着您无需手动构建“今日特惠”栏目。
品牌。 通过 MAS Brands 分类法和品牌轮播组件,您可以获得一个可滚动的制造商标志条。购物者在电子产品领域会频繁按品牌筛选(“只看索尼”),因此突出展示品牌符合用户实际的购物习惯。
WooCommerce 产品相册。 Electro 开启了现代 WooCommerce 相册功能, 缩放、灯箱和滑块,因此产品图片的行为符合买家预期:悬停放大端口、点击打开全屏灯箱、滑动浏览画廊。你无需额外安装画廊插件就能实现这一点,因为主题直接声明了对这些功能的支持。
在这些功能背后,是首页构建模块。Electro 本身附带了大约 十八 个自定义 WooCommerce 小工具,只要 WooCommerce 处于激活状态,主题就会注册这些小工具,它们是构成预置首页的乐高积木。这套工具包括:产品轮播、产品轮播选项卡、6+1 产品布局、2+1+2 产品布局、产品选项卡、产品卡片轮播、特价商品、特价商品轮播、产品筛选器、产品列表分类、产品分类、品牌轮播、文章轮播、最新文章、横幅广告、广告块、功能块以及目录排序控件。其中“6+1”和“2+1+2”布局值得理解:它们是网格布局,将一个大尺寸特色产品与一组较小产品混合排列,这种不对称的区块让首页看起来经过精心设计,而非简单平铺。你可以将这些模块拖入编辑器来组合首页,或者导入演示站点,它们已经预先排列好了。
运行一个多供应商市场:Dokan 多供应商和 WPML
这时的 Electro 就不再只是一个“商店主题”,而是变得更加强大。它内置了 Dokan 集成,直接整合到主题中。
Dokan 是 WooCommerce 最流行的多供应商插件。它可以将单个商店转变为一个市场,让独立卖家各自拥有自己的供应商仪表盘、上架自己的商品、管理自己的订单,而你则收取佣金并拥有店面。亚马逊和速卖通就是市场。Electro 加上 Dokan,就是构建一个电子产品市场的方式。
这种集成并非表面功夫。Electro 在代码中内置了专门的 Dokan 模板处理机制,因此供应商店铺页面会继承主题的样式,而不是 Dokan 的默认外观。甚至还提供了一个特定的钩子(hook), electro_dokan_store_before_header该钩子在供应商店铺前端触发,让你可以在卖家头部上方注入内容。实际效果就是供应商的店铺页面看起来像是你品牌商店的一部分,而不是一个字体不协调的插件生硬地附加在上面。
它的优势体现在: 针对希望在一个电子品牌下聚合多个卖家的运营者。可以想象成一个本地手机配件市场,或者一个精心策划的商店,多个小型音频品牌并列销售。你只需用 Electro 设计一次,通过 Dokan 管理供应商机制,每个卖家的页面都会保持品牌一致性。如果你需要完整的供应商工具包(如佣金、提现、供应商员工、产品级控制),可以搭配 Dokan Pro,它在免费核心之外增加了真正市场所需的功能。
一个坦诚的提醒: Electro 为 Dokan 提供样式,但不包含 Dokan 本身。你需要单独安装和配置 Dokan。主题让供应商页面外观正确,而市场逻辑全部由 Dokan 负责。不要指望在 Electro 选项中一键开启就能出现一个市场。
在多语言方面,Electro 自带了 WPML 在基础的可翻译设置之上集成了 WPML 集成。它在代码中包含了专用的 WPML 类,这意味着主题自身的字符串和模板区域已与 WPML 的翻译管理对接。如果你在例如英语和西班牙语市场销售电子产品,翻译菜单、小工具和商店界面时,主题不会给你制造麻烦。你仍然需要 WPML 插件本身,但基础工作已经完成。
Electro 主题适合谁(以及谁应该跳过它)
让我直截了当地谈适配性问题,因为 Electro 是一个专精型主题,而专精型主题对很多人来说并不合适。
如果你经营一家电子数码产品商店, 这完全适合你。无需自行设计,就能拥有亚马逊风格的分类菜单、密集网格、促销行和对比表格。无论是手机配件店、相机店还是电脑零件零售商:Electro 正是为你的商品目录量身打造的。你将把时间花在添加产品上,而非与布局作斗争。
如果你是一个市场运营者, 内置的 Dokan 样式可以帮你省去大量真正令人头疼的工作。当你接入那些期望自己店铺看起来专业的卖家时,开箱即用且与品牌匹配的供应商页面价值巨大。
如果你运营一个联盟营销或比价网站, 对比表格和目录模式是你真正需要的两个功能,而 Electro 两者兼备。开启目录模式,配置好对比功能,你就拥有了一个规格对比网站,可以引导买家前往各类报价。
如果你是为客户进行开发的开发者, Electro 会是一个令人愉快的惊喜。因为它基于 Underscores,拥有真正的钩子(hook)和过滤器(filter)API,以及标准的子主题覆盖机制,你不会被困在专有面板中。你可以像扩展任何规范的 WordPress 主题那样扩展它。下面会有更多介绍。
现在说说另一面。
如果你追求极致轻量级的主题,请跳过 Electro。 Electro 加上页面构建器,再加上满是轮播图的主页,绝对算不上轻量。如果你的首要目标是原始速度和最少功能,一个精简的块主题会加载更快。
如果你只卖几件商品,请跳过它。 小商店不需要品类超级菜单和八个主页小工具。关闭功能所花的时间,比使用更简洁的主题所花费的时间还要多。Electro 在真正产品丰富的目录中才能发挥其价值,而不是在仅有少量 SKU 的精品店中。
如果你拒绝使用 WPBakery 或 Elementor,请跳过它。 主页是用这两个构建器之一构建的。如果你是“只用块编辑器”的纯粹主义者,这个主题会让你每天都感到烦恼。
契合度比功能更重要。Electro 是一款出色的电子产品主题,但对于只有五种商品的蜡烛店来说却是个糟糕的选择,再多的选项也改变不了这一点。
不要把主页变成轮播图墓地
Electro 为你提供了几十个精美的主页小工具:产品轮播图、选项卡网格、促销倒计时、品牌条、广告横幅。于是你把它们全部堆在首页上,因为你可以这样做。现在你的主页加载了八个产品轮播图,每个都查询数据库并获取一行图片,再加上一个滑块和三个广告块。在手机上使用移动数据,需要六、七、八秒才能变得可用。
这是让你付出代价的部分:在商店中,速度不是虚荣,而是收入。购物者会放弃卡顿的页面。Google 的 Core Web Vitals 会惩罚因轮播图弹出而抖动的布局。每多一秒延迟,转化率都会显著下降。你花了一个下午让主页看起来像一家大型超市,却不经意间让它卖得像一家破旧的商店。金钱和信任都在流失,而主题只是完全按照你的指令行事。
解决之道在于自律,而不是换一个主题。挑出三到四个真正能带来点击的首页模块(比如一个主打促销、一个特色轮播、分类磁贴,也许再加一个品牌展示),然后砍掉其余的。对首屏以下的内容使用懒加载。运行缓存插件,让首页以静态 HTML 形式呈现,而不是每次访问都重新执行所有查询。在真实的手机上测试页面,关注最大内容绘制(Largest Contentful Paint,LCP)和布局偏移(Cumulative Layout Shift,CLS),一旦数据下滑就立即移除某个模块。
一个快速的四个模块首页,每一天都比漂亮的十二个模块首页卖得更好。这些小工具是菜单,而不是清单。从中选择。
速度、页面构建器,以及诚实的陷阱
每个只列举优点的主题评测都是在向你推销。所以,这里列出 Electro 真正的利弊权衡——那些你在上线后会遇到的情况。
WPBakery 比区块编辑器(block editor)更臃肿。 如果你选择 WPBakery 首页,你将在前端加载 WPBakery 的短代码引擎及其 CSS 和 JS。它能工作,也是一个成熟的构建器,但不够轻量,而且它会增加每个触及页面的重量。对许多人来说,Elementor 感觉更轻量,但它也不是没有开销。无论你选哪个,基于构建器的首页都比手写代码的首页更重,句号。
一个充满轮播的首页需要缓存。 这直接源于上面的反模式。Electro 可以渲染一个内容丰富、查询繁重的前页,如果没有页面缓存,你的服务器会在每次访问时重建所有内容。给它加上缓存插件。我首选 WP Rocket,因为它的页面缓存、懒加载和脚本延迟设置几乎完美对应 Electro 的故障模式:它将首页作为静态 HTML 提供,推迟首屏以下的轮播,并延迟非关键脚本直到交互时。在商店中,这不是可选项,而是基本要求。
构建器锁定是真实存在的。 你的首页布局以 WPBakery 或 Elementor 的短代码和元素形式存在。如果你将来迁移到另一个主题,该布局无法干净地随之迁移。内容(产品、分类)是安全的,因为它们存在于 WooCommerce 中,但布局、轮播、促销模块都需要重建。这对于任何基于构建器的主题都是如此,也是十二个首页便利性的代价。请保持清醒。
Redux 选项功能深入。 我前面说过,这里再重复一遍,因为这个问题经常让人吃亏:主题选项面板有 11 个选项卡和数百项设置。功能强大,但也可能让你花一整天调整那些没人注意的细节。设置好基本项,上线发布,后续再优化。
在已上线的商店中导入演示数据时要小心。 “一键导入演示”会添加示例产品和页面。在新安装的网站上,这是极好的。但在已经拥有真实库存和真实主页的商店上,完整导入演示会向商品目录塞满占位商品,之后你得逐一删除。请选择性导入,或者在新安装的网站上导入后再迁移。
配套插件依赖。 Electro Extensions 承担了大量工作。如果它被停用或更新失败,它提供的页面构建器元素可能会从你的主页布局中丢失。请保持其激活和最新,并把它视为主题的一部分,而非可选的附加组件。
如果你想知道速度对商店如此重要的原理,Google 官方的 Core Web Vitals 指南提供了通俗易懂的解释,值得在最终确定主页前花上十分钟阅读。
Electro 与多功能主题对比
大多数人面临的实际选择不是“Electro 还是另一款电子产品主题”,而是“Electro,还是一款能构建任何内容的、大型灵活的多功能主题?”那么让我以诚实的数据来说明。
多功能主题(如 WoodMart、Porto、BeTheme 这类产品)是通才。它可以构建商店、作品集、杂志、企业网站等任何你指定的内容。Electro 则是专才,只专注于构建电子产品商店。这种差异有利有弊。
| 特性 | Electro | 通用多用途主题 |
|---|---|---|
| 预建首页 | 12 个电子类专用布局 | 各细分领域数十个演示,仅有少量商店专用 |
| 商店专用小工具 | 约 18 个 WooCommerce 小工具(轮播、促销、品牌、对比) | 通用小工具;商店功能常需要扩展插件 |
| 支持页面构建器 | 2 个(WPBakery + Elementor) | 通常 1-2 个,类似 |
| 部门超级菜单 | 内置,设计核心 | 自行重建或使用插件 |
| 产品比较 + 愿望清单 | 捆绑(YITH) | 单独添加 |
| 多供应商样式 | 内置 Dokan 集成 | 很少包含 |
| 经常性费用 | 每月 $0 | 典型许可证约 59 美元/年(约 425 元) |
| 非商店网站的灵活性 | 低,它是一个商店主题 | 高,这就是重点 |
Electro 的优势在于: 如果您正在搭建电子设备商店,它直接提供商品分类、促销活动、对比功能、品牌展示以及十二个定制首页,而多用主题则需要您手动拼凑这些功能。您起步时已完成了 80% 的任务,而不是面对一个“可以变成任何东西的空白画布”。对于商店而言,一个已经了解商店需求的专家主题,胜过需要教导的多用途主题。
老实说,多用主题的优势在于: 对于非商城类的网站来说,通用型主题更加灵活;如果你禁用其页面构建器并保持轻量化运行,它通常也更轻(无论选择哪种构建器,基于构建器的主页每次加载都会额外增加约 100 KB 的 CSS 和 JavaScript)。如果你的项目有可能超出电子商务范围(例如博客网络、服务分支、落地页工厂),通用型主题可以灵活适应,而 Electro 则难以应对。像 WoodMart 这样的主题是强大的 WooCommerce 通用型主题,而如果你想将专业型外观与 Electro 直接对比,Martfury 则是与之接近的商城店面同类型主题。
两者都适用的缺点: Electro 的主页是使用 WPBakery 或 Elementor 构建的,因此如果你以后更换主题,这些布局无法干净地迁移。通用型主题也有同样的问题,受限于其自身的构建器。无论哪种选择,你都无法完整带走你的主页。根据你现在构建的内容来选择,而不是想象未来的迁移,因为迁移无论如何都很痛苦。
我的看法:对于真正的电子产品商店,选择专业型主题是正确的。在特定于商店的用户体验方面的先发优势,比你可能不会用到的灵活性更有价值。
自定义 Electro(面向开发者)
这是我没预料到会喜欢写的部分,因为很多电商主题除了提供一个设置面板和耸肩之外,什么都没给开发者留下。Electro 则不同,值得详细说明原因。
Electro 基于 Automattic 的入门主题 Underscores。仅仅这一事实就告诉了你大部分需要知道的信息:它基于标准,使用正常的 WordPress 模板结构,并公开了真正的钩子和过滤器 API,而不是将行为隐藏在专有框架中。如果你知道如何扩展一个构建良好的 WordPress 主题,那么你已经知道如何扩展 Electro。
动作钩子(Action hooks)。 Electro 在布局中有用的注入点触发了命名的动作钩子。我在主题自己的代码中确认的钩子包括:
electro_before_header以及electro_after_headerelectro_before_content,electro_content_top,electro_content_bottomelectro_sidebarelectro_single_product_actionelectro_shop_control_barelectro_dokan_store_before_header
这些功能让你无需触碰模板文件,就能将内容添加到页眉区域、商店控制栏、单产品页面和 Dokan 供应商店面。下面是一个紧跟在页眉之后的促销条:
add_action( 'electro_after_header', function () {
echo '<div class="site-promo">Free shipping on orders over $99 this week.</div>';
} );
以及添加到商店控制栏(产品网格上方带有排序和视图切换的条带)的一个小注释:
add_action( 'electro_shop_control_bar', function () {
echo '<span class="shop-note">All prices include tax.</span>';
} );
过滤器。 这正是 Electro 真正易于使用的地方。它不会强迫你使用选项面板,而是允许代码覆盖行为。已确认的过滤器包括 electro_enable_top_bar, electro_hide_top_bar_in_mobile, electro_header_cart_icon (默认 ec ec-shopping-bag,因为 Electro 自带其“ec”图标字体), electro_off_canvas_cart (默认 true), electro_wishlist_icon, electro_call_us_number, electro_call_us_text、 electro_use_predefined_colors。
通过代码关闭顶部栏:
add_filter( 'electro_enable_top_bar', '__return_false' );
禁用滑动式迷你购物车,将顾客导向完整的购物车页面:
add_filter( 'electro_off_canvas_cart', '__return_false' );
替换页眉购物车图标(默认为主题自带的 ec ec-shopping-bag 类):
add_filter( 'electro_header_cart_icon', function ( $icon ) {
return 'your-custom-icon-class';
} );
通过代码设置客服电话及其标签,当你管理多个客户站点并希望将联系信息存储在配置文件中(而非手动在面板中点击设置)时,非常方便。
add_filter( 'electro_call_us_number', function () {
return '+1 800 555 0142';
} );
add_filter( 'electro_call_us_text', function () {
return 'Mon to Fri, 9 to 6';
} );
子主题与 WooCommerce 模板覆盖。 Electro 遵循标准模式。创建子主题,然后通过将任意 WooCommerce 模板复制到子主题的 woocommerce/ 文件夹中(完全按照 WooCommerce 官方文档所述),即可覆盖该模板。没有什么特别的。如果你之前定制过 WooCommerce 主题,这完全是肌肉记忆。该主题还集成了 Advanced Custom Fields 用于某些页面和产品选项,所以如果你看到 ACF 字段控制布局,那是正常的。
现在说明真实的功能范围,以免你过度规划。 主题本身注册了 没有自定义文章类型 以及 没有简码。主题注册了 WooCommerce 小工具,而页面构建器元素来自 Electro Extensions 插件和你的构建器,品牌分类法来自 MAS Brands。还有 没有 WP-CLI 命令 而且 没有文档化的公共 REST API 由主题提供。因此,如果你的计划涉及通过主题提供的 CLI 或 REST 层来编写商店脚本,那么这里没有那个层。这里有的只是一个干净、可挂钩、可构建子主题的 WordPress 主题,对于大多数定制工作来说,这正是你所需要的。
供评估它的开发者注意: Electro 基于 Underscores 这一事实,是选择它而不是专有商业框架的最有力论据。当客户要求进行选项面板未涵盖的更改时,你有真正的钩子和真正的模板可以使用,而不是提交支持工单并等待。
常见问题解答
Electro 主题适合只有少量产品的小商店吗?
老实说,可能不太适合。Electro 围绕产品密集目录设计,包含部门、特价和品牌条。如果你只卖少量商品,大部分功能都用不上,而且你关闭功能所花的时间会比一个更简单的主题所花费的更多。对于只有五个产品的商店,一个简洁的区块主题或简单的 WooCommerce 主题开销更小。当你有一个真正的目录来填充那些网格时,Electro 才能展现其价值。
我必须配合 Electro 使用页面构建器吗?
对于预建首页来说,是的。十二个首页布局内置于 WPBakery 或 Elementor 中,编辑它们意味着要使用这些页面构建器。您可以完全运行标准的 WooCommerce 商店、分类和产品页面而无需接触构建器,因为这些是正常的主题模板。但旗舰首页设计依赖于构建器。如果您拒绝使用,Electro 将失去其很大一部分特色。
Electro 会拖慢我的网站吗?
有可能,如果您不加以控制的话。首页堆叠八个轮播、一个滑块和多个广告区块会变得沉重,而页面构建器也会增加自身负担。这并非 Electro 独有,任何功能丰富的商店主题都是如此。解决方法在于缓存加克制:使用缓存插件将首页作为静态 HTML 提供,对折叠线以下的轮播进行懒加载,并且只使用那些值得保留的小工具。做到这些,Electro 表现良好。忽略这点,任何丰富的主题都会卡顿。
Electro 与像 WoodMart 这样的多用途主题有什么区别?
Electro 是专为电子产品商店打造的专用主题,因此它自带商店特定的功能(部门菜单、比较、促销、品牌)即可使用。多用途主题是通才,可以构建任何类型的网站,但通常需要您自己组装这些商店功能。如果您正在构建电子产品商店,专用主题能让您走得更远更快。如果您的项目可能不是商店,通才主题比 Electro 更具灵活性。
我可以用 Electro 构建多供应商市场吗?
可以,通过 Dokan。Electro 内置了 Dokan 集成,因此供应商店铺继承您的品牌样式而非 Dokan 的默认样式。您仍需单独安装和配置 Dokan,因为 Electro 负责市场样式但不包含市场引擎。如需佣金、提现和更完整的供应商工具包,请添加 Dokan Pro。主题处理外观,Dokan 处理卖家机制。
Electro 主题支持暗色模式吗?
支持,原生支持。在主题选项的“常规”选项卡中,有一个“网站模式”设置,可以为整个店面选择暗色或亮色,此外还有一个可选的前端切换器,让访客自行切换。还有一个“暗色 Logo”插槽,确保您的 logo 在暗色头部中可见。这是真正的内置暗色模式,而非事后添加的 CSS 补丁。
我可以将 Electro 变成一个没有价格或购物车的目录吗?
1. 商品目录模式功能
没错。主题设置(Theme Options)里的商店(Shop)选项卡自带目录模式开关,一键开启后全站会隐藏商品价格与加入购物车按钮,仅需勾选一个复选框即可。
这个功能非常适合分销推广站点、需要客户询价的 B2B 供应商店铺,或是仅做产品展示的官网,无需额外安装插件实现。
2. Electro 对开发者友好吗?所有功能都被面板锁死无法自定义?
这款主题对开发者十分友好,市面上绝大多数电商主题都做不到这点。
Electro 基于 Underscores 基础框架开发,提供完整可用的动作钩子与过滤器 API(例如 electro_after_header、electro_off_canvas_cart),同时支持标准子主题、WooCommerce 模板覆盖重写。你不会被局限在后台设置面板提供的功能里。
客观说明它存在一处短板:主题本身不自带自定义文章类型、专属短代码、WP-CLI 命令以及公开 REST 接口。所有二次开发只能依托钩子、过滤器和模板文件来实现。
3. 后续更换主题,首页布局能直接迁移带走吗?
无法完整平滑迁移。你的首页是用 WPBakery 或 Elementor 可视化编辑器搭建,布局代码与编辑器、当前主题深度绑定。
商品、商品分类数据储存在 WooCommerce 里,不受换主题影响;但首页所有排版组件 —— 轮播图、优惠区块、品牌横向展示栏,都需要在新主题里重新搭建。
几乎所有依赖页面编辑器的电商主题都存在这种编辑器绑定锁定问题,这是通用取舍,并非 Electro 独有的缺陷。
4. Electro 支持多语言店铺吗?
支持。主题本身已做好本地化翻译适配,并且原生深度集成 WPML 多语言插件,主题内置文本、模板区域全部适配 WPML 翻译管理系统。
你需要单独安装 WPML 插件,但搭建多语言数码商城所需的底层兼容逻辑主题已经全部预置。面向多地区销售时,主题不会和多语言翻译功能产生冲突。
总结
Electro 是为数不多的、清楚自己定位的 WooCommerce 主题之一。它不会试图帮你搭建作品集网站或餐厅网站,而是专注于构建电子产品商店,并且在这方面做得比那些把电商仅当作诸多模式之一的通用型主题更好。分类菜单、对比表格、促销轮播、12 套精选首页以及 Dokan 样式,全都指向同一个目标——这种聚焦正是其最大魅力所在。
不过也有一些需要直言的保留意见。它依赖页面构建器,因此带来了臃肿和锁定问题。选项面板深得足以让你耗掉整个下午。而满是轮播的首页需要缓存和优化策略,否则会影响加载速度。但这些对于 Electro 实际面向的商店卖家来说,都不是致命问题。它们是这款主题的代价——它给你的是一个现成可用的超级商店,而非一张白纸。
真正让我心动的是开发者故事。Electro 基于 Underscores,提供了真正的钩子、真正的过滤器以及标准的子主题覆盖方式,因此在那些专有主题会变得僵化的地方,它保持了灵活性。商店卖家可以快速起步;开发者则可以获得一个能够真正根据客户需求进行定制的主题。这种组合的可贵程度远超想象。
发表回复