Wordpress 自定义元框正确显示 HTML 代码 [英] Wordpress Custom Meta Box Display HTML CODE correctly

问题描述

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

so basically I took the code that is described here: http://codex.wordpress.org/Function_Reference/add_meta_box#Procedural

它工作得很好.然后我转到我的 content.php (single, page) 并写了以下内容:<?php $fea_vid= get_post_meta($post->ID, '_my_meta_value_key', true);?>

and it works just fine. Then I went over to my content.php (single, page) and wrote the following: <?php $fea_vid= get_post_meta($post->ID, '_my_meta_value_key', true); ?>

并打印:

<?php echo $fea_vid;?>

现在，如果我在 BUT 中输入文本就可以了，这是我的问题:

Now it works just fine if I typ text in BUT and here is my problem:

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

I want that the user is able to but a video embed code in the custom meta box input and then I want that code to display the video on the page. It works just fine if you use custom fields... but I want a special box for it, cause I want it to be obvious that the code just goes there. Make it more user friendly...

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

So yeah... How do I stop wordpress from stripping all html code off the meta box entry and how to I make it display the video correctly?

谢谢！

推荐答案

我认为有两种方法可以解决这个问题.首先，我们可以切换到文本区域输入，然后对其进行不同的清理以允许 iframe(WordPress 通常不允许).我不喜欢这种方法，因为从技术上讲，您可以保存未知来源的 iframe，但它确实有效.

I think there are 2 ways to attack this. First we can switch to a text area input and then sanitize it differently so as to allow iframes (which are not usually allowed by WordPress). I don't love this method as technically you can then save iframes with unknown sources, but it does work.

第二种方法是继续使用文本输入，然后使用 WordPress 的 wp_get_oembed 输出嵌入代码() 函数.这将适用于各种允许的提供商，例如 Youtube 和 Vimeo.只要您使用允许的提供者，这种方法就更安全，而且我相信可以将提供者添加到白名单中，以防万一您使用的是非常陌生的人.

The second method is to continue using a text input and then output the embed code using WordPress's wp_get_oembed() function. This will work on a variety of allowed providers, such as Youtube and Vimeo. This method is safer as long as you are using allowed providers and I believe it is possible to add providers to the whitelist in the off-chance you are using someone pretty obscure.

我会将两者都包含在我修改后的元框代码中:

I will include both in my modified metabox code:

/**
 * 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" />';

}

保存例程与代码示例略有不同.您会看到，对于文本输入，我仍在使用 sanitize_text_field() 但对于文本区域，我将 iframe 添加到允许标记的白名单并运行内容通过 wp_kses().Otto 在各种 kses 函数 上写了一篇很棒的文章，比我能更好地解释它.我选择了 wp_kses()，因为它允许我仅在这种情况下将 iframe 列入白名单.如果您四处搜索，我相信您也可以发现如何将帖子内容的 iframe 列入白名单(如果需要).

The save routine is where things are a little different from the codex example. You'll see that for the text input I am still using sanitize_text_field() but for the text area I am adding an iframe to the whitelist of allowed tags and running the content through wp_kses(). Otto wrote a great post on the various kses functions that explains it better than I could. I went with wp_kses() because it allowed me to whitelist the iframe only in this instance. If you search around I am sure you can discover how to whitelist an iframe for the post content as well, if you wanted.

/**
 * 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() 运行文本输入，您应该看到几乎相同的内容:

Now finally for displaying the content on the front end. You should be able to straight-out echo the contents of the text area. And if you run the text input through wp_oembed_get() you should see pretty much the same thing:

$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;

这篇关于Wordpress 自定义元框正确显示 HTML 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！