vladimiraurelius

Спасибо огромное Владимиру Брумеру за подсказку. Сделал мульти-загрузку изображений. Очень топорно, поскольку php и jquery не изучал. Единственный баг когда выбираю изображение и тут же удаляю происходит перезагрузка страницы. Выложу что получилось, может кому-нибуть будет полезно.

вот что у меня получилось в function.php

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' ); 
function true_include_myuploadscript( $hook ) {
	
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}	
 	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/js/upload.js', array('jquery'), null, false );
}

function true_image_uploader_field( $args ) {

	$value = $args[ 'value' ];	
			
	$default = get_stylesheet_directory_uri() . '/placeholder.png';
 
	if( $value ) {
		$image_id_arr = explode(",", $value);
		foreach ($image_id_arr as $image_id) {
			$img_attribute = wp_get_attachment_image_src($image_id, 'medium', false);
			$img_src = $img_attribute[0];
			echo '
			<div>
				<img src="' . $img_src . '" width="150" />
				<button data-id="' . $image_id . '" type="submit" class="remove_image_button button">×</button>				
			</div>
			';
		}
	} else {
		$src = $default;
	}
	echo '
	<div class="trueimg">
		<div>
			<input type="hidden" name="' . $args[ 'name' ] . '" id="' . $args[ 'name' ] . '" value="' . $value . '" />
			<button type="submit" class="upload_image_button button">Загрузить</button>			
		</div>
	</div>
	';
	
}

//  Добавляем метабокс
add_action( 'add_meta_boxes', 'true_meta_boxes_u' );
 
function true_meta_boxes_u() {
	add_meta_box( 'truediv', 'Фотографии', 'true_print_box_u', 'model_profile', 'normal', 'high' );
}

//  Заполняем метабокс
function true_print_box_u( $post ) {
	if( function_exists( 'true_image_uploader_field' ) ) {
		true_image_uploader_field( array(
			'name' => 'uploader_custom',			
			'value' => get_post_meta( $post->ID, 'uploader_custom', true ),			
		) );		
	}
} 

//  Сохраняем данные произвольного поля 
add_action('save_post', 'true_save_box_data_u');
function true_save_box_data_u( $post_id ) {
	 
	if( isset( $_POST[ 'uploader_custom' ] ) ) {
		update_post_meta( $post_id, 'uploader_custom',  $_POST[ 'uploader_custom' ]  );	
	}
	return $post_id; 
}

В upload.js получился такой код

jQuery(function ($) {
    var button = $('.upload_image_button');

    $('.upload_image_button').click(function (e) {
        e.preventDefault();

        var custom_uploader = wp
            .media({
                title: 'Выбрать изображение',
                button: {
                    text: 'Выбрать изображение',
                },
                multiple: true, // Тут и нужно установить true для мультизагрузки
            })
            .on('select', function () {
                var value = $(button).prev().val();
                var attachment = custom_uploader.state().get('selection').toJSON();
                var img_id_arr = $.map(attachment, (obj) => {
                    return obj.id;
                });

                if (value) {
                    var current_arr = JSON.parse('[' + value + ']');
                    img_id_arr.forEach((element) => {
                        current_arr.unshift(element);
                    });
                } else {
                    current_arr = img_id_arr.reverse();
                }

                var upload_str = current_arr.join(',');
                $(button).prev().val(upload_str);

                $.map(attachment, (obj) => {
                    var new_div = $('<div>');
                    var new_img = $('<img>');
                    var new_btn = $('<button>');

                    $(new_img).attr('src', obj.url);
                    $(new_img).attr('width', 150);

                    $(new_btn).addClass('remove_image_button button');
                    $(new_btn).attr('type', 'submit');
                    $(new_btn).attr('data-id', obj.id);
                    $(new_btn).text('×');

                    $(new_div).append(new_img);
                    $(new_div).append(new_btn);
                    $('.trueimg').parent().prepend(new_div);
                });
            })
            .open();
    });

    $('.remove_image_button').click(function (event) {
        event.preventDefault();
        var value = $(button).prev().val();
        var old_arr = JSON.parse('[' + value + ']');

        if (true) {
            var current_arr = $.map(old_arr, (item) => {
                if (item != $(this).attr('data-id')) {
                    return item;
                }
            });
            var upload_str = current_arr.join(',');
            $(button).prev().val(upload_str);

            $(this).parent().remove();
        }
    });
});