Wordpress 3.5 Media Manager - tambahkan tombol

Di plugin saya, saya ingin menambahkan dua tombol ke Media Manager (di sebelah kiri "Sisipkan Ke Posting" di bagian "media-toolbar-primer"), dan hubungkan tindakan jQuery ke sana.

1. Yang pertama - Tombol "Pilih Semua" harus memungkinkan untuk memilih semua gambar yang tersedia (hanya gambar), tergantung pada nilai opsi yang dipilih (mis. Semua Item Media, Diunggah ke Posting ini, dll.). Jadi jika "Semua Item Media" dipilih - semua gambar yang tersedia akan dipilih, jika "Diunggah ke posting ini" dipilih - hanya gambar yang dilampirkan ke posting saat ini yang akan dipilih.
2. Yang kedua - "Kustom Sisipkan Ke Posting" - akan mendapatkan data gambar untuk semua gambar yang dipilih (sumber gambar ukuran penuh, teks alt, ukuran dll yang tersedia) dan sambil memungkinkan untuk membungkusnya dalam kode html tambahan - kode kembali ke editor tinymce.

Kode yang dikembalikan untuk tombol kedua dapat terlihat seperti ini:

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

Sejauh yang saya mengerti, satu-satunya cara adalah menggunakan menimpa tampilan Backbone yang sesuai, tetapi di samping itu, hanya itu yang saya tahu untuk saat ini.

Terimakasih atas bantuannya.

Blok kode ini akan menambahkan tombol tepat di sebelah "Sisipkan ke dalam pos". Ketika diklik, itu akan mengirim gambar yang dipilih ke WP editor, masing-masing dibungkus dengan HTML templat Anda:

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

Menambahkan tombol khusus tidak menjadi masalah. Tetapi memilih "semua gambar" bisa sedikit rumit karena browser media WP 3.5 memuat lampiran sedikit demi sedikit. Saya akan memeriksanya, tetapi saya sarankan memilih lampiran secara manual.

Tulis sebuah plugin kecil, gunakan contoh sumber ikuti untuk menambahkan item dalam daftar sidebar kiri pada manajer media di dalam popup overlay.

Hasil sumber di bawah ini:

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
}

• Solusi init dari Jawaban WPSE ini .

• Tautan ke draft contoh plugin untuk menambahkan menu javascript ke dalam popup WP3.5 Media Library

Saya tidak punya jawaban penuh untuk pertanyaan Anda, tapi ini awal yang bagus. Untuk menyesuaikan Media Manager baru, Anda harus mempelajari kode Backbone javascript di wp-includes/js/media-views.js. Sebagai contoh, berikut adalah plugin kecil yang menambahkan tombol "Pilih Semua" ke Bilah Alat "Sisipkan dari URL":

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

Untuk tombol "Sisipkan ke dalam pos", saya sarankan untuk menggunakan kode pendek galeri. UI sudah ada untuk memilih gambar yang diinginkan dan menyisipkan kode pendek di tempat yang tepat di tinymce. Yang harus Anda lakukan adalah menulis format shortcode galeri Anda sendiri.

Lihatlah gallery_shortcodefungsi wp-includes/media.phpdan gunakan post_galleryfilter.

Thomas Griffin membuat contoh plugin, New Media Image Uploader , tentang cara bekerja dengan manajer media baru.

Plugin ini memberikan contoh yang kuat untuk mengintegrasikan alur kerja manajer media baru ke plugin / tema Anda dengan menunjukkan kepada Anda cara mengunggah / menyisipkan file gambar ke dalam bidang teks.

Saya baru saja menemukan sebuah kasus di WP 3.6 di mana jawaban aesqe (sangat berguna) menghasilkan gambar yang dimasukkan dua kali karena backbone state.get("selection")._byIdtermasuk keduanya iddan ciduntuk setiap gambar yang dipilih.

Mengubah state.get("selection")._byIduntuk state.get("selection").modelsmemperbaiki ini untuk saya sambil menjaga atribut setiap objek.

Mudah-mudahan ini akan membuat seseorang frustrasi. Saya akan memposting ini sebagai komentar daripada jawaban tetapi, sayangnya, saya tidak punya reputasi.