メディアモーダルボックスにフィルター機能を追加


12

メディアモーダルを拡張しようとしていますが、それに関するドキュメント/チュートリアルを見つけることができません。私もバックボーンの達人ではありません;-)

添付ファイルの投稿タイプに添付される分類ごとに選択ボックスを追加します。現時点では、選択ボックスは1つだけ表示されています。

これが私が思いついたものです。デフォルトのツールバーを置き換えることを除いて、非常にうまく機能します。


コード

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

回答:


8

Backbone.jsとWPの素晴らしい世界(私はほとんど何も知りません)。

問題は、同じデフォルトを呼び出しているだけだと思いますがmedia.view、代わりに新しいものを初期化する必要があると思います。

例えば:

/**
 * 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;ます。


素晴らしいありがとう!新しいWPのすべてのバージョンに統合されると思われるため、backbone.jsについてすぐに読む必要があります。
Horttcore

1
これをプラグインにしてくれてありがとう。答えが簡単でした:)実際、WPSEの質問用にgithubプラグインを作るように刺激を受けました。
ワイク
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.