ฉันขุดผ่านซอร์สโค้ดด้วยเหตุผลที่คล้ายกัน; ฉันต้องการเพิ่ม "การตั้งค่าการแสดงผลไฟล์แนบ" ในเฟรม "เลือก" เริ่มต้น เท่าที่ฉันสามารถบอกได้สิ่งนี้ไม่สามารถทำได้โดยการส่งพารามิเตอร์ไปที่ wp.media () ตามที่เราต้องการ wp.media ปัจจุบันมีสองเฟรม ("โพสต์" และ "เลือก") และมุมมองที่มาพร้อมกับพวกเขาเป็นที่ตั้งไว้ล่วงหน้า
วิธีการที่ฉันดูในตอนนี้คือการขยาย media.view.mediaFrame เพื่อสร้างเฟรมใหม่ (ขึ้นอยู่กับกรอบ "เลือก") ที่มีส่วนต่างๆของมุมมองที่ฉันต้องการ ถ้าฉันได้งานนี้ฉันจะโพสต์รหัส
แก้ไข:
เอียนฉันได้รับคุณลักษณะที่ฉันต้องการใช้งานและใช้เวลาพอสมควรในการหาข้อมูลของคุณ wp.media () ไม่ได้เป็นแบบแยกส่วนเท่าที่ควรจะเป็น ยอมรับเฉพาะค่า 'select' และ 'โพสต์' สำหรับเฟรมโดยมี 'select' เป็นค่าเริ่มต้นดังนั้นคุณจึงไม่สามารถสร้างวัตถุเฟรมใหม่ได้ แต่คุณต้องขยายวัตถุเฟรมหนึ่งในสองรายการ (ทั้งหมดนี้อยู่ใน /wp-includes/js/media-views.js) ซึ่งเป็นประเภทที่ค่อนข้างเป็น clunky การเพิ่มส่วนหนึ่งของ UI เป็นกระบวนการที่มีหลายขั้นตอน คุณสามารถเริ่มต้นด้วยเลือกและเพิ่ม แต่สำหรับคุณฉันเลือกที่จะเริ่มต้นด้วยรหัสในโพสต์เฟรมและนำเนื้อหาแกลเลอรี่ออกไป นี่คือรหัสของฉันทำงานได้ แต่ไม่ผ่านการทดสอบอย่างมาก อาจเป็นห้องสำหรับเพรียวลมบางเกินไป
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 เลือกการปรับเพื่อดูว่ามีการดำเนินการนอกขอบเขตดั้งเดิม ค่าของข้อความคือปุ่มต่าง ๆ และคุณสามารถอ้างอิงวัตถุการแปลของคุณเองได้หากคุณต้องการ ค่า 'filterable' ในตัวสร้างไลบรารี (ใน createStates ()) กำหนดประเภทสื่อที่จะได้รับการสนับสนุน
เมื่อคุณขยายวัตถุ Select ด้วยวิธีนี้เพียงแค่สร้างอินสแตนซ์แบบเดียวกับที่คุณอยู่ในปัจจุบันและเพิ่มตัวจัดการแบบกำหนดเองของคุณเมื่อเลือกรูปภาพ ส่วนแทรกจาก URL อาจเริ่มต้นเหตุการณ์ที่แตกต่างจากเมื่อเลือกจากสื่อที่อัปโหลด มันน่าจะดีกว่าถ้าคุณสร้างอินสแตนซ์ของเฟรมก่อนแล้วค่อยขยายเพื่อให้เฟรมสื่ออื่น ๆ ในหน้านั้นไม่ได้รับผลกระทบ แต่ฉันไม่ได้ลองเลย
หวังว่าจะช่วย -
