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


18

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

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を書き直す必要があることは承知していますが、正直なところ、どこから始めればよいかわかりません。これを実現するには、メディアマネージャー用に完全に新しいテンプレートを作成する必要があるようです。

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

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

回答:


6

これは古いスレッドですが、私にとってはまだ関連性があります。私はいじっていて、ここにメディアタブを追加するためのこのコードを考え出しました、誰かがタブのコンテンツを処理する方法を続けたいのでしょうか?:)

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人のライセンス取得者です。

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

これはもっと繊細な方法で行えると確信しています。これを読んでより良い解決策を持っている人は誰でも記入してください:-)


このためのthnxはそれを調べます。古いかどうかは決して解決されませんでした。そして、これはまさに私がprntscr.com/kse5ykを求めたもの です。よくやった!
ベン

このwordpress.stackexchange.com/a/190604/67176とタブ作成を組み合わせてみましたか?特にタブのidが同じである場合、動作することは99%確信しています。
ベン

1
はい、最初に調べましたが、私はこのソリューションに付属するiframeソリューションのファンではありません。iframeメッセージングによる画像データの受信。コンテンツを表示することは別ですが、アクションを処理することも別です。:)たぶん私は何かを逃しています。
-gubbfett

こんにちは、@ Bennはwp.mediaの悪夢に再び巻き込まれました。「doMyTabContent」を実行する上記のコードは、1つのイベントでのみトリガーされます。例:投稿を読み込み、[注目の画像を追加]をクリックして閉じます。この後、投稿用のメディアの追加をクリックすると、おそらくwp.mediaが新しいインスタンスにあるため(タブはまだあります)、何もロードしません。ここに進む方法がわかりません。タブを追加し、何らかの方法でメディアを挿入することに関して、何か進展はありましたか?いくつかのコードを共有したいですか?:)
gubbfett

@gubbfettはこれに対する解決策を見つけましたか?
RaajTram

5

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

それがあなたを助けることを願っています。


7
明確にするために、そのタブはモーダルボックスの上部ではなく、左側のサイドバーに追加されます。[メディアの挿入]タブの上部に実際にタブを追加する方法が見つかりませんでした。また、コンテンツがiframe内に挿入されるため、すでに利用可能なcssスタイルを使用しようとすると問題が発生しました。これはおそらく、画像を正しく表示するために独自のcssを追加する必要があることを意味します。答えを完成させるために、php scandir()関数を使用して、画像フォルダー内のすべてのアイテムを取得できます。
グダニエル

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

1
コードには構文エラーがいっぱいです。使用している構文はphpにも存在しないため、適切な php構文を使用してください。また、コードが何をするのか、どのように機能するのかを説明してください。ありがとう
ピーターグーセン

コードを編集したばかりです。その動作コード。このコードを試してください。
サラト

2
コメントを読み直してください。ただし、構文の部分はスキップしてください。コードをダンプすることは質の高い答えではありません。コードがどのように機能し、どのように機能するかについて説明を追加してください
Pieter Goosen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.