WordPress 向影像的例項新增更多選項。 (附件顯示設定)

問題描述

我正在為 Wordpress 3.9 中的影像呈現建立一個簡單的可重用外掛，似乎我已經打磚牆了。

我希望能夠為影像的例項新增幾個選項。 (「附件顯示設定」下的詳細資訊) 。像一個核取方塊，說”Responsive” 停用 (灰色) 影像大小下拉選單，或固定頁面位置的選項等。

在媒體管理器中，當選擇/替換影像時，我已經能夠使用 attachment_fields_to_edit 新增一些自定義欄位，它是兄弟的過濾器，但是這些欄位附加到影像本身 (或者如果你願意的話) 所以如果我在頁面上有兩個相同影像的例項，它們將共享相同的自定義欄位值。

a) 我新增的自定義文字欄位，我無法將此附加到例項，同一影像的所有例項共享此值。

b) 這是我想新增選項的區域，因為這裡的所有內容似乎都遵循每個例項。

c) 顯示與上一螢幕相同的顯示設定，但是當單擊 Wordpress 3.9 中影像頂部的”pencil” 時，顯示設定不同。請注意，attachment_fields_to_edit 自定義選項在此螢幕上不存在。

即使我沒有充分了解骨幹是如何工作的，還是修改 wp.media 物件的最佳做法，我相當勝任 php，js 和 googling 的答案。但是現在已經有了這幾天了，所以任何幫助都是非常感激的。

謝謝閱讀！

最佳解決方案

你對這個問題的分析是完全正確的，即使你使用的術語有點混亂。沒有像「影像的例項」這樣的東西：一旦將影像插入到一個帖子中，修改原始影像標題或標題 (例如透過媒體選單) 將不會修改插入到帖子中的影像。要說服您，請點選”Text” 標籤，檢視生成的 HTML 程式碼。

使用”Add media” 按鈕插入影像時會發生什麼：

當您點選「插入到釋出」時，資料將從媒體模式中獲取，以生成一些 HTML 程式碼：<img> 標記，具有正確的來源，具體取決於您選擇的大小，標題為 alt 文字和標題 (如果有) 。該程式碼插入到 TinyMCE 編輯器的正確位置 (透過”Text” 選項卡進行檢視)
在”Visual” 選項卡中，建立一個”view” 來在視覺化編輯器中表示影像。此檢視顯示影像和兩個按鈕：編輯和刪除。這個檢視是允許您調整影像大小並以可視方式更改其他引數，而無需觸控 HTML 程式碼。

所以，如果要新增一些自定義資料 (不要將其稱為自定義欄位，因為它不附加到任何附件)，則必須將其插入到此 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" />

而您希望在大小下拉式清單中選擇一個”responsive”，使程式碼看起來像：

<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, _));

結果如下：