Как добавить новую вкладку в менеджер загрузки медиафайлов с набором пользовательских изображений?

Я хотел бы добавить новую вкладку в загрузчик менеджера и внутри списка изображений из

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 медиа-менеджера, но, честно говоря, я не знаю, с чего начать. Похоже, мне нужно написать совершенно новый шаблон для медиа-менеджера, чтобы достичь этого.

Я прошел через все предложения, но кажется, что никто не читает вопрос.
Как было рекомендовано
“Я пробовал что-то вроде этого, чтобы добавить вкладку, но это не работает для меня, так как она добавляет вкладки на стороне медиа-менеджера, но на загрузке изображений эта вкладка не видна.”

Так что пока никто не может найти решение для этого.

Это старая тема, но для меня все еще актуальна.
Я возился с этим и пришел к такому коду для добавления вкладки медиа здесь, может, кто-то захочет продолжить решать, как обрабатывать контент для вкладки? 🙂

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. Мое текущее решение — два слушателя, один для открытия библиотеки медиа и один для нажатия в меню маршрутизатора медиа;

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 вы можете добавить пользовательскую вкладку в загрузчик медиа следующим образом:

// добавить вкладку
add_filter('media_upload_tabs', 'my_upload_tab');
function my_upload_tab($tabs) {
    $tabs['mytabname'] = "My Tab Name";
    return $tabs;
}

// вызвать новую вкладку с помощью wp_iframe
add_action('media_upload_mytabname', 'add_my_new_form');
function add_my_new_form() {
    wp_iframe( 'my_new_form' );
}

// содержимое вкладки
function my_new_form() {
    echo media_upload_header(); // Эта функция используется для вывода заголовков загрузчика медиа и т.д.
    echo '<p>Пример HTML-контента здесь.</p>';
}

Надеюсь, это вам поможет.

Добавить вкладку / кнопку внутри модального окна ‘Выбрать или загрузить медиа’ в WordPress

jQuery(document).ready(function ($) {
  console.log('Hello, bdkoder!');

  var l10n = wp.media.view.l10n;

  // Расширение прототипа MediaFrame.Select для добавления пользовательских вкладок и контента
  var frame = wp.media.view.MediaFrame.Select;
  wp.media.view.MediaFrame.Select = frame.extend({
    initialize: function () {
      frame.prototype.initialize.apply(this, arguments);

      var State = wp.media.controller.State.extend({
        insert: function () {
          console.log("Something...");
          this.frame.close();
        }
      });

      this.states.add([
        new State({
          id: "my_tab",
          search: false,
          title: "My Tab"
        })
      ]);

      // При рендере
      this.on("content:render:my_tab", this.renderMyTabContent, this);
    },
    browseRouter: function (routerView) {
      routerView.set({
        upload: {
          text: l10n.uploadFilesTitle,
          priority: 20
        },
        browse: {
          text: l10n.mediaLibraryTitle,
          priority: 40
        },
        my_tab: {
          text: "My Tab",
          priority: 60
        }
      });
    },
    renderMyTabContent: function () {
      var MyTabContent = wp.Backbone.View.extend({
        tagName: "div",
        className: "my-tab-content",
        template: wp.template("my-tab-template"),
        active: false,
        toolbar: null,
        frame: null
      });

      var view = new MyTabContent();

      this.content.set(view);
    }
  });

  // Добавить пользовательский шаблон на страницу
  $('body').append('<script type="text/html" id="tmpl-my-tab-template"><h3>My Custom Tab Content</h3><p>Это контент моей пользовательской вкладки.</p></script>');
});

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