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 Beitrag einfügen" im Abschnitt "Medien-Symbolleiste-Primär") und eine jQuery-Aktion damit verbinden.

1. Erste - Mit der Schaltfläche "Alle auswählen" können Sie alle verfügbaren Bilder (nur Bilder) auswählen, abhängig vom ausgewählten Optionswert (z. B. Alle Medienelemente, in diesen Beitrag hochgeladen usw.). Wenn also "Alle Medienelemente" ausgewählt ist - alle verfügbaren Bilder werden ausgewählt, wenn "Auf diesen Beitrag hochgeladen" ausgewählt ist - werden nur Bilder ausgewählt, die an den aktuellen Beitrag angehängt sind.
2. Die zweite Option - "Benutzerdefiniertes Einfügen in Post" - ruft Bilddaten für alle ausgewählten Bilder (Bildquelle in voller Größe, Alternativtext, Größe usw., die verfügbar sind) ab und ermöglicht das Einschließen in zusätzlichen HTML-Code. Geben Sie den Code an den Tinymce-Editor zurück.

Der zurückgegebene Code für die zweite Schaltfläche könnte folgendermaßen aussehen:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

Soweit ich weiß, besteht die einzige Möglichkeit darin, die entsprechende Backbone-Ansicht zu überschreiben, aber daneben ist das alles, was ich jetzt weiß.

Danke für die Hilfe.

Dieser Codeblock fügt eine Schaltfläche direkt neben der Schaltfläche "In Beitrag einfügen" hinzu. Wenn Sie darauf klicken, werden ausgewählte Bilder an den WP-Editor gesendet, die jeweils in das HTML Ihrer Vorlage eingeschlossen 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('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Das Hinzufügen einer benutzerdefinierten Schaltfläche ist kein Problem. Die Auswahl von "Alle Bilder" kann jedoch etwas schwierig sein, da der WP 3.5-Medienbrowser nach und nach Anhänge lädt. Ich werde es untersuchen, aber ich empfehle, Anhänge manuell auszuwählen.

Schreiben Sie ein kleines Plugin und fügen Sie mithilfe der folgenden Beispielquelle ein Element in die Liste der linken Seitenleiste im Medienmanager im Overlay-Popup ein.

Ergebnis der Quelle unten:

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}

• Init Lösung aus dieser WPSE-Antwort .

• Link zum Entwurf eines Plugin- Beispiels zum Hinzufügen eines Javascript-Menüs zum Popup der WP3.5-Medienbibliothek

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 studieren wp-includes/js/media-views.js. Zum Beispiel ist hier ein kleines Plugin, das der Symbolleiste "Von URL einfügen" die Schaltfläche "Alle auswählen" 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 die Schaltfläche "Benutzerdefiniert in Beitrag einfügen" empfehle ich, stattdessen den Galerie-Shortcode zu verwenden. Die Benutzeroberfläche ist bereits vorhanden, 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.

Schauen Sie sich die gallery_shortcodeFunktion in an wp-includes/media.phpund verwenden Sie den post_galleryFilter.

Thomas Griffin hat mit dem New Media Image Uploader ein Plugin-Beispiel für die Arbeit mit dem New Media Manager erstellt.

Dieses Plugin bietet ein solides Beispiel für die Integration des neuen Media Manager-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, in dem die (sehr nützliche) Antwort von aesqe dazu führt, dass Bilder aufgrund von Backbones, die state.get("selection")._byIdbeide enthalten, idund cidfür jedes ausgewählte Bild zweimal eingefügt werden .

Ändern, state.get("selection")._byIdum state.get("selection").modelsdies für mich zu beheben, während die Attribute jedes Objekts beibehalten werden.

Hoffentlich erspart dies jemandem etwas Frust. Ich hätte dies als Kommentar anstatt als Antwort gepostet, aber leider habe ich keinen Ruf.