Question

所以基本上我采用了这里描述的代码：http://codex.wordpress.org/Function_Reference/add_meta_box#Procedural

它工作得很好。然后我去了我的content.php（单页，页面）并写了以下内容： <?php $fea_vid= get_post_meta($post->ID, '_my_meta_value_key', true); ?>

并打印出来：

<?php echo $fea_vid; ?>

现在它可以正常工作，如果我在BUT中打字，这是我的问题：

我希望用户能够在自定义元框输入中嵌入视频嵌入代码，然后我希望该代码在页面上显示视频。如果你使用自定义字段，它的工作正常...但我想要一个特殊的盒子，因为我希望它显而易见代码就在那里。使它更加用户友好...

所以是的...如何阻止wordpress从元框条目中删除所有html代码以及如何使其正确显示视频？

谢谢！

Answer 1

我认为有两种方法可以攻击它。首先，我们可以切换到文本区域输入，然后以不同方式清理它，以便允许iframe（WordPress通常不允许）。我不喜欢这种方法，因为从技术上讲，你可以保存含有未知来源的iframe，但它确实有效。

第二种方法是继续使用文本输入，然后使用WordPress的wp_get_oembed()函数输出嵌入代码。这将适用于各种允许的提供商，例如Youtube和Vimeo。只要您使用允许的提供程序，此方法就更安全了，而且我相信可以在使用非常模糊的人的情况下将提供程序添加到白名单中。

我将在我修改过的元数据代码中包含两者：

/**
 * Prints the box content.
 * 
 * @param WP_Post $post The object for the current post/page.
 */
function myplugin_meta_box_callback( $post ) {

    // Add an nonce field so we can check for it later.
    wp_nonce_field( 'myplugin_meta_box', 'myplugin_meta_box_nonce' );

    /*
     * Use get_post_meta() to retrieve an existing value
     * from the database and use the value for the form.
     */
    $input = get_post_meta( $post->ID, '_my_meta_input', true );
    $textarea = get_post_meta( $post->ID, '_my_meta_textarea', true );

    echo '<label for="myplugin_new_textarea">';
    _e( 'Description for this textarea', 'myplugin_textdomain' );
    echo '</label> ';
    echo '<textarea id="myplugin_new_textarea" name="myplugin_new_text_area">' . esc_html( $textarea ) . '</textarea>';
    echo '<br>';
    echo '<label for="myplugin_new_input">';
    _e( 'Description for this input', 'myplugin_textdomain' );
    echo '</label> ';
    echo '<input id="my_plugin_new_input" type="text" name="myplugin_new_text_input" value="' . esc_url( $input ) . '" size="25" />';

}

保存例程与codex示例略有不同。您会看到，对于文字输入，我仍在使用sanitize_text_field()，但对于文字区域，我要将iframe添加到允许标记的白名单中，并通过wp_kses()运行内容。奥托在各种kses functions上写了一篇很棒的文章，比我更好地解释了它。我选择wp_kses()，因为它允许我仅在此情况下将iframe列入白名单。如果您在周围搜索，我相信如果您愿意，也可以发现如何将帖子内容列入iframe白名单。

/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function myplugin_save_meta_box_data( $post_id ) {

    /*
     * We need to verify this came from our screen and with proper authorization,
     * because the save_post action can be triggered at other times.
     */

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

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
        return;
    }

    // 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;
    }

    // Check the user's permissions.
    if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }

    } else {

        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return;
        }
    }

    /* OK, its safe for us to save the data now. */

    // Save the textarea 
    if ( isset( $_POST['myplugin_new_text_area'] ) ) {

        // WP's default allowed tags
        global $allowedtags;

        // allow iframe only in this instance
        $iframe = array( 'iframe' => array(
                            'src' => array (),
                            'width' => array (),
                            'height' => array (),
                            'frameborder' => array(),
                            'allowFullScreen' => array() // add any other attributes you wish to allow
                             ) );

        $allowed_html = array_merge( $allowedtags, $iframe );

        // Sanitize user input.
        $my_data = wp_kses( $_POST['myplugin_new_text_area'], $allowed_html );

        //$my_data = $_POST['myplugin_new_text_area'];

        // Update the meta field in the database.
        update_post_meta( $post_id, '_my_meta_textarea', $my_data );
    }

    // save the text input
    if ( isset( $_POST['myplugin_new_text_input'] ) ) {
        // Sanitize user input.
        $my_data = sanitize_text_field( $_POST['myplugin_new_text_input'] );
        // Update the meta field in the database.
        update_post_meta( $post_id, '_my_meta_input', $my_data );
    }

}
add_action( 'save_post', 'myplugin_save_meta_box_data' );

现在终于在前端显示内容了。您应该能够直接回显文本区域的内容。如果你通过wp_oembed_get()运行文本输入，你应该看到几乎相同的东西：

$input = get_post_meta( $post->ID, '_my_meta_input', true );
echo wp_oembed_get( $input );

$textarea = get_post_meta( $post->ID, '_my_meta_textarea', true );
echo $textarea;

Answer 2

我建议将元框更改为textarea

放置此行而不是input type text

 echo '<textarea id="myplugin_new_field" name="myplugin_new_field" cols="60" rows="4">. esc_attr( $value ) . </textarea>';

那么它应该正确回显

Wordpress自定义元框正确显示HTML代码

2 个答案: