Недавно был выпущен Wordpress 3.5, я использовал систему загрузки Wordpress Media через thickbox и window.send_to_editor
для некоторых параметров в моей теме Wordpress (фоны, логотипы и т.д.).
Но, как вы знаете, Wordpress интегрировал новый Media Manager, я хотел использовать эту новую функцию для загрузки изображений/файлов в качестве настраиваемых полей. Поэтому я провел утро, чтобы найти способ получить желаемый результат.
Я нашел это решение, которое может быть полезно для некоторых из вас. Благодарим вас за отзыв о коде или любые улучшения, которые вы имеете в виду!
Пример HTML:
<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">
Код jQuery:
$('.custom_media_upload').click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
$('.custom_media_image').attr('src', attachment.url);
$('.custom_media_url').val(attachment.url);
$('.custom_media_id').val(attachment.id);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open();
return false;
});
Если вы хотите увидеть все параметры, содержащиеся в переменной attachment
, вы можете сделать console.log(attachment)
или alert(attachment)
.
Не забудьте использовать wp_enqueue_media
(новый в 3.5), если вы не на странице редактирования сообщений
Чтобы использовать старый загрузочный ящик, вы можете сделать это:
if(function_exists( 'wp_enqueue_media' )){
wp_enqueue_media();
}else{
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
wp_enqueue_script()
. Я знаю, что wp_enqueue_media()
есть, но я бы предпочел использовать зависимость - есть ли способ сделать это? Я ищу имена всех необходимых библиотек - как вы делаете с медиа-сценариями до WP3.5 в вашем примере.
Ибо это происходит непреднамеренно. Вероятно, ваш код javascript должен выглядеть примерно так:
$('.custom_media_upload').click(function(e) {
e.preventDefault();
var custom_uploader = wp.media({
title: 'Custom Title',
button: {
text: 'Custom Button Text'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$('.custom_media_image').attr('src', attachment.url);
$('.custom_media_url').val(attachment.url);
$('.custom_media_id').val(attachment.id);
})
.open();
});
custom_uploader.on('open', function(){...customize...})
?
Я немного изменил этот код, чтобы сделать его пригодным для нескольких полей одновременно:
HTML:
<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px 10px 0px 0px; display:inline-block;" />
<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>
JQuery
jQuery(document).ready(function($){
$('.custom_media_upload').click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment) {
$(button).prev().prev().attr('src', attachment.url);
$(button).prev().val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
});
Я не нашел ничего, чтобы вызвать пользовательскую функцию, если редактор закрывается. Я использую это:
wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
//do some stuff
});
или лучше:
var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );
if ( editor ) {
editor.on('close', function(){
//do some stuff
});
}
close
и escape
, которые вы можете привязать к объекту wp.media
. Например, wp.media.editor.add('content').on('all',function(n){alert(n);})
У меня не было большого шанса поиграть с этим, но для тех, кто хочет использовать элемент галереи, этот код должен установить вас на вашем пути.
Это всего лишь начальная точка - она предоставляет только список идентификаторов изображений, разделенных запятыми, но этого должно быть достаточно, чтобы начать творчество.
<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>
<script type="text/javascript">
jQuery('.custom_media_upload').click(function() {
var clone = wp.media.gallery.shortcode;
wp.media.gallery.shortcode = function(attachments) {
images = attachments.pluck('id');
jQuery('#custom_media_id').val(images);
wp.media.gallery.shortcode = clone;
var shortcode= new Object();
shortcode.string = function() {return ''};
return shortcode;
}
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;
});
</script>
Это заполнит поле ввода разделенным запятыми списком идентификаторов изображений в том порядке, в котором они были установлены в редакторе (с использованием новых функций перетаскивания).
Функция ожидает, что короткий код будет отправлен для размещения в главном редакторе, но мы не хотим этого делать, поэтому мы создаем новый объект, который возвращает пустую строку для вставки.
Также обратите внимание, что это не относится к вставке одного изображения, как описано выше - оно просто помещается в редактор сообщений. Поэтому попробуйте объединить двух слушателей или удалите соответствующие вкладки.
ИЗМЕНИТЬ
Проведя некоторое время, глядя на ядро, я думаю, что весь этот процесс можно упростить, используя технику здесь, но, как вы прочтете, я еще не выяснили, как предварительно выбирать изображения при повторном открытии медиа-менеджера.