如何构建你的第一个扩展


目录

本指南将教你如何使用 create-woo-extension 来创建 WooCommerce 扩展。与从头开始手动创建扩展相比,使用 create-woo-extension 具有诸多优势,包括:

需要编写的样板代码更少,需要手动设置的依赖项也更少。

诸如 Blocks 等现代特性默认支持,并且单元测试、代码检查和 Prettier IDE 配置已准备就绪。

在设置好你的扩展后,我们将向你展示如何使用 wp-env 快速搭建开发环境。

需求

在开始之前,你需要在你的设备上安装以下工具:

本指南也假设你熟悉命令行操作。

创建您的扩展

打开您的终端,并运行以下命令:

 npx @wordpress/create-block -t @woocommerce/create-woo-extension my-extension-name

如果您希望设置自定义的扩展名称,可以将 my-extension-name 替换为任何别名。请注意,您的别名不能包含空格。

如果您看到类似 Need to install the following packages: @wordpress/create-block@4.34.0. Ok to proceed? 的提示,请按 Y 键。

当软件包完成您的扩展的生成后,使用以下命令进入扩展文件夹:

 cd my-extension-name

然后,使用 npm install 安装扩展的依赖项,并使用 npm run build 进行构建。

恭喜!您已经成功创建了一个 WooCommerce 扩展!您的扩展将具有以下文件结构:

设置开发环境

我们建议使用 wp-env 来搭建本地开发环境。您可以 在此处了解更多关于 wp-env 的信息。 如果您尚未在本地安装 wp-env,可以使用以下命令进行安装: npm -g i @wordpress/env.

安装完 wp-env 后,并且仍然在您的 my-extension-name 文件夹中,运行 wp-env start 命令。 几秒钟后,一个测试 WordPress 站点,其中包含您的 WooCommerce 和您的扩展程序,将在 localhost:8888 上运行。

如果您没有为您的扩展程序设置自定义名称,您可以访问 wp-admin/admin.php?page=wc-admin&path=%2Fmy-extension-name 来查看由 /src/index.js 生成的 设置页面。 wp-env 的默认用户名/密码组合是 admin / password。

下一步

现在您已经搭建好了您的扩展程序,您可以开始添加一些功能了! 以下是一些您可以包含的简单功能:

如何将自定义字段添加到简单产品和可变产品

参考

访问 NPM 上的 @woocommerce/create-woo-extension 以获取包的参考信息 查看 wp-env 的命令参考,以了解更多关于高级功能的信息


版本号 #2
由 壳壳虫 创建于 2026-03-09 11:53:58 UTC
由 壳壳虫 更新于 2026-03-09 11:53:58 UTC