首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何保存放置在PluginDocumentSettingPanel中的复选框的状态

PluginDocumentSettingPanel是WordPress插件开发中的一个特殊类,用于在编辑文章页面添加自定义设置面板。它常用于为插件添加一些额外的选项或配置。

要保存放置在PluginDocumentSettingPanel中的复选框的状态,可以采取以下步骤:

  1. 在插件的初始化函数中,注册一个新的自定义字段来保存复选框的状态。可以使用register_meta函数来完成注册。具体代码如下:
代码语言:txt
复制
function my_plugin_init() {
    register_meta( 'post', 'my_checkbox_field', array(
        'type' => 'boolean',
        'single' => true,
        'show_in_rest' => true,
    ) );
}
add_action( 'init', 'my_plugin_init' );
  1. 在PluginDocumentSettingPanel中,使用wp.data库来获取和更新复选框的状态。可以通过getMeta和updateMeta来实现。具体代码如下:
代码语言:txt
复制
const { PluginDocumentSettingPanel } = wp.editPost;
const { useSelect, useDispatch } = wp.data;

function MyPluginDocumentSettingPanel() {
    const meta = useSelect( ( select ) => {
        return select( 'core/editor' ).getEditedPostAttribute( 'meta' );
    } );
    const { editPost } = useDispatch( 'core/editor' );

    const onChangeCheckbox = ( newValue ) => {
        editPost( { meta: { my_checkbox_field: newValue } } );
    };

    return (
        <PluginDocumentSettingPanel
            name="my-plugin-panel"
            title="My Plugin Settings"
            className="my-plugin-panel"
        >
            <label>
                <input
                    type="checkbox"
                    checked={ meta.my_checkbox_field || false }
                    onChange={ ( e ) => onChangeCheckbox( e.target.checked ) }
                />
                Enable Option
            </label>
        </PluginDocumentSettingPanel>
    );
}

wp.plugins.registerPlugin( 'my-plugin-document-panel', {
    render: MyPluginDocumentSettingPanel,
} );

在上述代码中,我们使用了wp.data库中的useSelect和useDispatch来获取和更新复选框的状态。

  1. 保存设置。在用户更改复选框状态后,通过updateMeta函数将状态保存到WordPress的数据库中。具体代码如下:
代码语言:txt
复制
const onChangeCheckbox = ( newValue ) => {
    editPost( { meta: { my_checkbox_field: newValue } } );
    wp.data.dispatch( 'core/editor' ).savePost();
};

通过以上步骤,就可以在PluginDocumentSettingPanel中保存复选框的状态了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券