วิธีเพิ่มแท็บใหม่ให้กับตัวจัดการการอัปโหลดสื่อด้วยชุดภาพที่กำหนดเองได้อย่างไร

ฉันต้องการเพิ่มแท็บใหม่เพื่ออัปโหลดผู้จัดการและรูปภาพภายในรายการจาก

theme_folder/images/patterns

ฉันลองอะไรเช่นนี้เพื่อเพิ่มแท็บ แต่มันใช้งานไม่ได้สำหรับฉันเพราะมันเพิ่มแท็บที่ด้านข้างของตัวจัดการสื่อ แต่ในการอัปโหลดภาพแท็บนั้นมองไม่เห็น

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

เพื่อความแม่นยำนี่คือที่ที่ฉันต้องการเพิ่มแท็บใหม่และในแท็บนั้นฉันต้องการแสดงรายการรูปภาพจากโฟลเดอร์ชุดรูปแบบ

ฉันรู้ว่าตัวจัดการสื่อ JS ต้องเขียนใหม่ แต่จริงๆแล้วฉันไม่รู้ว่าจะเริ่มจากตรงไหน ดูเหมือนว่าฉันต้องเขียนเทมเพลตใหม่สำหรับ Media Manager เพื่อให้บรรลุสิ่งนี้

ฉันไปตามคำแนะนำทั้งหมด แต่ดูเหมือนว่าไม่มีใครอ่านคำถาม ตามที่ได้รับคำแนะนำ "ฉันพยายามทำเช่นนี้เพื่อเพิ่มแท็บ แต่มันใช้งานไม่ได้เพราะมันเพิ่มแท็บที่ด้านข้างของตัวจัดการสื่อ แต่ในการอัปโหลดภาพแท็บนั้นจะมองไม่เห็น"

ดังนั้นสำหรับตอนนี้ไม่มีใครสามารถหาทางออกสำหรับสิ่งนี้

นี่คือหัวข้อเก่า แต่สำหรับฉันยังคงเป็นที่เกี่ยวข้อง ฉันเล่นซอและสร้างรหัสนี้ขึ้นมาเพื่อเพิ่มแท็บสื่อที่นี่อาจมีบางคนต้องการดำเนินการต่อเพื่อจัดการกับเนื้อหาของแท็บอย่างไร :)

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.media โซลูชันปัจจุบันของฉันคือ 2 liseners สำหรับเปิดไลบรารีสื่อและอีกหนึ่งสำหรับคลิกในเมนูเราเตอร์สื่อ

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

ฉันแน่ใจว่าสิ่งนี้สามารถทำได้ในวิธีที่ละเอียดอ่อนมากขึ้น ใครก็ตามที่อ่านเรื่องนี้และมีทางออกที่ดีกว่าโปรดกรอก :-)

ตาม WordPress Codexคุณสามารถเพิ่มแท็บที่กำหนดเองในเครื่องมืออัปโหลดสื่อเช่นนี้:

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

หวังว่ามันจะช่วยคุณ

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