如何使用WordPress媒体上传工具为图片上传添加meta box?

时间:2017-02-11 作者:Ravi

我不希望在通过metabox上载图像文件时出现thickbox弹出窗口。我想在使用metabox上传媒体时添加WordPress媒体上传弹出框。有什么想法吗?http://wordpress.stackexchange.com/questions/67065/add-upload-media-button-in-meta-box-field

1 个回复
最合适的回答,由SO网友:Ravi 整理而成

我找到了最好的解决方案,请检查:

jQuery Code

jQuery(function($){
    /*
     * Select/Upload image(s) event
     */
    $(\'body\').on(\'click\', \'.misha_upload_image_button\', function(e){
        e.preventDefault();

            var button = $(this),
                custom_uploader = wp.media({
            title: \'Insert image\',
            library : {
                // uncomment the next line if you want to attach image to the current post
                // uploadedTo : wp.media.view.settings.post.id, 
                type : \'image\'
            },
            button: {
                text: \'Use this image\' // button label text
            },
            multiple: false // for multiple image selection set to true
        }).on(\'select\', function() { // it also has "open" and "close" events 
            var attachment = custom_uploader.state().get(\'selection\').first().toJSON();
            $(button).removeClass(\'button\').html(\'<img class="true_pre_image" src="\' + attachment.url + \'" style="max-width:95%;display:block;" />\').next().val(attachment.id).next().show();
            /* if you sen multiple to true, here is some code for getting the image IDs
            var attachments = frame.state().get(\'selection\'),
                attachment_ids = new Array(),
                i = 0;
            attachments.each(function(attachment) {
                attachment_ids[i] = attachment[\'id\'];
                console.log( attachment );
                i++;
            });
            */
        })
        .open();
    });

    /*
     * Remove image event
     */
    $(\'body\').on(\'click\', \'.misha_remove_image_button\', function(){
        $(this).hide().prev().val(\'\').prev().addClass(\'button\').html(\'Upload image\');
        return false;
    });

});

Functions.php

function misha_include_myuploadscript() {
    /*
     * I recommend to add additional conditions just to not to load the scipts on each page
     * like:
     * if ( !in_array(\'post-new.php\',\'post.php\') ) return;
     */
    if ( ! did_action( \'wp_enqueue_media\' ) ) {
        wp_enqueue_media();
    }

    wp_enqueue_script( \'myuploadscript\', get_stylesheet_directory_uri() . \'/customscript.js\', array(\'jquery\'), null, false );
}

add_action( \'admin_enqueue_scripts\', \'misha_include_myuploadscript\' );

function misha_image_uploader_field( $name, $value = \'\') {
    $image = \' button">Upload image\';
    $image_size = \'full\'; // it would be better to use thumbnail size here (150x150 or so)
    $display = \'none\'; // display state ot the "Remove image" button

    if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) {

        // $image_attributes[0] - image URL
        // $image_attributes[1] - image width
        // $image_attributes[2] - image height

        $image = \'"><img src="\' . $image_attributes[0] . \'" style="max-width:95%;display:block;" />\';
        $display = \'inline-block\';

    } 

    return \'
    <div>
        <a href="#" class="misha_upload_image_button\' . $image . \'</a>
        <input type="hidden" name="\' . $name . \'" id="\' . $name . \'" value="\' . $value . \'" />
        <a href="#" class="misha_remove_image_button" style="display:inline-block;display:\' . $display . \'">Remove image</a>
    </div>\';
}

/*
 * Add a meta box
 */
add_action( \'admin_menu\', \'misha_meta_box_add\' );

function misha_meta_box_add() {
    add_meta_box(\'mishadiv\', // meta box ID
        \'More settings\', // meta box title
        \'misha_print_box\', // callback function that prints the meta box HTML 
        \'post\', // post type where to add it
        \'normal\', // priority
        \'high\' ); // position
}

/*
 * Meta Box HTML
 */
function misha_print_box( $post ) {
    $meta_key = \'second_featured_img\';
    echo misha_image_uploader_field( $meta_key, get_post_meta($post->ID, $meta_key, true) );
}

/*
 * Save Meta Box data
 */
add_action(\'save_post\', \'misha_save\');

function misha_save( $post_id ) {
    if ( defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE ) 
        return $post_id;

    $meta_key = \'second_featured_img\';

    update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );

    // if you would like to attach the uploaded image to this post, uncomment the line:
    // wp_update_post( array( \'ID\' => $_POST[$meta_key], \'post_parent\' => $post_id ) );

    return $post_id;
}

相关推荐

css media query question

我想这是一个新手问题,但在这里。我一直在编辑一个子主题CSS,并试图更改此特定代码@media (min-width: 769px) #carousel-hestia-generic span.sub-title { font-size: 24px; } 这是我从铬合金中看到的。当我把它添加到我的风格中时。css在我的孩子的主题,使字体大小,让我们说36px,它不会改变。实际上,Chrome显示了删除线。。。the element I w