WordPress 3.5 媒體管理器 – 添加一個按鈕

問題描述

在我的插件中，我想添加兩個按鈕到媒體管理器 (在”media-toolbar-primary” 部分的「插入發佈」的左側)，並連接一個 jQuery 操作。

第一個 – “Select All” 按鈕可以選擇所有可用的圖像 (僅圖像)，具體取決於所選的選項值 (例如所有媒體項目，上傳到此帖子等) 。因此，如果選擇了「所有媒體項目」 – 所有可用的圖像都將被選中，如果選擇了「已上傳到此帖子」，則只會選擇附加到當前帖子的圖像。
第二個 – 「自定義插入到郵件」 – 將獲取所有選定圖像的圖像數據 (全尺寸圖像源，替代文字，大小等可用)，同時允許將它們包裝在有條件的 HTML 代碼中 – 將代碼返回到錫伯斯編輯器。

第二個按鈕的返回代碼可以這樣看：

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

據我所知，唯一的方法是使用覆蓋適當的 Backbone 視圖，但除此之外，這就是我現在所知道的。

感謝幫助。

最佳解決方案

這個代碼塊將在「插入到帖子」旁邊添加一個按鈕。點擊後，它會將選定的圖像發送到 WP 編輯器，每個都包含在您的模板 HTML 中：

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="<%=%20imagePath%20%>" 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);
            }
        });
    }
});

添加自定義按鈕不是問題。但選擇”all images” 可能會有點棘手，因為 WP 3.5 媒體瀏覽器一點一點地加載附件。我會研究一下，但我建議您手動選擇附件。

次佳解決方案

編寫一個小插件，使用以下示例源將疊加彈出窗口中的媒體管理器左側欄列表中添加一個項目。

結果如下：

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 解決方案形式 this WPSE Answer 。
Link to draft plugin 示例將一個 JavaScript 菜單添加到 WP3.5 Media Library 彈出窗口中

第三種解決方案

我沒有完全答覆你的問題，但這是一個好的開始。要自定義新的媒體管理器，您應該學習 wp-includes/js/media-views.js 中的 JavaScript 骨幹代碼。例如，這是一個小插件，將「”Select All”」按鈕添加到「從 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');
    }
});

對於「自定義插入到郵件」按鈕，我建議使用圖庫短代碼。 UI 已經存在，用於選擇所需的圖像，並將該短碼插入錫姆恰的正確位置。你所要做的就是編寫自己的畫廊短碼格式。

看看 wp-includes/media.php 中的 gallery_shortcode 功能，並使用 post_gallery 濾鏡。

第四種方案

託馬斯·格里芬創建了一個插件示例，New Media Image Uploader，關於如何使用新的媒體經理。

This plugin provides a solid example for integrating the new media manager workflow into your plugins/themes by showing you how to upload/insert an image file into a text field.

第五種方案

我剛剛在 WP 3.6 中遇到過一個案例，其中 aesqe(非常有用) 的答案導致圖像被插入兩次，因為主幹的 state.get("selection")._byId 包括 id 和 cid 對於所選擇的每個圖像。

將 state.get("selection")._byId 更改為 state.get("selection").models，同時保留每個對象的屬性。

希望這樣可以讓某人有些沮喪。我會把它作為一個意見而不是一個答案，但唉，我沒有聲望。

參考文獻

WordPress 3.5 Media Manager – add a button

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 3.5 媒體管理器 – 添加一個按鈕