Как добавить мета-бокс для загрузки изображений, используя загрузчик медиафайлов WordPress?

Question 1

Я не хочу, чтобы это всплывающее окно thickbox появлялось при загрузке изображения через метабокс. Я хочу добавить всплывающее окно загрузки медиа WordPress при загрузке медиа с использованием метабокса. Есть идеи?

Question 2

Я нашел лучшее решение, пожалуйста, проверьте его:

Код jQuery

jQuery(function($){
    /*
     * Событие выбора/загрузки изображения(й).
     */
    $('body').on('click', '.misha_upload_image_button', function(e){
        e.preventDefault();

            var button = $(this),
                custom_uploader = wp.media({
            title: 'Вставить изображение',
            library : {
                // раскомментируйте следующую строку, если вы хотите прикрепить изображение к текущему посту
                // uploadedTo : wp.media.view.settings.post.id, 
                type : 'image'
            },
            button: {
                text: 'Использовать это изображение' // текст метки кнопки
            },
            multiple: false // для выбора нескольких изображений установите в true
        }).on('select', function() { // у него также есть события "open" и "close"
            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();
            /* если вы установите multiple в true, здесь есть код для получения ID изображений
            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();
    });

    /*
     * Удаление изображения
     */
    $('body').on('click', '.misha_remove_image_button', function(){
        $(this).hide().prev().val('').prev().addClass('button').html('Загрузить изображение');
        return false;
    });

});

Functions.php


function misha_include_myuploadscript() {
    /*
     * Я рекомендую добавить дополнительные условия, чтобы не загружать скрипты на каждой странице
     * например:
     * 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">Загрузить изображение";
    $image_size="full"; // лучше использовать размер миниатюры здесь (150x150 или около того)
    $display = 'none'; // состояние видимости кнопки "Удалить изображение"

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

        // $image_attributes[0] - URL изображения
        // $image_attributes[1] - ширина изображения
        // $image_attributes[2] - высота изображения

        $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 . '">Удалить изображение</a>
    </div>';
}

/*
 * Добавить метабокс
 */
add_action( 'add_meta_boxes', 'misha_meta_box_add' );

function misha_meta_box_add() {
    add_meta_box('mishadiv', // ID метабокса
        'Больше настроек', // заголовок метабокса
        'misha_print_box', // функция обратного вызова, которая выводит HTML метабокса
        'post', // тип записи, куда добавляется
        'normal', // приоритет
        'high' ); // позиция
}

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

/*
 * Сохранение данных метабокса
 */
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] );

    // если вы хотите прикрепить загруженное изображение к этому посту, раскомментируйте строку:
    // wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );

    return $post_id;
}

Как добавить мета-бокс для загрузки изображений, используя загрузчик медиафайлов WordPress?

Вопрос или проблема

Ответ или решение

Теория

Пример

Применение