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

65

Недавно был выпущен 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).

  • 1
    Администратор Wordpress использует noConflict, поэтому мне пришлось изменить $ -> jQuery. Очень полезно, спасибо!
  • 0
    Спасибо огромное за этот свежий пример! Передать идентификатор сообщения так же просто, как передать его в параметре в wp.media.editor.open ()
Показать ещё 1 комментарий
Теги:
file-upload
wordpress-3.5

5 ответов

30
Лучший ответ

Не забудьте использовать 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');
}
  • 1
    Мне интересно, как загрузить Media API как зависимость от некоторого скрипта в wp_enqueue_script() . Я знаю, что wp_enqueue_media() есть, но я бы предпочел использовать зависимость - есть ли способ сделать это? Я ищу имена всех необходимых библиотек - как вы делаете с медиа-сценариями до WP3.5 в вашем примере.
  • 0
    Лучше всего проверить источник, что именно ставится в очередь: core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/…
35

Ибо это происходит непреднамеренно. Вероятно, ваш код 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();
});
  • 0
    Можете ли вы предложить мне, как удалить параметр библиотеки мультимедиа из загрузчика
  • 0
    custom_uploader.on('open', function(){...customize...}) ?
Показать ещё 3 комментария
7

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

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

});
4

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

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
    });
}
  • 0
    Среди других событий есть close и escape , которые вы можете привязать к объекту wp.media . Например, wp.media.editor.add('content').on('all',function(n){alert(n);})
3

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

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

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

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

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

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

ИЗМЕНИТЬ

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню