Wordpress 3.5 Media Manager - thêm một nút

Trong plugin của mình, tôi muốn thêm hai nút vào Trình quản lý phương tiện (ở bên trái của "Chèn vào bài đăng" trong phần "phương tiện truyền thông chính-thanh công cụ") và kết nối một hành động jQuery với nó.

1. Đầu tiên - Nút "Chọn tất cả" cho phép chọn tất cả các hình ảnh có sẵn (chỉ hình ảnh), tùy thuộc vào giá trị tùy chọn được chọn (ví dụ: Tất cả các mục phương tiện, được tải lên bài đăng này, v.v.). Vì vậy, nếu "Tất cả các mục phương tiện" được chọn - tất cả hình ảnh khả dụng sẽ được chọn, nếu "Đã tải lên bài đăng này" được chọn - chỉ những hình ảnh được đính kèm với bài đăng hiện tại mới được chọn.
2. Thứ hai - "Chèn tùy chỉnh vào bài đăng" - sẽ nhận dữ liệu hình ảnh cho tất cả các hình ảnh được chọn (nguồn hình ảnh kích thước đầy đủ, văn bản thay thế, kích thước vv có sẵn) và trong khi cho phép bọc chúng trong mã html quảng cáo - trả lại mã cho trình chỉnh sửa tinymce.

Mã trả về cho nút thứ hai có thể nhìn theo cách này:

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

Theo như tôi hiểu, cách duy nhất là sử dụng ghi đè chế độ xem Xương sống thích hợp, nhưng bên cạnh đó, đó là tất cả những gì tôi biết bây giờ.

Cảm ơn vì sự giúp đỡ.

Khối mã này sẽ thêm một nút ngay bên cạnh nút "Chèn vào bài viết". Khi được nhấp, nó sẽ gửi các hình ảnh được chọn đến trình soạn thảo WP, mỗi hình ảnh được bọc bên trong HTML mẫu của bạn:

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

Thêm một nút tùy chỉnh không phải là một vấn đề. Nhưng việc chọn "tất cả hình ảnh" có thể hơi khó khăn vì trình duyệt phương tiện WP 3.5 tải tệp đính kèm từng chút một. Tôi sẽ xem xét nó, nhưng tôi khuyên bạn nên chọn tệp đính kèm theo cách thủ công.

Viết một plugin nhỏ, sử dụng nguồn ví dụ sau để thêm một mục vào danh sách thanh bên trái trong trình quản lý phương tiện bên trong cửa sổ bật lên lớp phủ.

Kết quả của nguồn dưới đây:

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
}

• Ban đầu giải pháp hình thành câu trả lời WPSE này .

• Liên kết đến ví dụ plugin dự thảo để thêm menu javascript vào cửa sổ bật lên Thư viện phương tiện WP3.5

Tôi không có câu trả lời đầy đủ cho câu hỏi của bạn, nhưng đây là một khởi đầu tốt. Để tùy chỉnh Trình quản lý phương tiện mới, bạn nên nghiên cứu mã Xương sống javascript trong wp-includes/js/media-views.js. Ví dụ, đây là một plugin nhỏ có thêm nút "Chọn tất cả" vào Thanh công cụ "Chèn từ 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');
    }
});

Đối với nút "Tùy chỉnh chèn vào bài đăng", tôi đề nghị sử dụng mã ngắn thư viện thay thế. Giao diện người dùng đã tồn tại để chọn các hình ảnh mong muốn và chèn shortcode vào đúng vị trí trong tinymce. Tất cả bạn phải làm là để viết định dạng shortcode thư viện của riêng bạn.

Hãy xem gallery_shortcodechức năng trong wp-includes/media.phpvà sử dụng post_gallerybộ lọc.

Thomas Griffin đã tạo một ví dụ về plugin, New Media Image Uploader , về cách làm việc với trình quản lý phương tiện mới.

Plugin này cung cấp một ví dụ chắc chắn để tích hợp luồng công việc của trình quản lý phương tiện mới vào các plugin / chủ đề của bạn bằng cách chỉ cho bạn cách tải lên / chèn tệp hình ảnh vào trường văn bản.

Tôi vừa gặp một trường hợp trong WP 3.6 trong đó câu trả lời (rất hữu ích) của aesqe dẫn đến hình ảnh được chèn hai lần do xương sống state.get("selection")._byIdbao gồm cả hai idvà cidcho mỗi hình ảnh được chọn.

Thay đổi state.get("selection")._byIdđể state.get("selection").modelssửa lỗi này cho tôi trong khi bảo tồn các thuộc tính của từng đối tượng.

Hy vọng điều này sẽ cứu ai đó một số thất vọng. Tôi đã có thể đăng bài này như một bình luận thay vì một câu trả lời, nhưng, than ôi, tôi không có danh tiếng.