自定义字段提供了一种为网站内容分配额外信息的方法。这些信息通常被称为元数据。
元数据是关于信息的信息。就WordPress而言，它是与帖子、用户、评论和术语相关的信息。
鉴于WordPress中元数据的多对一关系，你的选择是相当无限的。你可以有你想要的许多元选项，而且你可以在其中存储几乎任何东西。
—Plugin Handbook
下面是一些你可以使用自定义字段附加到文章的元数据的例子：
- 地方或房地产的地理坐标
- 事件的日期
- 书的国际标准书号或作者
- 文章作者当天的心情
或者更多其他信息。
开箱即用，WordPress并没有提供一个简单的方法来添加和管理自定义字段。在经典编辑器中，自定义字段显示在页面底部的一个框中，位于文章编辑器的下面。
经典编辑器中的自定义字段。
在Gutenberg中，自定义字段默认是禁用的，但你可以通过选择文章设置中的相应项目来显示它们。
将自定义字段面板添加到区块编辑器中。
不幸的是，如果不使用插件或不动手写代码，就没有办法在前台显示元数据。
如果你是一个用户，你会发现有几个优秀的插件在为你做这项工作。但是，如果你是一个开发者，想从WordPress的自定义字段中得到更多的东西，把它们无缝地集成到块编辑器中，并使用自定义的Gutenberg块在WordPress网站的前端显示它们，那么你就来对地方了。
因此，如果你想知道对于WordPress开发者来说，在Gutenberg和经典编辑器中使用WordPress自定义字段的最佳方式是什么，快速的答案是 “创建一个既适用于经典编辑器又适用于Gutenberg的插件”。
但不要太担心。如果创建一个插件来管理两个编辑器中的自定义字段可能有点棘手，我们会尽量使这个过程简单明了。一旦你理解了我们将在本文中讨论的概念，你将获得在Gutenberg中管理自定义元字段和建立各种网站所需的技能。
Info
本文假设你熟悉Node.js & npm、React和JavaScript等技术。还需要有WordPress开发的基本知识。
如果你是Gutenberg区块开发的新手，在开始阅读本文之前，请务必查看我们之前的指南：
- 构建自定义古腾堡区块
- 如何为古腾堡创建动态块
注意：在做任何事情之前，确保你的电脑上有最新版本的Node.js。
说了这么多，下面是我们的详细介绍：
- 用官方的create-block工具创建一个区块插件
- 在经典编辑器中添加元数据框
- 在古腾堡区块编辑器中添加自定义元字段（三个选项）
- 进一步阅读
用官方的create-block工具创建一个区块插件
第一步是创建一个新的插件，包含注册一个新的区块类型所需的所有文件和依赖性。块插件将允许你轻松地建立一个自定义块类型，用于管理和显示自定义元数据。
为了创建一个新的区块类型，我们将使用官方的create-block工具。关于如何使用create-block工具的详细介绍，请查看我们之前关于Gutenberg区块开发的文章。
打开你的命令行工具，导航到你的WordPress开发网站的插件目录，运行以下命令：
npx @wordpress/create-block
当出现提示时，添加以下细节:
- The template variant to use for this block: dynamic
- The block slug used for identification (also the output folder name): metadata-block
- The internal namespace for the block name (something unique for your products): meta-fields
- The display title for your block: Meta Fields
- The short description for your block (optional): Block description
- The dashicon to make it easier to identify your block (optional): book
- The category name to help users browse and discover your block: widgets
- Do you want to customize the WordPress plugin? Yes/No
让我们花点时间回顾一下这些细节，并尝试了解它们的使用情况。
- 用于识别的区块slug定义了该插件的文件夹名称和文本域。
- 区块名称的内部命名空间定义了整个插件代码中使用的区块内部命名空间和函数前缀。
- 区块的显示标题定义了插件的名称和编辑器界面中使用的区块名称。
设置可能需要几分钟的时间。当这个过程完成后，你会得到一个可用命令的列表。
区块插件成功安装。
在进入下一节之前，在你的命令行工具中，导航到你的插件的文件夹并运行以下命令：
cd metadata-block npm start
Important
确保每次启动Gutenberg开发环境时都要运行
npm start命令。当你运行
npm start时，一个观察器将在终端运行，并在任何变化后重建JS和CSS文件（阅读更多）。
你已经准备好构建你的代码了。下一步是编辑插件的主要PHP文件，为经典编辑器建立一个元框。
因此，在进入下一节之前，请安装并激活经典编辑器插件。
然后，打开插件界面，激活新的Meta Fields插件。
激活插件。
在经典编辑器中添加一个元框
在经典编辑器的上下文中，元框是一个容纳表单元素的容器，用于输入特定的信息，如文章作者、标签、类别等。
除了内置的元框，插件开发者可以添加任何数量的自定义元框，以包括HTML表单元素（或任何HTML内容），插件用户可以在其中输入插件的特定数据。
WordPress的API提供了有用的功能，可以轻松地注册自定义元框，包括你的插件工作所需的所有HTML元素。
要开始的话，把下面的代码附加到你刚刚创建的插件的PHP文件中：
// register meta box
function meta_fields_add_meta_box(){
add_meta_box(
'meta_fields_meta_box',
__( 'Book details' ),
'meta_fields_build_meta_box_callback',
'post',
'side',
'default'
);
}
// build meta box
function meta_fields_build_meta_box_callback( $post ){
wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );
$title = get_post_meta( $post->ID, '_meta_fields_book_title', true );
$author = get_post_meta( $post->ID, '_meta_fields_book_author', true );
?>
Title
<input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="" />
Author
<input type="text" id="meta_fields_book_author" name="meta_fields_book_author" value="" />
