Тут надо использовать wp.media
— его надо подключить вызовом wp_enqueue_media()
по хуку 'admin_enqueue_scripts'
.
Затем — при первом клике по кнопке — надо создать всплывающее окно. Переменную с ним разместите в родительском замыкании — чтобы создавать его только один раз.
Код примерно таков (возможны опечатки):
// замыкание обработчика ready
var win; // <-- это - окно со вложениями
$("#кнопка").click(function () {
if (!win) {
// окно не создано - создать:
win = wp.media({
title: "Заголовок всплывшего окна",
multiple: false, // выбор одного изображения
button: {
text: "Выбрать",
requires: {selection: false} // чтобы можно было сбросить выбор.
},
library: {type: "image"} // отоборажать только картинки
});
win.on('select', function () {
var sel = win.sate().get('selection'), att;
if (sel.length) {
att = sel.first().toJSON();
// тут обрабатывается выбранная картинка
// в att.url - ссылка на атачмент;
// в att.id - идентификатор атачмента;
// в att.sizes - масштабированные версии атачмента;
} else {
// выбор не сделан или сброшен
}
});
win.on('open', function () {
// тут надо отметить картинку, которая уже выбрана
var att, sel = win.state().get('selection');
sel.reset();
if (/* какой-то атачмент выбран */) {
// допустим, что идентификатор атачмента - в att_id
att = wp.media.attachment(att_id);
att.fetch();
sel.add(att);
}
});
}
win.open();
});
В обработчике select
ссылки на масштабированные версии изображения находятся в att.sizes['размер'].url
.
При открытии окна — событие open
— отмечается выбранное прежде изображение — имеет смысл только при первом открытии, если выбор был сохранён прежде и не пуст на момент создания окна.
Как-то так…
Ошибка выходит
Uncaught TypeError: win.sate is not a function
Опечатка в строке var sel = win.sate().get('selection'), att;
.
Должно быть win.state()
вместо win.sate()
.