Расширение интерфейса медиа-менеджера WordPress

1280

Вообще, тема кастомизации медиазагрузчика WordPress обширна и, к сожалению, в рунете раскрыта довольно слабо. Данный пост — лишь попытка собрать основные моменты в одном месте.

Если используется большое количество медиафайлов, в какой-то момент вы столкнетесь с проблемой управления и поиска. По умолчанию, файлы можно фильтровать только по датам, что не всегда удобно. Давайте сегодня попробуем расширить наш медиазагрузчик за счет добавления новых вкладок. Как вы сейчас убедитесь, вкладки позволят более гибко управлять файлами. Управление некоторыми функциями медиазагрузчика и внешнего вида осуществляется не на уровне php, а с помощью javascript, а значит, основная работа будет касаться изменения js.

Итак, для начала нам необходимо подключить js файл в административную часть с помощью хука admin_enqueue_scripts:

add_action( 'admin_enqueue_scripts', 'add_tab_script' );
function add_tab_script() {
    wp_enqueue_script( 'admin-js', get_template_directory_uri( __FILE__ ) . '/admin.js', array( 'jquery' ), '', true );       
}

Это стандартная процедура подключения стилей и скриптов.

Добавление своей вкладки

В сети довольно часто можно встретить добавление произвольной вкладки с помощью php:

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );
function custom_media_upload_tab_name( $tabs ) {
	$newtab = array(
		'tab_slug' => 'Your Tab Name'
	);
	return array_merge( $tabs, $newtab );
}

add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );
function custom_media_upload_tab_content() {
	// Add you content here.
}

Это удобно, если вы хотите добавить в загрузчик какой-либо нестандартный функционал. Однако, если задача не выходит за рамки заложенных в медиабиблиотеку возможностей, использование javascript — наиболее оптимально.

Редактирование менеджера медиафайлов в WordPress через php и javascript отличаются. Поэтому, оставим пока на время php код в покое, мы вернемся к нему чуть ниже.

Итак, добавление новой вкладки произведем, добавив следующий код в созданный выше js файл:

jQuery( document ).ready( function() {
	( function( $ ) {
		var media = wp.media;
		if ( media ) {
			var Library = wp.media.controller.Library;
			var oldMediaFrame = wp.media.view.MediaFrame.Post;

			// Extending the current media library frame to add a new tab
			wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
				
				initialize: function() {
					// Calling the initalize method from the current frame before adding new functionality
					oldMediaFrame.prototype.initialize.apply( this, arguments );
					var options = this.options;  
					// Adding new tab
					this.states.add([
						new Library({
							id:         'inserts',
							title:      'My tab',
							priority:   100,
							toolbar:    'main-insert',
							filterable: 'all',
							library:    wp.media.query( options.library ),
							multiple:   false,
							editable:   false,
							library:  wp.media.query( _.defaults({
								// Adding a new query parameter
								lucky: 'lucky',

							}, options.library ) ), 
							 
							// Show the attachment display settings.
							displaySettings: true,
							// Update user settings when users adjust the
							// attachment display settings.
							displayUserSettings: true
						}), 
					]);
				}, 

			});
		}
	}(jQuery));
});

Вы можете управлять, каким образом будет работать медиа-библиотека через изменение параметров.

Повесим функцию на хук ajax_query_attachments_args, который отфильтрует аргументы передаваемые WP_Query во время Ajax-вызова.

#1 Выведем все медиафайлы формата zip

add_filter( 'ajax_query_attachments_args', 'query_attachments', 99 );
function query_attachments( $args ) {
    if( isset( $_POST['query']['lucky'] ) ) {
	// image/gif, image/png, image/jpeg, application/zip, application/pdf etc.
        $args['post_mime_type'] = array( 'application/zip' ); 
        unset( $_POST['query']['lucky'] );
    }
    return $args;
}

Вы можете выводить медиафайлы и других форматов. Полный список вы можете посмотреть здесь. Однако, учтите, что WordPress в целях безопасности устанавливает запрет на загрузку некоторых MIME типов. Впрочем, эти ограничения довольно легко снять.

#2 Выведем 5 случайных изображений

add_filter( 'ajax_query_attachments_args', 'query_attachments', 99);
function query_attachments( $args ) {
    if( isset( $_POST['query']['lucky'] ) ) {
        $args['orderby'] = 'rand';
        $args['posts_per_page'] = '5'; 
        unset( $_POST['query']['lucky'] );
    }
    return $args;
}

Теперь приведу еще несколько примеров, не связанных с использованием javascript.

#3 Удаление вкладок медиазагрузчика

Я конечно не совсем понимаю в каких случаях это применимо, но на всякий случай оставлю здесь:

add_filter( 'media_upload_tabs', 'remove_media_tabs', 999999 );
function remove_media_tabs( $tabs ) {
	unset( $tabs['type'] );     // Удаляет вкладку "С компьютера"
	unset( $tabs['type_url'] ); // Удаляет вкладку "Вставить с сайта"
	unset( $tabs['gallery'] );  // Удаляет вкладку "Создать галерею"
	unset( $tabs['library'] );  // Удаляет вкладку "Медиабиблиотека"
	return $tabs;
}

#4 Добавление медиафайлам произвольного поля и их автоматическое сохранение

// Добавление произвольного поля
function st_custom_field( $form_fields, $post ){
	$form_fields['st-img-link'] = array(
		'label' => __('Custom Field'),
		'input' => 'text',
		'value' => get_post_meta( $post->ID, '_st_img_link', true ),
		'helps' => __( 'Descriptive text about purpose of adding custom field' ),
	);
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'st_custom_field', null, 2 );

// Сохранение произвольного поля без перезагрузки
function st_save_custom_field( $post, $attachment ){
	if( isset( $attachment['st-img-link'] ) ){
		update_post_meta( $post['ID'], '_st_img_link', $attachment['st-img-link'] );
	}
	return $post;
}
add_filter( 'attachment_fields_to_save', 'st_save_custom_field', null, 2 );

#5 Добавление медиафайлам тегов

add_filter( 'attachment_fields_to_edit', 'add_media_custom_field', null, 2 );
function add_media_custom_field( $form_fields, $post ) {
	// Getting the tags
	$tags = get_post_meta( $post->ID, 'tags', true );
	// Getting all the users
	$users = get_users();
	$tag_html = '';
	foreach ( $users as $user ) {
		// Adding the checkbox HTML with the 'checked="checked"' attribute if the user ID is a tag key
		$tag_html .= '<input ' . checked( array_key_exists( $user->ID, $tags ), true, false ) . ' type="checkbox" name="attachments[' . $post->ID . '][tag][' . $user->ID . ']"> ' . $user->display_name . '<br/>';
	}
	// Adding the tag field
	$form_fields['tag'] = array( 
		'label'  => __( 'Tags:' ),
		'input'  => 'html',
		'html'   => $tag_html
	);
	return $form_fields;
}

function save_attachment( $attachment_id ) {
	if ( isset( $_REQUEST['attachments'][ $attachment_id ]['tag'] ) ) {
		$tags = $_REQUEST['attachments'][ $attachment_id ]['tag'];
		update_post_meta( $attachment_id, 'tags', $tags );
	}
}
add_action( 'edit_attachment', 'save_attachment' );

Вместо заключения

Код медиабиблиотеки достаточно сложный, так как содержит более 6000 строк кода. Однако, имея в арсенале приведенные выше примеры, вы можете реализовывать более сложные задачи. Надеюсь, что данный пост оказался для полезным.

Добавить комментарий

B I PHP JS

Made with by CodyShop