如何在古腾堡的“文档”下添加新面板

更新于 2022年1月22日 wordpress教程

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

如何在古腾堡的“文档”下添加新面板

在此处输入图片说明

解决方案

他们现在添加了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 po​​st 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 );
}

您现在可以使用较新的useSelectuseDispatch自定义挂钩。 它们类似于withSelectwithDispatch ,但利用 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'),

希望这有帮助。

你可能还喜欢下面这些文章

wordpress怎么调用特定文章列表wordpress怎么调用特定文章列表

a href=”< //cat=1为调用ID为1的分类下文章 “title=”<

如何自动为WordPress文章添加特色图像如何自动为WordPress文章添加特色图像

add_action(‘the_post’, ‘wpforce_featured’);

B2缩略图修改B2缩略图修改

主题 Modules/Common/Post.php 467 行 isset($post->ID)) return ”; return get_wpac_thumbnail($post_id);

Wordpress 主循环 - 如何在指定文章数之前添加classWordPress 主循环 – 如何在指定文章数之前添加class

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

WordPress怎么增加文章排序方式WordPress怎么增加文章排序方式

WordPress怎么增加文章排序方式? 实现过程也比较简单,一个是构造链接,另外一个是使用query_posts来改变一下主循环就可以了。 $orderby, ‘order’ =>

当HTML 中有多个class属性会出现什么问题当HTML 中有多个class属性会出现什么问题

当一个元素有多个class属性时会发生什么? div id=”test” class=”one two three” class=”four”> div id=”post-<

wordpress如何在一个页面显示所有文章wordpress如何在一个页面显示所有文章

让WordPress一个页面显示全部分类的文章 cat=’ . $cat-> php echo $cat-> a href=”< $cats = get_categories(array(‘include’ =>

wordpress怎么获取某个栏目链接地址wordpress怎么获取某个栏目链接地址

” title=”Category Name”> $cat_links=get_category_link($cat-> php echo $cat->

好看 (0) 很好看 (0) 非常好看 (0)
赞赏

微信赞赏支付宝赞赏