web-dev-qa-db-ja.com

画像のインスタンスにさらにオプションを追加する。 （添付表示設定）

私はWordpress 3.9で画像表示のためのシンプルで再利用可能なプラグインを構築しようとしています、そしてそれは私がレンガの壁にぶつかったようです。

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

Media Managerで画像を選択/置換するとき、私はattachment_fields_to_editを使っていくつかのカスタムフィールドを追加することができました、そしてそれは兄弟フィルタです、しかし、これらのフィールドはあなた自身にするそのため、1つのページに同じ画像の2つのインスタンスがある場合、それらは私のカスタムフィールドの同じ値を共有します。

The wordpress replace image screen, annotated.

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

b）ここに記載されているものはすべて各インスタンスに従っているように思われるので、これは私がオプションを追加したい領域です。

The Wordpress image details screen, annotated.

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

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

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

plugin-developmentmedia-librarymedia-settings
10
isNaN

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

「メディアを追加」ボタンを使って画像を挿入すると、次のようになります。

  1. [投稿に挿入]をクリックすると、Mediaモーダルからデータが取得され、選択したサイズに応じて正しいソースを持つ<img>タグ、代替テキストとしてのタイトル、および見出しがある場合はキャプションが生成されます。このコードはTinyMCEエディタの正しい場所に挿入されます（[テキスト]タブで確認してください）。

  2. 「ビジュアル」タブ内には、ビジュアルエディタ内の画像を表すための「ビュー」が作成されます。このビューには、画像と2つのボタン（編集と削除）が表示されます。このビューを使用すると、HTMLコードに触れることなく、画像のサイズを変更したり他のいくつかのパラメータを視覚的に変更したりできます。

TinyMCE view of the image

そのため、カスタムデータを追加したい場合（どの添付投稿にも添付されていないためカスタムフィールドとは呼ばないでください）、この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, _));

そして、これが結果です。

Responsive option in select sizes dropdown list

6
Fabien Quatravaux