画像のインスタンスにオプションを追加します。（添付ファイル表示設定）

Wordpress 3.9で画像を表示するための再利用可能なシンプルなプラグインを作成しようとしています。レンガの壁にぶつかったようです。

画像のインスタンスにいくつかのオプションを追加できるようにしたいと思います。（「添付ファイル表示設定」の詳細）。画像サイズのドロップダウンを無効にする（淡色表示する）、または固定のページ位置などのオプションを示す「レスポンシブ」というチェックボックスのように。

メディアマネージャーで画像を選択/置換するときに、カスタムフィールドをattachment_fields_to_edit兄弟フィルターで追加することができましたが、これらのフィールドは画像自体（または、画像添付ポストオブジェクト）にアタッチされます。ページに同じ画像の2つのインスタンスがある場合、それらは私のカスタムフィールドの同じ値を共有します。

ワードプレス置換画像画面、注釈付き。

a）追加したカスタムテキストフィールド。これをインスタンスにアタッチできません。同じ画像のすべてのインスタンスがこの値を共有します。

b）これは、ここでのすべてが各インスタンスに従っているように見えるため、オプションを追加したい領域です。

注釈付きのWordpress画像詳細画面。

c）これは前の画面と同じ表示設定を示していますが、Wordpress 3.9で画像の上にある[鉛筆]をクリックすると、表示が異なります。によって指定されたカスタムオプションattachment_fields_to_editがこの画面にまったく表示されないことに注意してください。

バックボーンのしくみ、またはwp.mediaオブジェクトを変更するためのベストプラクティスについて十分に理解していませんが、php、js、およびgooglingの両方にかなりの能力があります。しかし、これは私に数日間困惑させられたので、どんな助けも大いに感謝されます。

読んでくれてありがとう！

plugin-development media-library media-settings

— isNaN
ソース

あなたが採用する用語が少し紛らわしいとしても、あなたは問題の分析について完全に正しいです。「画像のインスタンス」などはありません。画像を投稿に挿入した後、元の画像のタイトルやキャプションを（たとえば[メディア]メニューを介して）変更しても、投稿に挿入された画像は変更されません。納得させるには、[テキスト]タブをクリックして、生成されたHTMLコードを確認してください。

[メディアを追加]ボタンで画像を挿入すると、次のようになります。

[投稿に挿入]をクリックすると、メディアモーダルからデータが取得され、HTMLコードを生成し<img>ます。選択したサイズに応じた正しいソースのタグ、代替テキストとしてのタイトル、および存在する場合はキャプション。このコードはTinyMCEエディターの適切な場所に挿入されます（[テキスト]タブで確認してください）
「ビジュアル」タブ内に「ビュー」が作成され、ビジュアルエディター内のイメージを表します。このビューには、画像と2つのボタン（編集と削除）が表示されます。このビューにより、HTMLコードに触れることなく、画像のサイズを変更したり、他のいくつかのパラメーターを視覚的に変更したりできます。

画像のTinyMCEビュー

そのため、カスタムデータを追加する場合（アタッチメントポストにアタッチされていないため、カスタムフィールドと呼ばないでください）、このHTMLコードに挿入し、ビューを変更して、このデータを視覚的に変更できるようにする必要があります。。質問をよく理解している場合は、ページ上の特定の方法で画像を配置するデータを追加する必要があります。これにはカスタムクラスを使用できます。

生成されたHTMLコードは次のとおりです。

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

また、サイズドロップダウンリストで「レスポンシブ」を選択して、コードを次のようにする必要があります。

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

これを実現する方法は次のとおりです。編集後のページに新しいスクリプトをエンキューするプラグインを作成します。

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

次に、customView.jsは次のようになります。

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

そしてここに結果があります：

サイズ選択ドロップダウンリストのレスポンシブオプション

— ファビアン・クアトラボー
ソース

どうもありがとうございました！今のところ、「イメージのインスタンス」はほとんどの場合、エディターに文字列として保存されています。そして私が探していたのは「media.view.ImageDetails」でした。遅い反応でごめんなさい、私は昨年の6月までにこの質問をあきらめていました。:)

— isNaN