Wordpress 3.5 Media Manager-ボタンを追加


8

私のプラグインで、Media Managerに2つのボタン(「media-toolbar-primary」セクションの「Insert Into Post」の左側)を追加し、それにjQueryアクションを接続します。

  1. 1つ目-[すべて選択]ボタンをクリックすると、選択したオプションの値(すべてのメディアアイテム、この投稿にアップロードされたものなど)に応じて、利用可能なすべての画像(画像のみ)を選択できます。「すべてのメディアアイテム」が選択されている場合-利用可能なすべての画像が選択され、「この投稿にアップロード」が選択されている場合-現在の投稿に添付されている画像のみが選択されます。
  2. 2つ目は、「カスタム挿入ポスト」-選択したすべての画像(利用可能なフルサイズの画像ソース、代替テキスト、サイズなど)の画像データを取得し、追加のHTMLコードでそれらをラップできるようにします-tinymceエディターへの戻りコード。

2番目のボタンの戻りコードは次のようになります。

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

私が理解している限りでは、適切なバックボーンビューを上書きするのが唯一の方法ですが、それ以外に、今のところそれだけです。

手伝ってくれてありがとう。

回答:


11

このコードブロックは、[投稿に挿入]ボタンのすぐ横にボタンを追加します。クリックすると、選択した画像が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メディアブラウザーは添付ファイルを少しずつ読み込むため、「すべての画像」を選択するのは少し難しいかもしれません。調査しますが、手動で添付ファイルを選択することをお勧めします。


6

小さなプラグインを作成し、次のサンプルソースを使用して、オーバーレイポップアップ内のメディアマネージャーの左側のサイドバーのリストに項目を追加します。

以下のソースの結果: ここに画像の説明を入力してください

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
}

これは、左側のサイドバーに追加のメニュー位置を追加する方法を見る限りです。したがって、それはおそらく道路標識ですが、問題の2つのボタンが記述された実用的なソリューションの場合...それはまだ近くにありません:(
Marcin Bobowski

はい、常に正しい解決策を見つけるためのスターターです。ごめんなさい; しかし、私には時間がありません。JSは私の好きな言語ではありません。要旨で回答するリンクを追加しました。
bueltge 2013

3

私はあなたの質問に完全に答えるわけではありませんが、ここで良いスタートです。新しい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の適切な場所にショートコードを挿入するためのUIはすでに存在しています。あなたがしなければならないすべてはあなた自身のギャラリーショートコードフォーマットを書くことです。

gallery_shortcode関数を見てwp-includes/media.phppost_galleryフィルターを使用します。


ファビアンに感謝します。あなたが提供したコードに取り組み、それをaesqueからの回答と混ぜてみます。残念なことに、勝者は1人だけで、彼/彼女は1位でした。手伝ってくれてありがとう。
Marcin Bobowski、2013

3

Thomas Griffin は、新しいメディアマネージャーの操作方法について、プラグインサンプルNew Media Image Uploaderを作成しました。

このプラグインは、画像フィールドをテキストフィールドにアップロード/挿入する方法を示すことにより、新しいメディアマネージャーワークフローをプラグイン/テーマに統合するための確かな例を提供します。


それは非常に興味深いですが、media_managerをロードするための入力とボタンを備えたメタボックスの追加に関するすべてです。そして、私の問題は、media_manager自体に要素を追加することです。しかし、それでも、かなり便利なものです。
Marcin Bobowski 2013年

2

WP 3.6でaesqeの(非常に便利な)回答により、バックボーンがstate.get("selection")._byId両方idを含み、cid選択された各画像に対して2回挿入されるケースに遭遇したばかりです。

各オブジェクトの属性を保持しながら、これstate.get("selection")._byIdstate.get("selection").models修正して変更しました。

うまくいけば、これは誰かにいくつかの欲求不満を救うでしょう。私はこれを回答ではなくコメントとして投稿したでしょうが、悲しいかな、私は評判がありません。


それは:)より良い答えとしてです
ミハル・マウ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.