Вопрос или проблема
Следуя этому ответу, я пытаюсь выяснить, как создать модальное окно с совершенно уникальными пунктами меню/содержимым, отличным от медиа-модали.
Если вы добавите новое state, вы сможете добавить новую вкладку меню и сделать так, чтобы она отображала соответствующее содержимое при нажатии. Однако то, что я обнаружил до сих пор, так это то, что если вы не включите традиционные wp.media.controller.Library() состояния (для галереи, вставки и т.д.), меню вообще не отображается, и у вас остается пустая медиа-рамка.
Я начал gist для плагина, и модальное окно открывается, но пока там ничего нет.
Кто-нибудь знает, как создать пользовательские рамки с пользовательскими состояниями?
Немного поздно, но я думаю, что Расширение загрузчика медиафайлов WordPress: параметры встраивания должно сработать. Я пытаюсь сделать то же самое.
Ответ или решение
Создание полностью индивидуального модального окна с использованием шаблонов wp.media в WordPress может потребовать определенных знаний работы с JavaScript и самими библиотеками WordPress. В данном ответе мы рассмотрим ключевые шаги, которые помогут вам создать пользовательский модуль с уникальным контентом, отличным от стандартного модального окна для медиа.
Шаг 1: Инициализация модального окна
Начнем с инициализации модального окна. Для этого вам необходимо зарегистрировать новый JavaScript-файл в вашем плагине или теме. Убедитесь, что вы загружаете скрипты после загрузки WordPress и используете его функции.
function my_custom_media_modal() {
wp_enqueue_media();
wp_enqueue_script('my-custom-media-js', get_template_directory_uri() . '/js/my-custom-media.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_custom_media_modal');Шаг 2: Создание JavaScript файла
В файле my-custom-media.js вы можете создать модальное окно, используя API wp.media. Вот пример просто структуры вашего кода:
jQuery(document).ready(function($) {
var custom_media_frame;
$('#your-button-id').on('click', function(e) {
e.preventDefault();
// Создаем новое модальное окно
custom_media_frame = wp.media({
title: 'Мой пользовательский медиа модуль',
button: {
text: 'Выбрать'
},
// Определяем состояние
states: [
new wp.media.controller.Library({
title: 'Моя библиотека',
library: wp.media.query({ type: 'image' }),
multiple: true, // Можно выбрать несколько
// Убираем стандартные состояния и добавляем свое
priority: 20,
toolbar: 'main-insert',
allowLocalEdits: true,
})
],
// Уникальный контент
content: {
// Здесь можно добавить свой уникальный HTML-контент
render: function() {
this.el.innerHTML = '<div>Ваш контент здесь</div>';
}
}
});
// Открываем модальное окно
custom_media_frame.open();
});
});Шаг 3: Добавление других состояний
Если вы хотите добавить дополнительные состояния и элементы меню, вы можете создать пользовательские контроллеры, используя классы wp.media.controller. Вам нужно создать свои собственные состояния и подключить их в массив states.
// Пример создания пользовательского контроллера
wp.media.controller.MyCustomController = wp.media.controller.Library.extend({
initialize: function() {
wp.media.controller.Library.prototype.initialize.apply(this, arguments);
// Добавляем индивидуальную логику или изменения
}
});
// В вашем массиве состояний
states: [
new wp.media.controller.MyCustomController({
title: 'Мой пользовательский контент',
library: wp.media.query({ type: 'attachment' }),
multiple: false,
})
]Шаг 4: Кастомизация внешнего вида
Вы всегда можете модифицировать CSS вашего модального окна, чтобы визуально адаптировать его под свои нужды. Не забудьте добавить свои стили через wp_enqueue_style().
Заключение
Создание полностью индивидуального модального окна с использованием wp.media — это процесс, который требует тщательной настройки и понимания структуры кода WordPress. Используя приведенные выше шаги, вы сможете настроить модальные окна так, как вам необходимо. Не забывайте регулярно проверять официальную документацию WordPress и использовать лучший опыт SEO и доступности для улучшения вашего модального окна.
Теперь у вас есть все необходимые инструменты для создания индивидуального модального окна на базе wp.media. Удачи в разработке!