Wordpress 如何在“下添加新面板”；文件「；在古腾堡

我试图在文档选项卡下添加一个新的组件面板，如类别、特色图像等

---

添加meta\u框为gutenberg编辑器添加一个新面板

添加meta\u框

将起作用，但前提是添加值为

'side'

的

上下文

-参数：

add_meta_box(
    'box-id-here',
    'Box Title Here',
    'createBoxHtml',
    'post',
    'side' ); // <-- this is important

在PHP中，在

init

-hook中注册meta字段：

register_meta( 'post', 'country', [
    'show_in_rest' => TRUE,
    'single' => TRUE,
    'type' => 'string'
] );

我知道：

---

这仍然不是必需的解决方案，但几乎是。

您可以将此代码添加到function.php中。此代码用于创建新选项卡并将文本字段添加到此选项卡。文本字段保存到数据库，就像post_meta表中的自定义字段一样，您可以像默认WP post meta一样输出此字段。
1.创建选项卡

ааааааааааUTM

2.创建自定义文本字段

utm\u post\u类

3.要在网站中输出，请使用

$utm=get\u post\u meta（$post->ID，'utm\u post\u class'，true）

//文章UTM链接
添加操作（'loadpost.php'，'utm_post_meta_box_setup'）；
添加操作（'loadpostnew.php'，'utm_post_meta_box_setup'）；
功能utm\u post\u meta\u框\u设置（）{
添加操作（'add_meta_box'、'utm_add_post_meta_box'）；
添加操作（'save_post'，'utm_save_post_class_meta'，10,2）；
}
函数utm_添加_发布_元框（）{
添加元框(
“utm邮政类”，
‘ааааааааааUTM’，
“utm\U邮政信箱”，
"岗位",，
"一边",，
“默认”
);
}
功能utm\U post\U类\U元盒（$post）{
wp_nonce_字段（basename（_文件）；“utm_post_class_nonce”）；？>
联合技术管理局（UTM）
他们现在已经加上了SlotFill

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
 
const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

const{registerPlugin}=wp.plugins
const{PluginDocumentSettingPanel}=wp.editPost
const PluginDocumentSettingPanelDemo=（）=>(
自定义面板内容
)
registerPlugin（'plugin-document-setting-panel-demo'{
呈现：PluginDocumentSettingPanelDemo
})
您现在可以使用较新的
useSelect
和
useDispatch
自定义钩子。它们类似于
with select
和
with dispatch
，但使用React 16.8中的自定义钩子可获得更简洁的开发体验：

（另外，使用
@wordpress/scripts
，因此导入是从npm包而不是直接从
wp
对象进行的，但两者都可以工作。）

如果用于自定义帖子类型，请确保在
支持的数组中包含
自定义字段
：

'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'custom-fields'),

希望这能有所帮助。
你有没有找到这个钩子？检查我的更新答案这会将你的旧元字段添加到侧栏。你知道如何实现一个新的基于反应的框吗？可以添加一个自定义侧栏，请看，我正在使用这种设置，但当我添加textcontrol时，它无法正常工作。当我尝试更改中的值时put字段未显示。它保持在初始值。可能是因为我在此设置中没有道具和其他东西。你能告诉我如何管理它，因为它的工作方式不同于block inspector吗？你知道我如何将其添加到所有其他文档设置选项的下面吗？它当前加载到“修订”上方，我希望它显示在下面“特色图片”
const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
 
const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';

const TextController = (props) => {
  const meta = useSelect(
    (select) =>
      select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
  );
  const { editPost } = useDispatch('core/editor');
  return (
    <TextControl
      label={__("Text Meta", "textdomain")}
      value={meta}
      onChange={(value) => editPost({ meta: { _myprefix_text_metafield: value } })}
    />
  );
};

const PluginDocumentSettingPanelDemo = () => {
  return (
    <PluginDocumentSettingPanel
      name="custom-panel"
      title="Custom Panel"
      className="custom-panel"
    >
      <TextController />
    </PluginDocumentSettingPanel>
  );
};

export default PluginDocumentSettingPanelDemo;

function myprefix_register_meta()
{
    register_post_meta('post', '_myprefix_text_metafield', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field',
        'auth_callback' => function () {
            return current_user_can('edit_posts');
        }
    ));
}
add_action('init', 'myprefix_register_meta');

'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'custom-fields'),