Добавление кнопки загрузки изображений в метабокс WordPress

Вот как я создаю кнопку загрузки в метабоксе:

ФАЙЛ: template_dir/functions.php

Добавьте эти строки:

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');

// Добавляем метабокс  
function add_custom_meta_box() {  
    add_meta_box(  
        'custom_meta_box', // $id  
        'Custom Meta Box', // $title   
        'show_custom_meta_box', // $callback  
        'post', // $page  
        'normal', // $context  
        'high'); // $priority  
}  
add_action('add_meta_boxes', 'add_custom_meta_box');  

// Массив полей  
$prefix = 'custom_';  
$custom_meta_fields = array(
    array(  
        'name'  => 'Изображение',  
        'desc'  => 'Описание поля.',  
        'id'    => $prefix.'image',  
        'type'  => 'image'  
    )  
);

// Функция отображения метабокса  
function show_custom_meta_box() {  
global $custom_meta_fields, $post;  
// Используем nonce для проверки  
echo '';  

    // Начинаем таблицу полей и цикл  
    echo '';  
    foreach ($custom_meta_fields as $field) {  
        // Получаем значение поля, если оно существует для этого поста  
        $meta = get_post_meta($post->ID, $field['id'], true);  
        // Начинаем строку таблицы  
        echo ' 
                '.$field['label'].' 
                ';  
                switch($field['type']) {  
                    // Варианты полей 
                        // изображение  
                        case 'image':  
                            $image = get_template_directory_uri().'/images/image.png';    
                            echo ''.$image.'';  
                            if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }                 
                            echo    ' 
                                        <br/> 
                                             
                                             Удалить изображение 
                                            '.$field['desc'].'';  
                        break;  
                } //end switch  
        echo '';  
    } // end foreach  
    echo ''; // end table  
}

// Сохраняем данные  
function save_custom_meta($post_id) {  
    global $custom_meta_fields;  

    // проверяем nonce  
    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))   
        return $post_id;  
    // проверяем автосохранение  
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)  
        return $post_id;  
    // проверяем права  
    if ('page' == $_POST['post_type']) {  
        if (!current_user_can('edit_page', $post_id))  
            return $post_id;  
        } elseif (!current_user_can('edit_post', $post_id)) {  
            return $post_id;  
    }  

    // проходим по полям и сохраняем данные  
    foreach ($custom_meta_fields as $field) {  
        $old = get_post_meta($post_id, $field['id'], true);  
        $new = $_POST[$field['id']];  
        if ($new && $new != $old) {  
            update_post_meta($post_id, $field['id'], $new);  
        } elseif ('' == $new && $old) {  
            delete_post_meta($post_id, $field['id'], $old);  
        }  
    } // end foreach  
}  
add_action('save_post', 'save_custom_meta');

ФАЙЛ: template_dir/js/custom-js.js

    jQuery(function(jQuery) {  

        jQuery('.custom_upload_image_button').click(function() {  
            formfield = jQuery(this).siblings('.custom_upload_image');  
            preview = jQuery(this).siblings('.custom_preview_image');  
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');  
            window.send_to_editor = function(html) {  
                imgurl = jQuery('img',html).attr('src');  
                classes = jQuery('img', html).attr('class');  
                id = classes.replace(/(.*?)wp-image-/, '');  
                formfield.val(imgurl);  // получаем URL изображения и копируем в поле
                preview.attr('src', imgurl);  
                tb_remove();  
            }  
            return false;  
        });  

        jQuery('.custom_clear_image_button').click(function() {  
            var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();  
            jQuery(this).parent().siblings('.custom_upload_image').val('');  
            jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);  
            return false;  
        });  

    });  

Если вы хотите добавить больше типов полей, вы можете узнать больше здесь: Reusable Custom Meta Boxes Part 1: Intro and Basic Fields

Существует отличный фреймворк для работы с Metaboxes, который достаточно прост в использовании (хорошо документирован) и включает поддержку множества опций, включая загрузку изображений/файлов. Он доступен на Github: Custom Metaboxes and Fields (CMB). Если вы решите использовать CMB, вот один из способов реализации поля для загрузки файлов.

Вам нужно зарегистрировать метабокс для загрузки файлов и добавить вызов файла init.php CMB в ваш файл functions.php, используя следующий код:

function be_sample_metaboxes( $meta_boxes ) {
    $prefix = '_cmb_'; // Префикс для всех полей
    $meta_boxes['test_metabox'] = array(
        'id' => 'test_metabox',
        'title' => 'Test Metabox',
        'pages' => array('post'), // Тип записи (например, post, page и т.д.)
        'context' => 'normal',
        'priority' => 'high',
        'show_names' => true, // Показывать названия полей слева
        'fields' => array(
            array(
                'name' => __( 'Test Image', 'cmb' ),
                'desc' => __( 'Upload an image or enter a URL.', 'cmb' ),
                'id'   => $prefix . 'test_image',
                'type' => 'file',
            ),
        ),
    );

    return $meta_boxes;
}
add_filter( 'cmb_meta_boxes', 'be_sample_metaboxes' );

// Инициализация класса метабоксов
add_action( 'init', 'be_initialize_cmb_meta_boxes', 9999 );
function be_initialize_cmb_meta_boxes() {
    if ( !class_exists( 'cmb_Meta_Box' ) ) {
        require_once( './metabox/init.php' );
    }
}

Строка require_once( './metabox/init.php' ); во второй функции предполагает, что вы поместили файлы CMB Metabox в папку metabox внутри директории вашей темы. Чтобы вызвать это поле в вашем шаблоне (например, в single.php), вы можете использовать следующую функцию:

$file = get_post_meta( $post->ID, '_cmb_test_image', true );