如何在古腾堡的“文档”下添加新面板
我正在尝试在文档选项卡下添加一个新的组件面板,例如类别、特色图像等。

解决方案
他们现在添加了PluginDocumentSettingPanel 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
})
add_meta_box
可以解决问题,但前提是您添加值为'side'
的context
参数:
add_meta_box(
'box-id-here',
'Box Title Here',
'createBoxHtml',
'post',
'side' ); // <-- this is important
啊哈,两天一无所获!
旧答案
根据这个教程,我们可以添加自定义侧边栏并使用自定义表单输入填充它。
这是 React JSX 版本中的一个工作示例。 这增加了一个元字段country
:
const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch } = wp.data;
// Customized TextControl
const CustomMetaField = withDispatch( ( dispatch, props ) => {
return {
updateMetaValue: ( v ) => {
dispatch( 'core/editor' ).editPost( {
meta: {
[ props.metaFieldName ]: v
}
});
}
};
})( withSelect( ( select, props ) => {
return {
[ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]
};
} )( ( props ) => (
<TextControl
value={props[ props.metaFieldName ] }
label="Country"
onChange={( v ) => {
props.updateMetaValue( v );
}}
/> )
) );
// Our custom sidebar
registerPlugin( 'custom-sidebar', {
render() {
return (
<PluginSidebar
name="project-meta-sidebar"
title="Project Meta">
<div className="plugin-sidebar-content">
<CustomMetaField metaFieldName="country" />
</div>
</PluginSidebar>
);
},
} );
在 PHP 中,在init
hook 中注册元字段:
register_meta( 'post', 'country', [
'show_in_rest' => TRUE,
'single' => TRUE,
'type' => 'string'
] );
我知道:
这仍然不是必需的解决方案,但差不多。
您可以将此代码添加到您的 function.php。 此代码创建新选项卡并将文本字段添加到此选项卡。 文本字段像 post_meta 表中的自定义字段一样保存到数据库中,您可以像默认 WP post meta 一样输出它。
1. 创建标签。
2.创建自定义文本字段utm_post_class
3. 网站输出使用$utm = get_post_meta( $post->ID, 'utm_post_class', true );
//Article UTM Link
add_action( 'load-post.php', 'utm_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'utm_post_meta_boxes_setup' );
function utm_post_meta_boxes_setup() {
add_action( 'add_meta_boxes', 'utm_add_post_meta_boxes' );
add_action( 'save_post', 'utm_save_post_class_meta', 10, 2 );
}
function utm_add_post_meta_boxes() {
add_meta_box(
'utm-post-class',
'Настройки UTM',
'utm_post_class_meta_box',
'post',
'side',
'default'
);
}
function utm_post_class_meta_box( $post ) {
wp_nonce_field( basename( __FILE__ ), 'utm_post_class_nonce' );?>
<div class="components-base-control editor-post-excerpt__textarea">
<div class="components-base-control__field">
<label class="components-base-control__label" for="utm-post-class">UTM ссылка (необязательно)</label>
<input type="text" name="utm-post-class" id="utm-post-class" class="edit-post-post-schedule" value="<?php echo esc_attr( get_post_meta( $post->ID, 'utm_post_class', true ) ); ?>">
</div>
</div>
<?php }
function utm_save_post_class_meta( $post_id, $post ) {
if ( !isset( $_POST['utm_post_class_nonce'] ) || !wp_verify_nonce( $_POST['utm_post_class_nonce'], basename( __FILE__ ) ) )
return $post_id;
$post_type = get_post_type_object( $post->post_type );
if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
return $post_id;
$new_meta_value = ( isset( $_POST['utm-post-class'] ) ? $_POST['utm-post-class'] : '' );
$meta_key = 'utm_post_class';
$meta_value = get_post_meta( $post_id, $meta_key, true );
if ( $new_meta_value && '' == $meta_value )
add_post_meta( $post_id, $meta_key, $new_meta_value, true );
elseif ( $new_meta_value && $new_meta_value != $meta_value )
update_post_meta( $post_id, $meta_key, $new_meta_value );
elseif ( '' == $new_meta_value && $meta_value )
delete_post_meta( $post_id, $meta_key, $meta_value );
}
您现在可以使用较新的useSelect
和useDispatch
自定义挂钩。 它们类似于withSelect
和withDispatch
,但利用 React 16.8 中的自定义钩子来获得更简洁的开发体验:
(此外,使用@wordpress/scripts
,因此导入来自 npm 包而不是直接来自wp
对象,但两者都可以。)
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
数组中包含custom-fields
:
'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'custom-fields'),
希望这有帮助。
你可能还喜欢下面这些文章

字段类型含义必须例子post_titlestring文章标题是这是一个标题post_contentstring文章内容是这是文章内容post_categorystring文章分类不存在时会自动创建多个用逗号隔开是分类1,分类2post_tagsstring文章标签不存在会自动创建多个用逗号隔开否标签1,标签2post_namestring文章别名否biaoti 接口就支持seo_title这个字段,发布时会将内容发布到seo_title自定义字段。

wpac是一款wordpress自动配图插件,可以丰富文章内容,对提升排名有很大帮助。 p style=”font-size:18px; “>你可能还喜欢下面这些文章< p>{excerpt}<

标签是附在主要内容或帖子上用于识别的小信息。 以下是在WordPress中添加标签的步骤。 步骤(2) – 显示标签页面。 步骤(3) – 新创建的标签将显示在页面的右侧,如以下屏幕截图所示。

有没有办法在 WordPress 循环代码中获取多个项目: if ($count< a href=”https://stackoverflow.com/questions/19303556/wordpress-loop-how-to-count-items/<

网站获取流量需要依靠长尾词,但我们不可能把所有的长尾词都堆在标题或者正文中。 现在我开发了一款能自动匹配长尾词的插件wpkws,他的功能是找到和文章相似的长尾词,自动添加为标签。
微信赞赏
支付宝赞赏