Fügen Sie Wordpress 3.5 Media Manager ein Menüelement hinzu

34

Wie kann im neuen Wordpress 3.5 Media Manager ein neuer Menüeintrag unter der "Einfügen von URL" in der linken Seitenleiste hinzugefügt werden?

Ich habe mir das Backbone angesehen und versucht, es mit meinem eigenen JS zu verbinden, aber ohne Erfolg.

Edit 2: Dies scheint den Trick zu tun:

http://sumtips.com/2012/12/add-remove-tab-wordpress-3-5-media-upload-page.html

Es sollte für einfache Dinge reichen, aber ich denke, es ist auch möglich, dasselbe in Javascript zu tun. Wäre nett, wenn es ein Tutorial / eine Erklärung geben würde, wie die Interna des neuen Media Managers funktionieren.

erezie
quelle
Was soll dein neues Menü tun? Das Hinzufügen eines Menüeintrags ist nicht das Hauptproblem und Sie sind auf dem richtigen Weg. Wenn Ihr Menü jedoch andere als die Standardansichten anzeigen soll, benötigt Backbone nur eine Ansicht für Ihren Menüeintrag ... und dort stecke ich auch fest ...
ungestaltbar
Ein Klick auf den Menüpunkt soll eine andere Ansicht zeigen. Das
Menüelement zum Anzeigen
1
Bezüglich meines 150-Punkte-Bouny: Um das Ziel des ursprünglichen Posters fortzusetzen, verwenden Sie eine JS-basierte Methode, um unter "Von URL einfügen" einen neuen Status-Menüeintrag hinzuzufügen und eine neue Ansicht im primären Medien-Modal des Post-Editors zuzuordnen.
Scott Kingsley Clark
@erezie, kannst du die Antwort auf diese Frage als die von Fabien Quatravaux bereitgestellte markieren?
Scott Kingsley Clark

Antworten:

19

OK, ich denke, dass ich etwas habe, das wirklich nah dran ist, eine Antwort zu sein:

Ich habe meinen Code in einen Kern geschrieben

Hier ist das Ergebnis: Screenshot eines benutzerdefinierten Menüs

Ich habe mehrere Backbone-Objekte erstellt, um das MVC-Muster zu berücksichtigen: Sie controller.Customsind für die gesamte Logik, die view.Toolbar.CustomBearbeitung der Symbolleistenschaltflächen und die view.CustomAnzeige der inneren Benutzeroberfläche verantwortlich.

Fabien Quatravaux
quelle
2
Was fehlt bisher?
Kaiser
+1 guter Start! Aber ja, anstatt dass wir dies implementieren müssen, um zu wissen, was es tut, wäre ein Schnappschuss sehr praktisch . Ziehen Sie diese Kommentarzeile auch //build an empty view (needs more work)zum Inhalt der Antwort.
Brasofilo
Ich habe einen Screenshot hinzugefügt, um das Ergebnis zu zeigen. Als Nächstes müssen Sie die Ansicht selbst implementieren, in der HTML-Komponenten angezeigt werden und auf Benutzerinteraktionen reagiert wird.
Fabien Quatravaux
Das sieht cool aus, das ist definitiv ein Anfang! Würdig das Kopfgeld wie es ist, aber zögern Sie nicht, es auf die nächste Stufe zu bringen, wenn Sie das Bedürfnis haben.
Scott Kingsley Clark
Danke für das Kopfgeld, Scott! Ich werde auf jeden Fall etwas tiefer gehen, weil ich es für ein Projekt bei der Arbeit brauche. Ich werde meinen Code hier veröffentlichen, sobald er verwendbar ist.
Fabien Quatravaux
10

Ich arbeite daran, eine Schaltfläche zum "Router-Menü" hinzuzufügen (etwas rechts von "Media Library" hinzuzufügen), aber das System ist das gleiche.

<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,
        NewMenuItem;

        jQuery(document).on( 'click', '.insert-media', function( event ) {
            var workflow = wp.media.editor.get();
            var options = workflow.options;
            if( undefined == NewMenuItem ) {
                NewMenuItem = new wp.media.view.RouterItem( _.extend( options, { text: 'New Item!' } ) );
                workflow.menu.view.views.set( '.media-menu', NewMenuItem, _.extend( options, { add: true } ) );
            }

        });
    });
</script>

Jetzt macht es noch nichts. Das ist der nächste Schritt!

Joost
quelle
2
Hast du Glück dabei? Eine JS-basierte Lösung ist das, was ich wirklich sehen möchte, nicht die bereits in der Bearbeitung des Originalposters notierte iframe-PHP-Lösung und eine andere Antwort
Scott Kingsley Clark
7

Sie können sich in den media_upload_tabsFilter einhängen , um die Registerkarte hinzuzufügen. Dies ist die Methode, die vom Plug-in für freigegebene Medien im Netzwerk verwendet wird :

function wpse_76980_add_upload_tab( $tabs ) {
    $newtab = array( 'tab_slug' => 'Tab Name' );
    return array_merge( $tabs, $newtab );
}
add_filter( 'media_upload_tabs', 'wpse_76980_add_upload_tab' );

Sie können sich dann mit der media_upload_tab_slugAktion verbinden ( tab_slugwie oben beschrieben), um den Inhalt der Registerkarte anzuzeigen:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );
shea
quelle
2
Dies ist die alte Methode zum Hinzufügen eines Tabs. Es funktioniert zwar immer noch, aber ich vermute, dass WP sich davon entfernt.
Jenny
2
@Jenny, ich denke, wir können uns auf diesen Filter verlassen. Relevantes Ticket . (: oh, und +1, nette Snipett :)
Brasofilo
3

Ich habe keine Lösung, aber Hinweise. Die Zeichenfolgen stammen aus einem Array. Sie können über Haken filtern media_view_strings. Die modale Box nach dem Klick ist ein Javascript, das mit backbone.js seit WP 3.5 erstellt wurde. Sehen Sie sich /wp-includes/js/media-views.jsnach einer Lösung um. Backbone ist auch neu für mich und die Skripte haben viele Quelltextzeilen.

bueltge
quelle
Das war ein sehr netter Hinweis, aber ich denke, er fällt zu kurz. Die media.view.settingsjs var kann durch einen PHP-Filter angepasst werden, um neue Tabs hinzuzufügen, aber diese Tabs werden dann über einen iframe gerendert (siehe createIframeStatesMethode in media-views.js).
Fabien Quatravaux
Vielleicht können Sie Ihrem Blog ein Tutorial hinzufügen, um einen einfachen Link in der Medienansicht und eine benutzerdefinierte Aktion hinzuzufügen, wenn Sie auf diesen Link klicken? Ihr aktueller Inhalt ist sehr komplex und enthält viele benutzerdefinierte Aktionen.
Bueltge
Leider habe ich keinen einfacheren Weg gefunden, um dies zu erreichen. Bei diesem Code handelt es sich nur um ein grundlegendes Element: Fügen Sie links ein benutzerdefiniertes Menüelement mit eigener Inhaltsansicht, Symbolleiste und Steuerung hinzu. Diese gesamte Konstruktion wird benötigt, um die von Backbone benötigten Ansichten und Controller zu erstellen. Aber wenn Sie eine einfachere Lösung haben, können Sie sich gerne an mich wenden.
Fabien Quatravaux
Ja, ich habe das gesehen und auch getestet, funktioniert gut. Aber ich finde es schön, dass Sie auch nur für eine Schaltfläche oder einen Link eine Übersicht und eine Rückruffunktion innerhalb des Standardmedienbildschirms erstellen, kein zusätzliches Teil, wie in Ihrem Beispiel.
Bueltge