54 lines
4.1 KiB
Markdown
54 lines
4.1 KiB
Markdown
|
# 快速入门指南
|
|||
|
|
|
|||
|
|
本指南旨在通过实践操作演示WordPress区块开发的基本原理。按照以下步骤，您将在几分钟内创建一个使用现代JavaScript（ESNext和JSX）的自定义区块插件。该示例区块将显示版权符号（©）和当前年份，是任何网站页脚的完美补充。您可以通过以下短视频演示观看这些步骤的实际操作。
|
|||
|
|
|
|||
|
|
<iframe width="960" height="540" src="https://www.youtube.com/embed/nrut8SfXA44?si=YxvmHmAoYx-BDCog" title="WordPress区块开发：快速入门指南视频" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
|
|||
|
|
|
|||
|
|
## 搭建区块插件
|
|||
|
|
|
|||
|
|
首先确保您的计算机已安装Node.js和`npm`。如果尚未安装，请查阅[Node.js开发环境](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development/)指南。
|
|||
|
|
|
|||
|
|
接下来，使用[`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)包和[`@wordpress/create-block-tutorial-template`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block-tutorial-template/)模板来搭建完整的“版权日期区块”插件。
|
|||
|
|
|
|||
|
|
<div class="callout callout-info">
|
|||
|
|
<p>您可以使用<code>create-block</code>在任意位置搭建区块，然后在生成的插件文件夹内使用<a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a>。这将创建一个已安装并激活新区块插件的本地WordPress开发环境。</p>
|
|||
|
|
<p>如果您已有自己的<a href="https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment">本地WordPress开发环境</a>，请通过终端导航至<code>plugins/</code>文件夹。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
选择要创建插件的文件夹，然后在该文件夹的终端中执行以下命令：
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
提供的`slug`参数（`copyright-date-block`）定义了搭建插件的文件夹名称和内部区块名称。
|
|||
|
|
|
|||
|
|
导航至本地WordPress安装的插件页面，激活“版权日期区块”插件。随后该示例区块将在编辑器中可用。
|
|||
|
|
|
|||
|
|
## 基本使用
|
|||
|
|
|
|||
|
|
激活插件后，您可以探索区块的工作方式。使用以下命令进入新创建的插件文件夹并启动开发过程：
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
cd copyright-date-block && npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当`create-block`搭建区块时，它会安装`wp-scripts`并将最常用的脚本添加到区块的`package.json`文件中。请参阅[wp-scripts入门](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)文章了解该包的介绍。
|
|||
|
|
|
|||
|
|
`npm start`命令将启动开发服务器并监视区块代码的更改，在修改时重新构建区块。
|
|||
|
|
|
|||
|
|
完成更改后，运行`npm run build`命令。这将优化区块代码并使其达到生产就绪状态。
|
|||
|
|
|
|||
|
|
## 查看实际效果
|
|||
|
|
|
|||
|
|
您可以使用任何本地WordPress开发环境测试新区块，但搭建的插件包含`wp-env`配置。您的计算机必须已安装并运行[Docker](https://www.docker.com/products/docker-desktop)，如果满足条件，请运行`npx wp-env start`命令。
|
|||
|
|
|
|||
|
|
脚本运行完成后，您可以通过以下地址访问本地环境：<code>http://localhost:8888</code>。使用用户名`admin`和密码`password`登录WordPress仪表板。插件将已安装并激活。打开编辑器或站点编辑器，像插入任何其他区块一样插入版权日期区块。
|
|||
|
|
|
|||
|
|
访问[入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)了解更多关于`wp-env`的信息。
|
|||
|
|
|
|||
|
|
## 附加资源
|
|||
|
|
|
|||
|
|
- [create-block入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/)
|
|||
|
|
- [wp-scripts入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)
|
|||
|
|
- [wp-env入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)
|