비슷한 이유로 소스 코드를 파고 들었습니다. "첨부 파일 표시 설정"을 기본 "선택"프레임에 추가하고 싶습니다. 내가 알 수있는 한, 우리가 원하는 것처럼 wp.media ()에 매개 변수를 전달 하여이 작업을 수행 할 수 없습니다. wp.media에는 현재 두 개의 프레임 ( "post"및 "select")이 있으며 그와 함께 제공되는보기는 사전 설정되어 있습니다.
지금보고있는 방법은 media.view.mediaFrame을 확장하여 필요한 뷰 부분이 포함 된 새 프레임 ( "선택"프레임 기반)을 만드는 것입니다. 이 작업을 수행하면 코드를 게시합니다.
편집하다:
이안, 나는 내가 일하고 싶었던 기능을 얻었고 당신의 것을 알아내는 데 시간이 걸렸다. wp.media ()는 모듈식이 아닙니다. 프레임의 경우 'select'및 'post'값만 허용하며 'select'가 기본값이므로 새 프레임 객체를 만들 수 없습니다. 대신 두 프레임 객체 중 하나 (/wp-includes/js/media-views.js에 있음)를 확장해야합니다. UI의 일부를 추가하는 것은 여러 단계 프로세스입니다. Select와 add로 시작할 수는 있지만 Post 프레임의 코드로 시작하고 갤러리를 제거하기로 결정했습니다. 다음은 작동하지만 심하게 테스트되지 않은 코드입니다. 아마도 능률화의 여지가있을 것입니다.
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.media.view.MediaFrame.Post의 코드와 media.view.MediaFrame.Select의 코드를 결합하여 이것이 원래 범위 밖에서 실행된다는 사실을 조정합니다. 텍스트 값은 다양한 버튼이며 원하는 경우 고유 한 현지화 개체를 참조 할 수 있습니다. 라이브러리 생성자 (createStates ())의 'filterable'값은 지원할 미디어 유형을 결정합니다.
이 방법으로 Select 객체를 확장 한 후에는 현재와 같은 방식으로 인스턴스화하고 이미지를 선택할 때 사용자 지정 처리기를 추가하면됩니다. URL에서 삽입은 업로드 된 미디어에서 선택할 때와 다른 이벤트를 발생시킬 수 있습니다. 실제로 프레임을 먼저 인스턴스화 한 다음 확장하여 페이지의 다른 미디어 프레임에 영향을 미치지 않도록하는 것이 더 좋지만 시도하지는 않았습니다.
희망이 도움이
