如何在 Woocommerce 自定义元框中允许 html

Question

如何为显示 html 的 woocommerce 产品页面创建自定义字段元框。

我想将翻页书的 iframe 预览放入其中。我尝试将 iframe 放置在元周围并仅使用 url，但这导致了其他问题。所以我只是想要一种简单的方法将 html 插入到元框中。

下面是我的代码：

// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
function create_custom_meta_box()
{
    add_meta_box(
        'custom_product_meta_box',
        __( 'Custom Previews', 'cmb' ),
        'add_custom_content_meta_box',
        'product',
        'normal',
        'default'
    );
}
}

//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
function add_custom_content_meta_box( $post ){
    $prefix = '_bhww_'; // global $prefix;

    $preview = get_post_meta($post->ID, $prefix.'preview_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'preview_wysiwyg', true) : '';
    $args['textarea_rows'] = 6;

    echo '<p>'.__( 'preview', 'cmb' ).'</p>';
    wp_editor( $preview, 'preview_wysiwyg', $args );

    echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
}
}


//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{
function save_custom_content_meta_box( $post_id ) {
    $prefix = '_bhww_'; // global $prefix;

    // We need to verify this with the proper authorization (security stuff).

    // Check if our nonce is set.
    if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
        return $post_id;
    }
    $nonce = $_REQUEST[ 'custom_product_field_nonce' ];

    //Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce ) ) {
        return $post_id;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    // Check the user's permissions.
    if ( 'product' == $_POST[ 'post_type' ] ){
        if ( ! current_user_can( 'edit_product', $post_id ) )
            return $post_id;
    } else {
        if ( ! current_user_can( 'edit_post', $post_id ) )
            return $post_id;
    }

    // Sanitize user input and update the meta field in the database.
    update_post_meta( $post_id, $prefix.'preview_wysiwyg', wp_kses_post($_POST[ 'preview_wysiwyg' ]) );
    
}
}

// Create custom tabs in product single pages
add_filter( 'woocommerce_after_single_product_summary', 'preview_product_content' );

// Add content to custom tab in product single pages (2) 
function preview_product_content() {
global $post;

$product_preview = get_post_meta( $post->ID, '_bhww_preview_wysiwyg', true );

if ( ! empty( $product_preview ) ) {
    echo '<h2>' . __( 'Product Preview', 'woocommerce' ) . '</h2>';

        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_preview);
    }
}

Answer 1

我必须更新 sanatize 以允许 html

update_post_meta( $post_id, $prefix.'preview_wysiwyg', wp_kses_post($_POST[ 'preview_wysiwyg' ]) );

更改为

    update_post_meta( $post_id, $prefix.'bpreview_wysiwyg', wp_kses_post($_POST[ 'bpreview_wysiwyg' ],$allowed) );

我添加了变量 $allowed = wp_kses_allowed_html();

但是这仍然不允许 iframe

当我尝试在输出周围放置 iframe 代码时，我收到 404 服务器端访问不允许。