web-dev-qa-db-ja.com

カスタムの画像セットを使ってメディアアップロードマネージャに新しいタブを追加する方法

からのアップロードマネージャと内部リストの画像に新しいタブを追加したいです。

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

正確に言うと、これが新しいタブを追加したい場所で、そのタブにテーマフォルダから画像を一覧表示したいと思います。

enter image description here

私は、メディアマネージャJSを書き直す必要があることを認識していますが、正直に言うと、どこから始めればよいのかわからないのです。これを実現するには、メディアマネージャ用のまったく新しいテンプレートを作成する必要があるようです。

私はすべての提案を調べましたが、だれも質問を読んでいないようです。 「タブを追加するためにこのようなことを試みましたが、メディアマネージャ側でタブを追加していますが、画像のアップロード時にはタブが表示されないため、うまくいきません。」

だから今のところ誰もこれのための解決策を見つけることができません。

uploadsmedia
17
Benn

WordPressによると コーデックス あなたはこのようなメディアアップローダでカスタムタブを追加することができます：

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

お役に立てば幸いです。

5
Touqeer Shafi

これは古いスレッドですが、私にとってはまだ同じくらい関連しています。私はいじっていて、ここにメディアタブを追加するためのこのコードを思い付きました、多分誰かがどのようにタブのために内容を扱うかについて続けたいですか？ :)

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つのライザーです。1つはメディアライブラリを開くためのもの、もう1つはメディアルーターメニューをクリックするためのものです。

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

私はこれがもっともっと微妙な方法でできると確信しています。これを読んでより良い解決法を持っている人は誰でも、記入してください:-)

4
gubbfett