Wordpress 3.5 Media Manager-添加按钮

在我的插件中，我想向Media Manager添加两个按钮（在“ media-toolbar-primary”部分的“ Insert Into Post”的左侧），然后将jQuery操作连接到它。

1. 第一个-“全选”按钮应允许选择所有可用图像（仅图像），具体取决于所选的选项值（例如，所有媒体项目，上传到此帖子等）。因此，如果选择“所有媒体项目”-将选择所有可用图像，如果选择“上载到此帖子”-将仅选择附加到当前帖子的图像。
2. 第二个-“自定义插入到帖子中”-将获取所有选定图像的图像数据（完整尺寸的图像源，alt文本，尺寸等可用），同时允许将其包装在其他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 Library弹出窗口中

对于您的问题，我没有完整的答案，但这是一个好的开始。要自定义新的媒体管理器，您应该研究中的javascript Backbone代码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_shortcodein的功能wp-includes/media.php并使用post_gallery过滤器。

托马斯·格里芬（Thomas Griffin）创建了一个插件示例“ 新媒体图像上载器”（New Media Image Uploader），介绍了如何与新媒体管理器一起使用。

该插件通过向您展示如何将图像文件上传/插入到文本字段中，为将新的媒体管理器工作流程集成到插件/主题中提供了一个可靠的示例。

我刚刚在WP 3.6中遇到了一个案例，其中aesqe（非常有用）的答案导致图像被插入两次，这是由于主干的图像（state.get("selection")._byId包括所选图像id和cid每个图像）都被插入了两次。

更改state.get("selection")._byId到state.get("selection").models这个固定为我同时保留每个对象的属性。

希望这可以节省一些人的挫败感。我本可以将其发布为评论而不是答案，但是，a，我没有声誉。