Ich habe den Quellcode aus einem ähnlichen Grund durchgearbeitet. Ich möchte die "Einstellungen für die Anzeige von Anhängen" zum Standard-Auswahlrahmen hinzufügen. Soweit ich das beurteilen kann, ist dies nicht möglich, indem Parameter an wp.media () übergeben werden, wie wir alle möchten. Derzeit hat wp.media die beiden Frames ("post" und "select") und die dazugehörigen Ansichten sind voreingestellt.
Der Ansatz, den ich jetzt suche, besteht darin, media.view.mediaFrame zu erweitern, um einen neuen Frame (basierend auf dem ausgewählten Frame) zu erstellen, der die Teile der Ansicht enthält, die ich benötige. Wenn ich das zum Laufen bringe, poste ich den Code.
BEARBEITEN:
Ian, ich habe die Funktion, die ich arbeiten wollte, und habe mir einige Zeit genommen, um deine herauszufinden. wp.media () ist nicht ganz so modular wie es sein könnte. Es werden nur die Werte 'select' und 'post' für Frame akzeptiert, wobei 'select' die Standardeinstellung ist, sodass Sie kein neues Frame-Objekt erstellen können. Stattdessen müssen Sie eines der beiden Frame-Objekte erweitern (all dies befindet sich in /wp-includes/js/media-views.js), was ebenfalls etwas klobig ist. Das Hinzufügen eines Teils der Benutzeroberfläche erfolgt in mehreren Schritten. Sie könnten mit Auswählen und Hinzufügen beginnen, aber für Ihre habe ich mich entschieden, mit dem Code im Post-Frame zu beginnen und das Galerie-Zeug wegzunehmen. Hier ist mein Code, der funktioniert, aber nicht intensiv getestet wurde. Wahrscheinlich auch ein wenig Platz zum Rationalisieren.
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'
});
}
});
Dadurch wird der Code von wp.media.view.MediaFrame.Post mit dem von media.view.MediaFrame.Select kombiniert, wobei berücksichtigt wird, dass dies außerhalb des ursprünglichen Bereichs ausgeführt wird. Die Werte für Text sind die verschiedenen Schaltflächen, und Sie können auf Ihr eigenes Lokalisierungsobjekt verweisen, wenn Sie möchten. Der Wert 'filterable' im Library-Konstruktor (in createStates ()) bestimmt, welche Medientypen unterstützt werden.
Nachdem Sie das Auswahlobjekt mit dieser Methode erweitert haben, instanziieren Sie es einfach so, wie Sie es gerade sind, und fügen Sie Ihren benutzerdefinierten Handler hinzu, wenn ein Bild ausgewählt wird. Beim Einfügen von URL wird möglicherweise ein anderes Ereignis ausgelöst als beim Auswählen von hochgeladenen Medien. Es ist wahrscheinlich besser, Ihren Frame zuerst zu instanziieren und dann zu erweitern, damit andere Medien-Frames auf der Seite nicht betroffen sind, aber ich habe es nicht versucht.
Ich hoffe, das hilft-
