Wordpress 3.5 Media Manager - добавить кнопку

В моем плагине я хотел бы добавить две кнопки в Media Manager (слева от «Вставить в пост» в разделе «media-toolbar-primary») и подключить к нему действие jQuery.

1. Первый - кнопка «Выбрать все» позволяет выбрать все доступные изображения (только изображения), в зависимости от выбранного значения параметра (например, все элементы мультимедиа, загруженные в этот пост и т. Д.). Таким образом, если выбран «Все элементы мультимедиа» - будут выбраны все доступные изображения, если выбран «Загружен в это сообщение» - будут выбраны только изображения, прикрепленные к текущему сообщению.
2. Второй - «Custom Insert Into Post» - получит данные изображений для всех выбранных изображений (источник изображения в полном размере, альтернативный текст, размер и т. Д., Которые доступны), и при этом позволяет обернуть их в дополнительный HTML-код - вернуть код в редактор tinymce.

Возвращенный код для второй кнопки может выглядеть так:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

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

Спасибо за помощь.

Этот блок кода добавит кнопку рядом с кнопкой «Вставить в сообщение». При нажатии он отправит выбранные изображения в редактор WP, каждое из которых будет заключено в ваш шаблон HTML:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Добавление пользовательской кнопки не является проблемой. Но выбрать «все изображения» может быть немного сложно, потому что медиа-браузер WP 3.5 загружает вложения постепенно. Я посмотрю на это, но я рекомендую выбирать приложения вручную.

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

Результат источника ниже:

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}

• Исходное решение из этого ответа WPSE .

• Ссылка на черновой пример плагина для добавления меню javascript во всплывающее окно библиотеки мультимедиа WP3.5

У меня нет полного ответа на ваш вопрос, но вот хорошее начало. Чтобы настроить новый Media Manager, вы должны изучить базовый код javascript в wp-includes/js/media-views.js. Например, вот небольшой плагин, который добавляет кнопку «Выбрать все» на панель инструментов «Вставить из URL»:

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Для кнопки «Пользовательская вставка в сообщение» я предлагаю вместо этого использовать шорткод галереи. Пользовательский интерфейс уже существует, чтобы выбрать нужные изображения и вставить шорткод в нужном месте в tinymce. Все, что вам нужно сделать, это написать свой собственный формат шорткода галереи.

Взгляните на gallery_shortcodeфункцию в wp-includes/media.phpи используйте post_galleryфильтр.

Томас Гриффин создал пример плагина New Media Image Uploader о том, как работать с новым медиа-менеджером.

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

Я только что столкнулся со случаем в WP 3.6, когда ответ aesqe (очень полезный) приводит к тому, что изображения вставляются дважды из-за наличия магистрали, state.get("selection")._byIdвключая оба idи cidдля каждого выбранного изображения.

Изменение state.get("selection")._byIdв state.get("selection").modelsисправил для меня, сохраняя атрибуты каждого объекта.

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