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

Предыдущий вариант встраивания картинки в редактор терминов меня не устраивает в части работы диалога и того, что в базу сохраняется 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 картинки из сессии.

* * *

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

Написать комментарий

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

Модуль для WP Counter Integration

Октябрь 30, 2015 г.

На днях собрал модуль для подключения счетчиков на сайт под WP. Он позволяет добавить код Метрики Яши и Аналитики Гоши. Сегодня я его уже записал в репозиторий wordpress.org. Он решает задачу по размещению кода счетчика на страницах сайта, но не ...

Читать

Powered by wordpress plugin, или нет надо мной твоей власти, Завулон

Сентябрь 30, 2015 г.

Люди далекие от программирования, но пожелавшие заиметь свой блог не каком то livejournal или instagram, а так, чтобы он был совсем свой, "типа как сайт", ...

Читать

 

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

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



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