Tambahkan item menu ke Wordpress 3.5 Media Manager

34

Bagaimana cara menambahkan item menu baru di bawah "masukkan Dari URL" di sidebar kiri di Wordpress 3.5 Media Manager yang baru?

Saya telah melihat backbone js dan mencoba mengaitkannya dengan JS saya sendiri tetapi tidak berhasil.

Sunting 2: Ini sepertinya melakukan trik:

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

Itu harus dilakukan untuk hal-hal sederhana, tapi saya kira itu juga mungkin untuk melakukan hal yang sama di Javascript. Akan lebih baik jika ada tutorial / penjelasan tentang cara kerja internal manajer media baru.

erezie
sumber
apa yang seharusnya dilakukan menu baru Anda? Menambahkan item menu bukan masalah utama dan Anda berada di jalur yang benar, tetapi jika menu Anda seharusnya menampilkan sesuatu yang berbeda dari tampilan default, hanya dengan pengaturan yang diubah, Backbone membutuhkan tampilan untuk item menu Anda ... dan di situlah saya terjebak juga ...
ungestaltbar
mengklik pada item menu seharusnya menunjukkan tampilan yang berbeda. Membuat item menu muncul akan menjadi langkah pertama
erezie
1
Mengenai bouny 150 poin saya: Mencari untuk melanjutkan tujuan pengirim asli untuk menggunakan metode berbasis JS untuk menambahkan item menu Status baru di bawah "Sisipkan dari URL" dan kaitkan tampilan baru dalam modal media utama dari Editor Posting.
Scott Kingsley Clark
@erezie, dapatkah Anda menandai jawabannya sebagai jawaban yang diberikan oleh Fabien Quatravaux?
Scott Kingsley Clark

Jawaban:

19

OK, saya pikir saya punya sesuatu yang sangat dekat untuk menjadi jawaban:

Saya memasukkan kode saya di intinya

Inilah hasilnya: tangkapan layar menu kustom

Saya membangun beberapa objek Backbone untuk menghormati pola MVC: yang controller.Custombertanggung jawab melakukan semua logika, view.Toolbar.Customberurusan dengan tombol-tombol toolbar, dan view.Customtampilan UI bagian dalam.

Fabien Quatravaux
sumber
2
Apa yang hilang sejauh ini?
kaiser
+1 awal yang bagus! Tapi, ya, alih-alih kita perlu menerapkan ini untuk mengetahui apa fungsinya, sebuah snapshot akan sangat berguna . Dan juga, tarik baris komentar itu //build an empty view (needs more work)ke konten Jawaban.
brasofilo
Saya telah menambahkan tangkapan layar untuk menunjukkan hasilnya. Hal selanjutnya yang harus dilakukan sekarang adalah mengimplementasikan tampilan itu sendiri yang akan menampilkan komponen HTML dan bereaksi terhadap interaksi pengguna.
Fabien Quatravaux
Ini terlihat keren, itu pasti awal! Layak untuk apa adanya, tetapi jangan ragu untuk membawanya ke tingkat berikutnya jika Anda merasa perlu.
Scott Kingsley Clark
Terima kasih atas hadiahnya Scott! Saya pasti akan menggali sedikit lebih dalam karena saya membutuhkannya untuk proyek di tempat kerja. Saya akan memposting kode saya kembali ke sini segera setelah dapat digunakan.
Fabien Quatravaux
10

Saya sedang berupaya menambahkan tombol ke "menu router" (menambahkan sesuatu yang benar dari "Media Library"), tetapi sistemnya sama.

<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>

Sekarang, belum melakukan apa-apa. Itu langkah selanjutnya!

Joost
sumber
2
Keberuntungan dalam hal ini? Solusi berbasis JS adalah apa yang benar-benar ingin saya lihat, bukan solusi iframe PHP yang sudah dicatat dalam pengeditan poster asli dan jawaban lain
Scott Kingsley Clark
7

Anda dapat menghubungkan ke media_upload_tabsfilter untuk menambahkan tab. Ini adalah metode yang digunakan oleh plugin Network Shared Media :

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' );

Anda kemudian dapat menghubungkan ke media_upload_tab_slugtindakan (di mana tab_slugseperti yang digunakan di atas) untuk menampilkan konten tab:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );
shea
sumber
2
Ini adalah cara lama menambahkan tab. Meskipun masih berfungsi tetapi saya curiga bahwa WP sedang menjauh darinya.
Jenny
2
@ Jenny, saya pikir kita dapat mengandalkan filter ini. Tiket yang relevan . (: oh, dan +1, snipett yang bagus :)
brasofilo
3

Saya tidak punya solusi, tetapi petunjuk. String didapat dari array. Anda dapat memfilter melalui kait media_view_strings. Kotak modal setelah klik adalah javascript, dibuat dengan backbone.js sejak WP 3.5. Lihat /wp-includes/js/media-views.jssolusi. Backbone juga baru bagi saya dan skrip memiliki banyak baris sumber.

bueltge
sumber
Itu adalah petunjuk yang sangat bagus, tapi saya pikir itu gagal. The media.view.settingsjs var dapat di-tweak oleh filter php untuk menambahkan tab baru, tetapi kemudian tab tersebut di-render melalui iframe (lihat createIframeStatesmetode di media-views.js).
Fabien Quatravaux
Mungkin Anda bisa menambahkan tutorial, intinya ke blog Anda untuk menambahkan tautan sederhana di dalam tampilan media dan tindakan kustom saat mengklik tautan ini? Inti Anda saat ini sangat kompleks dan memiliki banyak tindakan khusus.
bueltge
Sayangnya, saya tidak menemukan cara lain yang lebih sederhana untuk mencapai ini. Kode ini hanya melakukan satu hal dasar: menambahkan item menu kustom di sebelah kiri, dengan tampilan konten, bilah alat, dan pengontrolnya sendiri. Semua konstruksi ini diperlukan untuk membangun tampilan dan pengontrol yang dibutuhkan oleh Backbone. Tetapi jika Anda memiliki solusi yang lebih sederhana, silakan garpu intisari saya.
Fabien Quatravaux
Ya, saya telah melihat ini dan juga mengujinya, berfungsi dengan baik. Tapi saya pikir itu bagus, yang Anda buat juga intinya hanya untuk tombol atau tautan dan funktion panggilan balik di dalam layar media default, bukan bagian tambahan, bagaimana dalam contoh Anda.
bueltge