Bagaimana cara menambahkan tab baru ke pengelola unggahan media dengan set gambar khusus?

18

Saya ingin menambahkan tab baru untuk mengunggah pengelola dan gambar daftar dalam

theme_folder/images/patterns

Saya mencoba sesuatu seperti ini untuk menambahkan tab tetapi tidak berhasil karena menambahkan tab di sisi manajer media tetapi pada unggahan gambar tab itu tidak terlihat.

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

tepatnya di sinilah saya ingin menambahkan tab baru dan di tab itu saya ingin daftar gambar dari folder tema.

masukkan deskripsi gambar di sini

Saya sadar bahwa manajer media JS perlu ditulis ulang untuk itu tetapi jujur ​​saya tidak tahu harus mulai dari mana. Sepertinya saya perlu menulis template yang sama sekali baru untuk manajer media untuk mencapai ini.

Saya mengikuti semua saran tetapi sepertinya tidak ada yang membaca pertanyaan. Seperti yang disarankan "Saya mencoba sesuatu seperti ini untuk menambahkan tab tetapi tidak berhasil karena menambahkan tab di sisi manajer media tetapi pada unggahan gambar tab itu tidak terlihat."

Jadi untuk saat ini tidak ada yang dapat menemukan solusi untuk ini.

Benn
sumber

Jawaban:

6

Ini adalah utas lama tetapi bagi saya masih relevan. Saya telah mengutak-atik dan telah muncul dengan kode ini untuk menambahkan tab media di sini, mungkin seseorang ingin melanjutkan bagaimana menangani konten untuk tab? :)

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

Dan kemudian file 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
        }
    });
};

EDIT: Ok, jadi. Untuk menangani konten saya belum menemukan cara yang bagus untuk melakukan ini oleh wp.media. Solusi saya saat ini adalah 2 liseners, satu untuk membuka perpustakaan media dan satu untuk mengklik di menu router media;

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

fungsi doMyTabContent (); hanya sesuatu seperti;

function doMyTabContent() {
    var html = '<div class="myTabContent">';
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

Saya sangat yakin ini bisa dilakukan dengan cara yang jauh lebih rumit. Siapa pun yang membaca ini dan memiliki solusi yang lebih baik, silakan isi :-)

gubbfett
sumber
Terima kasih untuk ini akan melihat ke dalamnya. Tua atau tidak itu tidak pernah terpecahkan. dan ini persis seperti yang saya minta prntscr.com/kse5yk . Kerja bagus!
Benn
apakah Anda mencoba menggabungkan wordpress.stackexchange.com/a/190604/67176 ini dan pembuatan tab Anda? Saya 99% yakin ini bisa berfungsi terutama jika tab memiliki id yang sama.
Benn
1
Ya, saya melihat itu dulu, tapi saya bukan penggemar solusi iframe yang datang dengan solusi ini. Menerima data gambar dengan olah pesan iframe. Menampilkan konten adalah satu hal, tetapi menangani tindakan adalah hal lain. :) Mungkin saya melewatkan sesuatu.
gubbfett
Halo @Benn baru saja terjebak dalam mimpi buruk wp.media lagi. Kode yang saya berikan di atas di mana saya melakukan "doMyTabContent" saya hanya memicu pada satu peristiwa. Misalnya: Muat pos, klik tambahkan gambar unggulan dan tutup. Setelah klik ini tambahkan media untuk posting, dan itu tidak memuat apa pun, mungkin karena wp.media dalam contoh baru (tab masih ada di sana). Saya tidak yakin bagaimana untuk pindah ke sini. Sudahkah Anda membuat kemajuan dalam menambahkan tab dan memasukkan media dengan cara apa pun? Ingin berbagi kode? :)
gubbfett
@ gubbfett apakah Anda pernah menemukan solusi untuk ini?
RaajTram
5

Menurut WordPress Codex Anda dapat menambahkan tab khusus di pengunggah media seperti ini:

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

Semoga ini bisa membantu Anda.

Touqeer Shafi
sumber
7
Agar jelas, tab itu tidak ditambahkan ke bagian atas kotak modal, tetapi ke bilah sisi kiri. Saya tidak dapat menemukan cara untuk benar-benar menambahkan tab ke bagian atas tab Sisipkan Media. Saya juga memiliki masalah dalam mencoba menggunakan gaya css yang sudah tersedia karena konten dimasukkan di dalam iframe. Yang mungkin berarti Anda perlu menambahkan css Anda sendiri untuk menampilkan gambar dengan benar. Dan hanya untuk menyelesaikan jawabannya, Anda bisa menggunakan fungsi php scandir () untuk mengambil semua item di dalam folder gambar.
gdaniel
-1
   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' );
sarath
sumber
1
Kode Anda penuh dengan kesalahan sintaksis. Silakan gunakan sintaks php yang tepat karena sintaks yang Anda gunakan bahkan tidak ada di php. Juga, tolong jelaskan apa yang kode Anda lakukan dan bagaimana cara kerjanya. Terima kasih
Pieter Goosen
Saya baru saja mengedit kode. Kode kerjanya. Coba kode ini.
sarath
2
Baca kembali komentar saya, tetapi lewati bagian sintaksis. Kode pembuangan bukan jawaban yang berkualitas. Silakan tambahkan penjelasan tentang bagaimana kode Anda bekerja dan apa fungsinya
Pieter Goosen