Ещё один вариант подключения картинки в редактор таксономии

Предыдущий вариант встраивания картинки в редактор терминов меня не устраивает в части работы диалога и того, что в базу сохраняется URL, а не ID картинки (thumbnail).

Что не так с диалогом?

Использован диалог выбора URL картинки встроенного в WP WYSIWYG редактора, который не совсем удачен в данном случае, т.к. интерфейс может сбивать с толку пользователя. Для собственных нужд он вполне подходит, но встраивать его в работе «на клиента» не пойдет.

В WordPress есть и другой диалог, который позволяет выбрать картинку и при этом возвращает её идентификатор, а не URL. Этот диалог мы и будем использовать в новой версии демо-плагина, который писали в прошлой статье.

Структура плагина

Вывод поля картинки в редакторе

Вывод поля имеет декоративную цель, формирует нужный шаблон, с которым мы будем потом работать из javascript. Каких то реальных полей (input, file) здесь не выводится, т.к. ID выбранной картинки мы передадим по ajax.

В функции вызывается метод img_field(thumb_id). Это вспомогательная функция выводит миниатюру указанной картинки. Мы будем ей пользоваться ещё в одном месте, из-за этого пришлось выделить код в отдельную функцию.

Обвязка скриптом

Сейчас, когда уже определена структура HTML шаблона, можно приступить к java-скрипту.

Скрипт выполняет две задачи:

  • привязывает события к ссылкам «выберите картинку» и «удалите картинку»;
  • передаёт ID выбранного изображения по ajax нашей программе.

Попутно мы обновляем шаблон, показывая картинку или убирая её, в зависимости от действий пользователя.

Итак, файл term_image.admin.js

Обработка передачи и сохранения данных

Скрипт отправляет данные по ajax, которые мы принимаем зацепившись хуком в нашей функциий _ajax_action().

Выполняются две задачи:

  • запомнить в сессии новое значение выбранной картинки (такая реализация не подойдет, если вы открыли и редактируете сразу два термина в рамках одной сессии!);
  • сформировать шаблон превью картинки для обновления клиентской части.

Когда программа дойдет до сохранения формы, мы используем значение ID картинки из сессии.

* * *

Есть и другие готовые решения. См. обзор плагинов, добавляющих картинку в таксономию.

Мало букафф? Читайте есчо !

Как добавить фильтр в список записей в админке Wordpress?

Апрель 21, 2016 г.

Выведя дополнительные столбцы в админке, хотелось бы иметь возможность фильтрации по этим полям. Как это делать, покажу на примере фильтрации по мета-полю публикации. Если вы читаете данный гайд, то уже знаете : Как добавить кастомный тип публикации ...

Читать

Обновление Inactive User Deleter — v 1.55

Октябрь 31, 2020 г.

Продолжаю работать по заявкам пользователей моего плагина для WP. В последнее время добавлено множество мелких пожеланий пользователей. Это и интеграции с работой некоторых популярных плагинов (user-login-history и when-last-login), и дополнительные ...

Читать

Добавление сайдбара в виде блочного шаблона в WP

Февраль 20, 2023 г.

С появлением Гутенберга (Gutenberg), микрошаблоны вышли на новый уровень. Посмотрим пример создания собственного микрошаблона и вставки его в шаблон. Начать надо с регистрации сайдбара, для этого вставим в functions.php темы следующий код: [crayon-68f4ef4d5cffd779602658/] ...

Читать

Анти CSRF в WP

Май 31, 2023 г.

В поддержку по плагину Inactive User Deleter недавно написали, что Wordfence считает мой плагин уязвимым к CSRF. Я всегда пытаюсь реагировать на запросы юзеров, но сначала мне показалось, что опять какая то параноидальная тулза что то там отрапортовала, ...

Читать
 

Комментарии к «Ещё один вариант подключения картинки в редактор таксономии»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: