在媒体模式框中添加过滤器功能


12

我正在尝试扩展媒体模式,但找不到有关它的任何文档/教程。我也不是骨干大师;-)

我想为附加到附件帖子类型的每个分类法添加一个选择框。目前,仅显示一个选择框。

这就是我想出的。它可以代替默认工具栏,但效果很好。


/**
 * Extended Filters dropdown with taxonomy term selection values
 */
jQuery.each(mediaTaxonomies,function(key,label){

    media.view.AttachmentFilters[key] = media.view.AttachmentFilters.extend({
        className: key,

        createFilters: function() {
            var filters = {};

            _.each( mediaTerms[key] || {}, function( term ) {

                var query = {};

                query[key] = {
                    taxonomy: key,
                    term_id: parseInt( term.id, 10 ),
                    term_slug: term.slug
                };

                filters[ term.slug ] = {
                    text: term.label,
                    props: query
                };
            });

            this.filters = filters;
        }

    });

    /**
     * Replace the media-toolbar with our own
     */
    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
        createToolbar: function() {

            media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

            this.toolbar = new media.view.Toolbar({
                controller: this.controller
            });

            this.views.add( this.toolbar );

            this.toolbar.set( 'terms', new media.view.AttachmentFilters[key]({
                controller: this.controller,
                model:      this.collection.props,
                priority:   -80
            }).render() );
        }
    });

});

原版的

在此处输入图片说明


我的结果

在此处输入图片说明


我想要的是

在此处输入图片说明


完整代码

https://github.com/Horttcore/Media-Taxonomies

Answers:


8

Backbone.js和WP(我几乎一无所知)的美好世界。

我认为问题在于您只是在调用相同的default media.view,而是相信您需要初始化一个新的default 。

例如:

/**
 * Replace the media-toolbar with our own
 */
    var myDrop = media.view.AttachmentsBrowser;

    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
    createToolbar: function() {

        media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

        myDrop.prototype.createToolbar.apply(this,arguments);

        this.toolbar.set( key, new media.view.AttachmentFilters[key]({
            controller: this.controller,
            model:      this.collection.props,
            priority:   -80
        }).render() );
    }
});

会给你的东西像下面(我没有做任何彻底的错误检查,但它的工作)。


在此处输入图片说明


您还应该考虑使用media.view.AttachmentFilters和进行任何自定义操作window.wp.media;


太棒了,谢谢你!我应该尽快阅读关于ribs.js的信息,因为它似乎在每个新的WP版本中都得到了更多集成。
Horttcore 2013年

1
感谢您将其制作为插件,因此很容易回答:)实际上,您启发了我为WPSE问题制作了一个github插件。
Wyck
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.