Як додати нову вкладку до менеджера завантаження медіа з користувацьким набором зображень?


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 . Чудова робота!
Бенн

ви намагалися поєднати це словоpresspress.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 () для отримання всіх елементів у папці зображень.
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' );

1
Ваш код сповнений синтаксичних помилок. Будь ласка, використовуйте належний синтаксис php, оскільки синтаксис, який ви використовуєте, навіть не існує у php. Також поясніть, що робить ваш код і як він працює. Дякую
Пітер Гузен

Я щойно відредагував код. Його робочий код. Спробуйте цей код.
Сарат

2
Перечитайте мій коментар, але пропустіть частину синтаксису. Демпінговий код не є якісною відповіддю. Будь ласка, додайте пояснення, як працює ваш код і що він робить
Пітер Гузен
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.