Wordpress 3.5 пользовательская загрузка мультимедиа для ваших параметров темы

Wordpress 3.5 был выпущен недавно, я использовал систему загрузки мультимедиа Wordpress через thickbox и window.send_to_editor для некоторых опций в моей теме Wordpress (фоны, логотипы и т. д...).

но, как вы знаете, Wordpress интегрировал Новый Медиа-Менеджер, я хотел использовать эту новую функцию для загрузки изображений/файлов в качестве пользовательских полей. Так что я провел утро, чтобы найти способ получить желаемый результат.

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

пример 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).

5 63
jquery file-upload wordpress wordpress-3.5

5 ответов:

Не забудьте использовать 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');
}
31

вы идете об этом таким образом, что это было непреднамеренно. Ваш код 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();
});
34

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

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;       
    });

});
7

Я не нашел ничего, чтобы вызвать пользовательскую функцию, если редактор закрывается. Я использую это:

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
    });
}
4

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

Это только начальная точка - она предоставляет только разделенный запятыми список идентификаторов изображений, но этого должно быть достаточно, чтобы начать творить.

<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>

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

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

также обратите внимание, что это не обрабатывает вставку одного изображения, как описано выше - он просто поместит его в Редактор сообщений. Поэтому попробуйте объединить два прослушивателя или удалить соответствующие вкладки.

EDIT

Проведя некоторое время глядя на ядро, я думаю, что весь этот процесс на самом деле можно сделать проще, используя технику выложил здесь, но, как вы прочитаете, я еще не понял, как предварительно выбрать изображения при повторном открытии медиа-менеджера.

3