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

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

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

gubbfett
источник
THNX для этого будет смотреть на это. Старый или нет, он никогда не был решен. и это именно то, что я просил prntscr.com/kse5yk . Прекрасная работа!
Бен
Вы пытались объединить этот wordpress.stackexchange.com/a/190604/67176 и создание своей вкладки? Я на 99% уверен, что это может сработать, особенно если вкладки имеют одинаковый идентификатор.
Бенн
1
Да, я сначала изучил это, но на самом деле я не фанат решения iframe, которое поставляется с этим решением. Получение данных изображения с помощью iframe. Отображение контента - это одно, а обработка действий - другое. :) Может быть, я что-то упустил.
gubbfett
Здравствуйте @Benn, снова попавший в кошмары wp.media. Код, который я предоставил выше, где я делаю «doMyTabContent», запускается только для одного события. Например: загрузите сообщение, нажмите «Добавить изображение» и закройте. После этого нажмите добавить медиа для сообщения, и он ничего не загружает, возможно, поскольку 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
Для ясности, эта вкладка добавляется не в верхнюю часть модального поля, а в левую боковую панель. Я не смог найти способ действительно добавить вкладку в верхнюю часть вкладки «Вставка мультимедиа». У меня также были проблемы при попытке использовать стили CSS, которые уже доступны, потому что содержимое вставляется в iframe. Что, вероятно, означает, что вам нужно будет добавить свой собственный 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
Пожалуйста, перечитайте мой комментарий, но пропустите часть синтаксиса. Код сброса не является качественным ответом. Пожалуйста, добавьте объяснение того, как работает ваш код и что он делает
Питер Гусен