README

如何创建新的 Carbon Field 的分步指南。

简介

Carbon Fields 库有很多内置字段，但您可能需要根据特定项目需求定义新的字段类型。

以下教程将解释如何创建自定义的 Carbon Field。

为了使过程尽可能简单，我们准备了一个包含 PHP Carbon Field 类框架和 webpack 构建过程的 Carbon Field 模板。

模板结构

将所有文件中的 YOURFIELDNAME 和 yourfieldname (区分大小写) 占位符替换掉。同时重命名包含占位符的文件。

注意！ 如果您的字段名称包含多个单词，例如图片库，那么您的类名称应该如下所示

PHP 类: Image_Gallery_Field
React 组件注册: image_gallery (参考 registerFieldComponent@/assets/js/bootstrap.js)

编辑 webpack.config.js 并确保 const root 指向 Carbon Fields 安装目录（例如 const root = path.resolve(__dirname, '../vendor/includes/htmlburger/carbon-fields'); )
在根目录下执行 npm install 以安装所有构建过程要求。
执行 npm run build 以构建最终的压缩 assets

执行 npm run dev 在开发过程中持续构建 assets。注意，您应该将 define( 'SCRIPT_DEBUG', true ); 添加到您的 wp-config.php 文件中，以便加载开发构建过程生成的文件。

以下是您可以自定义的一些方法概述

to_json()

您可以使用此方法修改传递给代表字段的 React 组件的字段属性。

field_type_activated

用于调用一次每个字段类型的初始化过程（例如设置本地化文件）。

admin_enqueue_scripts()

用于添加 CSS/JavaScript 文件。

admin_init()

在字段初始化时对每个字段实例进行调用。 (后端)

init()

在字段初始化时对每个字段实例进行调用。 (后端，前端)