出于类似的原因,我一直在挖掘源代码;我想将“附件显示设置”添加到默认的“选择”框架中。据我所知,这不能通过向wp传递参数来实现。media(),我们都喜欢。wp。媒体当前有两个帧(“post”和“select”),并且附带的视图是预设的。
我现在考虑的方法是扩展媒体。看法mediaFrame创建一个新框架(基于“select”框架),其中包括我需要的视图部分。如果我能做到这一点,我会发布代码。
EDIT:
伊恩,我得到了我想要的功能,花了一些时间来了解你的。wp。media()并不像它可能的那样模块化。它只接受frame的值“select”和“post”,默认值为“select”,因此无法创建新的frame对象。相反,您需要扩展两个框架对象中的一个(所有这些都在/wp-includes/js/media-views.js中),这也有点笨重。添加UI的一部分需要几个步骤。你可以从Select和add-on开始,但对于你的,我选择从Post框架中的代码开始,去掉gallery的内容。这是我的代码,正在运行,但没有经过严格测试。可能还有一些精简的空间。
wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({
initialize: function() {
wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );
_.defaults( this.options, {
multiple: true,
editing: false,
state: \'insert\'
});
this.createSelection();
this.createStates();
this.bindHandlers();
this.createIframeStates();
},
createStates: function() {
var options = this.options;
// Add the default states.
this.states.add([
// Main states.
new wp.media.controller.Library({
id: \'insert\',
title: \'Insert Media\',
priority: 20,
toolbar: \'main-insert\',
filterable: \'image\',
library: wp.media.query( options.library ),
multiple: options.multiple ? \'reset\' : false,
editable: true,
// If the user isn\'t allowed to edit fields,
// can they still edit it locally?
allowLocalEdits: true,
// Show the attachment display settings.
displaySettings: true,
// Update user settings when users adjust the
// attachment display settings.
displayUserSettings: true
}),
// Embed states.
new wp.media.controller.Embed(),
]);
if ( wp.media.view.settings.post.featuredImageId ) {
this.states.add( new wp.media.controller.FeaturedImage() );
}
},
bindHandlers: function() {
// from Select
this.on( \'router:create:browse\', this.createRouter, this );
this.on( \'router:render:browse\', this.browseRouter, this );
this.on( \'content:create:browse\', this.browseContent, this );
this.on( \'content:render:upload\', this.uploadContent, this );
this.on( \'toolbar:create:select\', this.createSelectToolbar, this );
//
this.on( \'menu:create:gallery\', this.createMenu, this );
this.on( \'toolbar:create:main-insert\', this.createToolbar, this );
this.on( \'toolbar:create:main-gallery\', this.createToolbar, this );
this.on( \'toolbar:create:featured-image\', this.featuredImageToolbar, this );
this.on( \'toolbar:create:main-embed\', this.mainEmbedToolbar, this );
var handlers = {
menu: {
\'default\': \'mainMenu\'
},
content: {
\'embed\': \'embedContent\',
\'edit-selection\': \'editSelectionContent\'
},
toolbar: {
\'main-insert\': \'mainInsertToolbar\'
}
};
_.each( handlers, function( regionHandlers, region ) {
_.each( regionHandlers, function( callback, handler ) {
this.on( region + \':render:\' + handler, this[ callback ], this );
}, this );
}, this );
},
// Menus
mainMenu: function( view ) {
view.set({
\'library-separator\': new wp.media.View({
className: \'separator\',
priority: 100
})
});
},
// Content
embedContent: function() {
var view = new wp.media.view.Embed({
controller: this,
model: this.state()
}).render();
this.content.set( view );
view.url.focus();
},
editSelectionContent: function() {
var state = this.state(),
selection = state.get(\'selection\'),
view;
view = new wp.media.view.AttachmentsBrowser({
controller: this,
collection: selection,
selection: selection,
model: state,
sortable: true,
search: false,
dragInfo: true,
AttachmentView: wp.media.view.Attachment.EditSelection
}).render();
view.toolbar.set( \'backToLibrary\', {
text: \'Return to Library\',
priority: -100,
click: function() {
this.controller.content.mode(\'browse\');
}
});
// Browse our library of attachments.
this.content.set( view );
},
// Toolbars
selectionStatusToolbar: function( view ) {
var editable = this.state().get(\'editable\');
view.set( \'selection\', new wp.media.view.Selection({
controller: this,
collection: this.state().get(\'selection\'),
priority: -40,
// If the selection is editable, pass the callback to
// switch the content mode.
editable: editable && function() {
this.controller.content.mode(\'edit-selection\');
}
}).render() );
},
mainInsertToolbar: function( view ) {
var controller = this;
this.selectionStatusToolbar( view );
view.set( \'insert\', {
style: \'primary\',
priority: 80,
text: \'Select Image\',
requires: { selection: true },
click: function() {
var state = controller.state(),
selection = state.get(\'selection\');
controller.close();
state.trigger( \'insert\', selection ).reset();
}
});
},
featuredImageToolbar: function( toolbar ) {
this.createSelectToolbar( toolbar, {
text: \'Set Featured Image\',
state: this.options.state || \'upload\'
});
},
mainEmbedToolbar: function( toolbar ) {
toolbar.view = new wp.media.view.Toolbar.Embed({
controller: this,
text: \'Insert Image\'
});
}
});
这将合并来自wp的代码。媒体看法MediaFrame。从媒体发布。看法MediaFrame。选择,根据在原始范围外执行这一事实进行调整。文本的值是各种按钮,如果需要,可以引用自己的本地化对象。库构造函数(在createStates()中)中的“filterable”值确定支持哪些媒体类型。
一旦用这种方法扩展了Select对象,只需以当前相同的方式实例化它,并为选择图像时添加自定义处理程序。“从Url插入”可能会引发与从上载媒体中拾取不同的事件。实际上,最好先实例化您的帧,然后扩展它,这样页面上的任何其他媒体帧都不会受到影响,但我还没有尝试过这样做。
希望有帮助-