Поле загрузчик файла word

Описываем создание поля для загрузки файлов word.

// Загрузка файла

function true_include_myuploadscript() {
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
	// меняем admin.js на название созданного скрипта
	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/js/upload-media-custom.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );

/* PHP-функция добавления полей в форму */
function true_word_uploader_field( $name, $value = '', $w = 100, $h = 99) {
	
	global $post;
	$uploader_word = get_post_meta($post->ID, 'uploader_word', true);
	if ($uploader_word) { $title = get_the_title($uploader_word); }
	
	$default = get_stylesheet_directory_uri() . '/images/word-icon-empty.png';
	if( $value ) {
		$image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
		//$src = $image_attributes[0];
		$src = get_stylesheet_directory_uri() . '/images/word-icon.png';
	} else {
		$src = $default;
	}
	echo '
	<div>
	<img data-src="' . $default . '" src="' . $src . '" width="' . $w . 'px" height="' . $h . 'px" title="'. $title .'" />
	<div>
	<input type="hidden" name="extra[uploader_word]" id="' . $name . '" value="' . $value . '" />
	<button type="submit" class="upload_word_button button">Загрузить</button>
	<button type="submit" class="remove_word_button button">×</button>
	</div>
	</div>
	';
}

// Использование в метабоксах
function true_meta_boxes_u() {
	add_meta_box('truediv', 'Настройки', 'true_print_box_u', 'post', 'side', 'high');
}
add_action( 'admin_menu', 'true_meta_boxes_u' );

function true_print_box_u($post) {
	if( function_exists( 'true_word_uploader_field' ) ) {
		true_word_uploader_field( 'uploader_word', get_post_meta($post->ID, 'uploader_word',true) );
	}
}

Скрипт по обновлению иконки (upload-media-custom.js)

jQuery(function($){
	//действие при нажатии на кнопку загрузки изображения
	//вы также можете привязать это действие к клику по самому изображению
	$('.upload_word_button').click(function(){
		var send_attachment_bkp = wp.media.editor.send.attachment;
		var button = $(this);
		wp.media.editor.send.attachment = function(props, attachment) {
			//$(button).parent().prev().attr('src', attachment.url);
			$(button).parent().prev().attr('src', '/wp-content/themes/meisterwerk-2/images/word-icon.png');
			$(button).parent().prev().attr('title', attachment.title);
			$(button).prev().val(attachment.id);
			wp.media.editor.send.attachment = send_attachment_bkp;
		}
		wp.media.editor.open(button);
		return false;    
	});
	
	// удаляем значение произвольного поля
	// если быть точным, то мы просто удаляем value у input type="hidden"
	$('.remove_word_button').click(function(){
		var r = confirm("Уверены?");
		if (r == true) {
			var src = $(this).parent().prev().attr('data-src');
			$(this).parent().prev().attr('src', src);
			$(this).parent().prev().removeAttr('title');
			$(this).prev().prev().val('');
		}
		return false;
	});
});

Иконки с двумя состояниями загруженности файлов

При загруженном файле иконка word будет меняться. Файлы иконок должны быть загружены в папку темы images. Нужно в скрипте поменять актуальный путь к иконке.

Поделиться в соц. сетях: