WordPress 3.5 Media Manager – fügen Sie eine Schaltfläche hinzu

In meinem Plugin möchte ich dem Media Manager zwei Schaltflächen hinzufügen (links neben “In Post einfügen” im Abschnitt “media-toolbar-primary”) und eine jQuery-Aktion damit verbinden.

  1. Erster – Der “Alles auswählen” Button erlaubt es, alle verfügbaren Bilder (nur Bilder) auszuwählen, abhängig vom ausgewählten Optionswert (zB. Alle Medien, hochgeladen zu diesem Post usw.). Wenn also “Alle Medienelemente” ausgewählt ist, werden alle verfügbaren Bilder ausgewählt, wenn “Auf diesen Beitrag hochgeladen” ausgewählt ist – es werden nur Bilder ausgewählt, die an den aktuellen Beitrag angehängt sind.
  2. Der zweite – “Benutzerdefinierte Insert in Post” – wird Bilder Daten für alle ausgewählten Bilder (volle Größe Bildquelle, Alt Text, Größe etc, die verfügbar sind) und während sie in zusätzlichen HTML-Code umschließen können – Rückgabecode zu tinymce Editor.

Zurückgegebener Code für die zweite Schaltfläche könnte folgendermaßen aussehen:

  • alt text 1
  • alt text 2
  • alt text 3
  • alt text 4
  • alt text 5

Soweit ich weiß, ist die einzige Möglichkeit, die entsprechende Backbone-Ansicht zu überschreiben, aber abgesehen davon ist das alles, was ich für jetzt weiß.

Danke für die Hilfe.

Solutions Collecting From Web of "WordPress 3.5 Media Manager – fügen Sie eine Schaltfläche hinzu"

Dieser Codeblock fügt einen Button direkt neben dem “In den Post einfügen” ein. Wenn Sie darauf klicken, werden ausgewählte Bilder an den WP-Editor gesendet, die jeweils in Ihrem HTML-Template enthalten sind:

 var wpMediaFramePost = wp.media.view.MediaFrame.Post; wp.media.view.MediaFrame.Post = wpMediaFramePost.extend( { mainInsertToolbar: function( view ) { "use strict"; wpMediaFramePost.prototype.mainInsertToolbar.call(this, view); var controller = this; this.selectionStatusToolbar( view ); view.set( "customInsertIntoPost", { style: "primary", priority: 80, text: "Insert selected images into post", requires: { selection: true }, click: function() { var state = controller.state(), selection = state.get("selection")._byId, template = _.template('
  • < %= altText %>
  • '), output = "
      "; _.each(selection, function( item ) { if( item.attributes.type === "image" ) { output += template({ imagePath: item.attributes.sizes.full.url, altText: item.attributes.alt }); } }); output += "
    "; send_to_editor(output); } }); } });

    Das Hinzufügen einer benutzerdefinierten Schaltfläche ist kein Problem. Aber die Auswahl “Alle Bilder” könnte ein wenig kompliziert sein, da WP 3.5 Media Browser Anhänge nach und nach lädt. Ich werde mich darum kümmern, aber ich empfehle, Anhänge manuell auszuwählen.

    Schreiben Sie ein kleines Plugin, verwenden Sie die folgende Beispielquelle, um ein Element in der Liste der linken Seitenleiste im Medienmanager im Overlay-Popup hinzuzufügen.

    Ergebnis der Quelle unten: Bildbeschreibung hier eingeben

     add_action( 'admin_footer-post-new.php', 'wpse_78881_script' ); add_action( 'admin_footer-post.php', 'wpse_78881_script' ); function wpse_78881_script() { ?>  < ?php } 
    • Init-Lösung bilden diese WPSE-Antwort .

    • Link zum Entwurf eines Plugin- Beispiels, um ein JavaScript-Menü in das WP3.5-Medienbibliotheks-Popup hinzuzufügen

    Ich habe keine vollständige Antwort auf Ihre Frage, aber hier ist ein guter Anfang. Um den neuen Media Manager anzupassen, sollten Sie den Javascript Backbone-Code in wp-includes/js/media-views.js . Hier ist zum Beispiel ein kleines Plugin, das der “Einfügen von URL” -Symbolleiste einen “Alle auswählen” -Button hinzufügt:

    custom.php :

     add_action('admin_enqueue_scripts', 'custom_add_script'); function custom_add_script(){ wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true); } 

    custom.js :

     var originalToolbar = wp.media.view.Toolbar.Embed; wp.media.view.Toolbar.Embed = originalToolbar.extend({ // code modified from media-views.js, l 2500 initialize: function() { this.options.items = _.defaults( this.options.items || {}, { // keep the original button select: { style: 'primary', text: wp.media.view.l10n.insertIntoPost, priority: 80, click: this.clickSelect, requires: false }, // and add a new one selectAll: { text: 'Select All', style: 'primary', priority: 80, requires: false, click: this.selectAll } }); wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments ); }, selectAll: function(){ console.log('select All'); } }); 

    Für den “Custom in Post einfügen” -Button schlage ich vor, stattdessen den Gallery-Shortcode zu verwenden. Die Benutzeroberfläche existiert bereits, um die gewünschten Bilder auszuwählen und den Shortcode an der richtigen Stelle in Tinymce einzufügen. Alles, was Sie tun müssen, ist, Ihr eigenes Galerie-Shortcode-Format zu schreiben.

    gallery_shortcode Sie sich die gallery_shortcode function in wp-includes/media.php und verwenden Sie den post_gallery Filter.

    Thomas Griffin hat ein Plugin-Beispiel, New Media Image Uploader , erstellt, um zu erfahren , wie man mit dem neuen Medienmanager arbeitet.

    Dieses Plugin bietet ein solides Beispiel für die Integration des neuen Medienmanager-Workflows in Ihre Plugins / Themes, indem es Ihnen zeigt, wie Sie eine Bilddatei in ein Textfeld hochladen / einfügen.

    Ich bin gerade auf einen Fall in WP 3.6 gestoßen, wo die (sehr nützliche) Antwort von aesqe dazu führt, dass Bilder aufgrund der state.get("selection")._byId des Backbone zweimal eingefügt werden, einschließlich id und cid für jedes ausgewählte Bild.

    state.get("selection")._byId in state.get("selection").models das für mich state.get("selection").models und dabei die Attribute jedes Objekts erhalten.

    Hoffentlich wird dies jemandem Frustration ersparen. Ich hätte dies als Kommentar anstatt als Antwort gepostet, aber leider habe ich keinen guten Ruf.