web-dev-qa-db-ja.com

グーテンベルクの「ドキュメント」の下に新しいパネルを追加する方法

カテゴリ、特集画像など、ドキュメントタブの下に新しいコンポーネントパネルを追加しようとしています。

enter image description here

wordpresswordpress-gutenberg
16
daniyalahmad

add_meta_boxはトリックを実行しますが、context引数に'side'の値を追加した場合のみです。

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

ああ、2日間無料で！

古い答え

このチュートリアル によると、カスタムサイドバーを追加して、カスタマイズされたフォーム入力で埋めることができます。

これは、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のmetaフィールドを登録します。

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

わかっています：

これはまだ必要な解決策ではありませんが、ほぼ解決策です。

6
uruk

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
})

WordPressコアにはまだないので、コアが更新されるのを待つか、Gutenbergプラグインをダウンロードした場合は、今すぐ使用できます。

4
Rice_Crisp

このコードをfunction.phpに追加できます。このコードは新しいタブを作成し、このタブにテキストフィールドを追加します。テキストフィールドは、post_metaテーブルのカスタムフィールドのようにデータベースに保存され、デフォルトWP post meta。
1。タブ_Настройки UTM_を作成します。
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 );
}
_
2
Кирилл Меркушев

add_meta_boxは、gutenbergエディター用の新しいパネルを追加します

0
Swopnil Dangol