Создайте пользовательскую вкладку в загрузке медиафайлов WordPress 5

Вопрос или проблема

add_filter('media_view_settings', 'addMediaTab');

function addMediaTab($settings) {
    $settings['tabs'] = array('mymediatab' => 'Моя медиа вкладка');
    return $settings;
}

var Library = wp.media.controller.Library;
var oldMediaFrame = wp.media.view.MediaFrame.Post;

wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
    initialize: function () {
        oldMediaFrame.prototype.initialize.apply(this, arguments);
        var options = this.options;
        this.states.add([
            new Library({
                id: 'inserts',
                title: 'Моя новая вкладка',
                priority: 20,
                toolbar: 'main-insert',
                filterable: 'all',
                library: wp.media.query(options.library),
                multiple: false,
                editable: false,
                library: wp.media.query(_.defaults({
                    newtab: 'newtab',
                }, options.library)),
                displaySettings: true,
                displayUserSettings: true
            }),
        ]);
    },
});

.

Ответ или решение

Создание пользовательских вкладок в медиабиблиотеке WordPress 5

WordPress 5 представляет собой значительное обновление в сравнении с предыдущими версиями, что повлияло на работу с медиабиблиотекой и её расширения. Если вы ранее использовали функцию media_upload_tabs в WordPress 4 для создания пользовательских вкладок, в версии 5 вы столкнетесь с некоторыми изменениями. Давайте рассмотрим, как создать пользовательскую вкладку в медиабиблиотеке WordPress 5 пошагово.

1. Использование хуков для настройки медиабиблиотеки

В WordPress 5 вместо media_upload_tabs рекомендуется использовать хук media_view_settings, который позволяет добавлять новые вкладки в интерфейс медиабиблиотеки. Пример кода, который поможет вам достичь этой цели, приведён ниже:

add_filter('media_view_settings', 'addMediaTab');

function addMediaTab($settings) {
    $settings['tabs']['mymediatab'] = 'Моя медиа вкладка';
    return $settings;
}

Этот код добавляет новую вкладку с названием "Моя медиа вкладка" в медиабиблиотеку. Однако следует учесть, что при использовании нового интерфейса Gutenberg такая вкладка может не отображаться так, как вы ожидаете.

2. Настройка пользовательского интерфейса через JavaScript

Если вы хотите интегрировать пользовательскую вкладку в медиабиблиотеку с помощью JavaScript, вам нужно переопределить существующий контроллер библиотеки. Ниже представлен пример кода, который создает новую вкладку через JavaScript:

var Library = wp.media.controller.Library;
var oldMediaFrame = wp.media.view.MediaFrame.Post;

wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
    initialize: function () {
        oldMediaFrame.prototype.initialize.apply(this, arguments);
        var options = this.options;
        this.states.add([
            new Library({
                id: 'inserts',
                title: 'Моя новая вкладка',
                priority: 20,
                toolbar: 'main-insert',
                filterable: 'all',
                library: wp.media.query(options.library),
                multiple: false,
                editable: false,
                library: wp.media.query(_.defaults({
                    newtab: 'newtab',
                }, options.library)),
                displaySettings: true,
                displayUserSettings: true
            }),
        ]);
    },
});

В этом примере создается новый контроллер библиотеки с названием "Моя новая вкладка". Обратите внимание, что для этого кода необходимо подключать JavaScript-файл в админке WordPress.

3. Примечания и рекомендации

• Совместимость с Gutenberg: Если ваша цель — использование Gutenberg как основного редактора, стоит учитывать, что старые функции, связанные с медиа, могут быть несовместимы. Однако подход с использованием JavaScript позволит вам более гибко настроить интерфейс.

• Плагины для Classic Editor: Если вы предпочитаетеClassic Editor, вы можете использовать его вместе с вышеприведёнными кодами, чтобы достичь желаемых результатов.

• Дополнительные ресурсы: Для более глубокого понимания процесса вы можете обратиться к следующим ресурсам:

  • Документация по хукам WordPress
  • Диск отзыва о медиа-загрузке в WordPress 5
  • Демонстрационный пример по расширению медиазагрузчика

Создание пользовательских вкладок в медиабиблиотеке WordPress 5 требует понимания как нового интерфейса, так и работы с хуками. С помощью приведенных кодов и рекомендаций вы сможете успешно добавить одну или несколько вкладок, улучшая функционал вашей медиабиблиотеки.