2.8 KiB
2.8 KiB
快速入门指南
本指南将帮助您构建一个基础区块,用于展示 WordPress 中的交互性 API 功能。
创建交互式区块
首先请确保您的计算机已安装 Node.js 和 npm。若尚未安装,请查阅 Node.js 开发环境指南。
接下来,使用 @wordpress/create-block 包和 @wordpress/create-block-interactive-template 模板来搭建完整的“我的第一个交互式区块”插件。
选择要创建插件的目录,然后在该目录下的终端中执行以下命令:
npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
提供的别名(my-first-interactive-block)将定义搭建插件的目录名称和内部区块名称。
基础使用
激活插件后,您可以探索该区块的工作方式。使用以下命令进入新创建的插件目录并启动开发流程:
cd my-first-interactive-block && npm start
当 create-block 搭建区块时,它会自动安装 wp-scripts 并将最常用的脚本添加到区块的 package.json 文件中。关于此包的详细介绍,请参阅 wp-scripts 入门指南。
执行 npm start 命令将启动开发服务器,并监视区块代码的变更,在代码修改时自动重新构建区块。
完成修改后,运行 npm run build 命令。这将优化区块代码,使其达到生产环境标准。
查看区块效果
如果您已运行本地 WordPress 环境,可以在该环境的 plugins 目录中执行上述命令。若尚未搭建环境,可通过在插件目录(my-first-interactive-block)中执行以下命令,使用 @wp-playground/cli 启动已安装该插件的 WordPress 站点:
npx @wp-playground/cli server --auto-mount
您将能够在任意文章中插入“我的第一个交互式区块”,并在发布后查看其在前端的表现效果。
如需获取交互式 API 的高级使用示例,可查阅以下资源: