it-swarm.com.ru

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

WordPress 3.5 был выпущен недавно, я использовал систему загрузки медиафайлов WordPress через 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).

65
Mattpx

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

Вы делаете это таким образом, который был непреднамеренным. Ваш код 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
DiverseAndRemote.com

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

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

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

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
Xaver

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

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

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

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

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

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

РЕДАКТИРОВАТЬ

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

3
Mark