Как загрузить изображение в метабокс WordPress?

Question

[reaget]

Здравствуйте!
У меня есть необходимость создать свой метабокс с возможностью загрузки и сохранения изображений.
Метабокс выглядит так.


У меня 2 загвоздки:
Первая, как выбранные данные сохранить и в последующем показывать их в метабокс?
Вторая, как сделать возможность удаления ненужных и фотографий и загрузки дополнительных фото?

У меня есть код загрузки изображений в медиафайлы, но как сделать то же самое с метабокс, пока не знаю (впервые с этим столкнулся)

Прошу помочь)

Код метабокс:

function meta_gallery() {
	    add_meta_box('uploader-gallery', 'Галерея', 'print_gallery', 'post', 'normal', 'high');
	}

	add_action( 'admin_menu', 'meta_gallery' );
	function print_gallery($post) {
	    wp_nonce_field( basename( __FILE__ ), 'seo_metabox_nonce' );

        $html .= '<div class="box__wrapper">';
    	$html .= '	    <div class="box">';
    	$html .= '	        <div class="box__input">';
    	$html .= '	            <svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path></svg>';
        $html .= '              <input class="box__file" accept="image/*" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />';
        $html .= '              <label for="file"><strong>Выберите файл</strong><span class="box__dragndrop"> или перенесите его сюда</span></label>';
        $html .= '              <!--<button class="box__button" type="submit">Загрузить</button>-->';
        $html .= '        </div>';
    	$html .= '	</div>';
		$html .= '  <div class="box__preview"></div>';
    	$html .= '</div>';

		echo $html;
	}

		/*
		 * Этап 3. Сохранение
		 */
	function save_gallery_data( $post_id ) {
			// проверяем, пришёл ли запрос со страницы с метабоксом
	    if ( !isset( $_POST['seo_metabox_nonce'] )
	        || !wp_verify_nonce( $_POST['seo_metabox_nonce'], basename( __FILE__ ) ) )
		return $post_id;
			// проверяем, является ли запрос автосохранением
		if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
		    return $post_id;
			// проверяем, права пользователя, может ли он редактировать записи
		if ( !current_user_can( 'edit_post', $post_id ) )
		    return $post_id;
			// теперь также проверим тип записи	
		$post = get_post($post_id);
		
		return $post_id;
	}

	add_action('save_post', 'save_gallery_data');

Comments

[Владимир Брумер]

ну для начала метабокс регистрируйте через акшн add_action( 'add_meta_boxes'
Подключаем все файлы необходимые для использования медиа API WordPress (окно загрузки и выбора файлов). Функция подключает скрипты, стили, настройки и шаблоны

add_action('admin_enqueue_scripts','load_admin_styles_scripts');
if(!function_exists('load_admin_styles_scripts')){
  function load_admin_styles_scripts(){
    if(!did_action('wp_enqueue_media')){wp_enqueue_media();}

теперь Вы в любом месте в админки сможете добавить кнопку для библиотеки
для этого в нужном месте надо написать срипт, который будет открывать библиотеку, в данном случае в Вашем метабоксе
погуглите wp_enqueue_media примеров море
выводите данные в метабоксе, а вот сохранял я к примеру через

add_action('edit_post','VAB_update_SEO_meta',10,2);
if(!function_exists('VAB_update_SEO_meta')){
	function VAB_update_SEO_meta($post_ID,$post){
		$nonce=filter_input(INPUT_POST,'VAB_SEO_nonce',FILTER_SANITIZE_STRING);
		if(!$nonce){return $post_ID;}
		if(!wp_verify_nonce($nonce,'VAB_mode_SEO_nonce')){return;}
		if(defined('DOING_AUTOSAVE')&&DOING_AUTOSAVE){return;}
		if(!current_user_can('edit_post',$post_ID)){return;}
//ну и далее...

//update_post_meta()
//get_post_meta()
//delete_post_meta()

удаление и добавление все js
открываете кнопкой медиа библиотеку при выборе файла получаете его данные и вставляете в разметку метабокса с кнопкой удалить для каждого файла. для этой кнопки отдельный скрипт. при сохранении поста (обновлении) у Вас в мета попадут актуальные данные, которые вы запрашиваете в метабоксе. т.е. создаете како-либо массив, который наполняете...