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

結果如下：