Спасибо огромное Владимиру Брумеру за подсказку. Сделал мульти-загрузку изображений. Очень топорно, поскольку 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();
}
});
});
