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

结果如下：