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

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

Источник

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');
}
Источник

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

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

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
    });
}
Источник

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

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

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

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

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

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

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

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

Источник
Другие вопросы по тегам