如何为媒体上传管理器添加自定义图像集的新选项卡?

时间:2015-04-24 作者:Benn

我想添加新选项卡以上载管理器和内部列表图像

theme_folder/images/patterns
我尝试了这样的方法来添加选项卡,但它对我无效,因为它在media manager一侧添加选项卡,但在图像上载时,该选项卡不可见。

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( \'tab_slug\' => \'Patterns\' );
    return array_merge( $tabs, $newtab );
}

add_filter( \'media_upload_tabs\', \'custom_media_upload_tab_name\' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo \'Hello content\';
}
add_action( \'media_upload_tab_slug\', \'custom_media_upload_tab_content\' );
确切地说,这是我想添加一个新选项卡的地方,在该选项卡中,我想列出主题文件夹中的图像。

enter image description here

我知道media manager JS需要重写,但老实说,我不知道从哪里开始。看来我需要为media manager编写全新的模板才能实现这一点。

I went trough all suggestions but seems like no one is reading the question. As advised "I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible."

因此,目前还没有人能够找到解决方案。

3 个回复
SO网友:gubbfett

这是一条古老的线索,但对我来说仍然是相关的。我一直在摆弄并想出了在此处添加媒体选项卡的代码,也许有人想继续了解如何处理选项卡的内容?:)

add_action(\'admin_enqueue_scripts\', function(){
    wp_enqueue_script( \'my-media-tab\', plugin_dir_url( __FILE__ ) . \'/js/mytab.js\', array( \'jquery\' ), \'\', true );
});
然后是js文件:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};
编辑:好的,所以。对于处理的内容,我还没有找到一个很好的方法来做到这一点的wp。媒体我目前的解决方案是2个Lisener,一个用于打开媒体库,另一个用于单击媒体路由器菜单;

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($(\'body\').find(\'.media-modal-content .media-router a.media-menu-item.active\')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on(\'click\', \'.media-router a.media-menu-item\', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});
函数doMyTabContent();就像是;

function doMyTabContent() {
    var html = \'<div class="myTabContent">\';
    //My tab content here
    html += \'</div>\';
    $(\'body .media-modal-content .media-frame-content\')[0].innerHTML = html;
}
我非常确信这可以用一种更加微妙的方式来完成。无论谁读到这篇文章并有更好的解决方案,请填写:-)

SO网友:Touqeer Shafi

根据WordPressCodex 您可以在media uploader中添加自定义选项卡,如下所示:

// add the tab
add_filter(\'media_upload_tabs\', \'my_upload_tab\');
function my_upload_tab($tabs) {
    $tabs[\'mytabname\'] = "My Tab Name";
    return $tabs;
}

// call the new tab with wp_iframe
add_action(\'media_upload_mytabname\', \'add_my_new_form\');
function add_my_new_form() {
    wp_iframe( \'my_new_form\' );
}

// the tab content
function my_new_form() {
    echo media_upload_header(); // This function is used for print media uploader headers etc.
    echo \'<p>Example HTML content goes here.</p>\';
}
希望它能帮助你。

SO网友:sarath
   function axcoto_genify_media_menu($tabs) {
            $newtab = array(\'genify\'  => __(\'Axcoto Genify\', \'axcotogenify\'));
            return array_merge($tabs, $newtab);
            }
            add_filter(\'media_upload_tabs\', \'axcoto_genify_media_menu\');

           array(\'genify\' => __(\'Axcoto Genify\', \'axcotogenify\'));


        function axcoto_genify_media_process() {
        media_upload_header();
        echo \'hello\';
        }
        function axcoto_genify_media_menu_handle() {
        return wp_iframe( \'axcoto_genify_media_process\');
        }



 if ( ( is_array( $content_func ) && ! empty( $content_func[1] ) && 0 === strpos( (string) $content_func[1], \'media\' ) ) || 0 === strpos( $content_func, \'media\' ) )
        wp_enqueue_style( \'media\' );
结束