Как добавить своё поле в попап медиафайла WordPress через class-плагин

Иногда стандартных полей WordPress для медиафайлов недостаточно. В этой статье я расскажу, как добавить собственное поле в окно редактирования вложения (attachment) — то самое, что появляется при открытии медиафайла в библиотеке. Мы не просто добавим поле, а сделаем это через полноценный class-плагин с сохранением значения на сервере и кастомной обвязкой HTML в окне WordPress Media Library.

Общая идея

WordPress не предлагает «официального» удобного API для кастомизации UI в медиа-библиотеке, но его Backbone.js-архитектура позволяет перехватывать ключевые методы. Мы пойдём немного нестандартным путём: «захватим» метод render() у wp.media.view.Attachment.Details.TwoColumn, чтобы внедрить свою логику и HTML.

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

Мы создаём плагин-класс с хуками:

  • admin_init: добавляем кастомное поле через фильтр attachment_fields_to_edit.
  • wp_ajax_save-attachment: добавляем обработчик сохранения данных.
  • Отдельный JS-скрипт, который цепляется к интерфейсу медиа-библиотеки и управляет полем.

Добавляем поле и nonce на сервере

Я покажу как добавляются сами actions и фильтры. Важен как приоритет так и core action, через которые они добавляются.

В методе attachment_fields_to_edit добавим поле и nonce, которые WordPress передаёт в JavaScript.

Это было не сложно, дальше разбираемся с JS.

Перехват рендера окна вложения

В JS-файле мы переопределяем метод render() у представления вложения. Это позволяет вставить свой HTML и инициализировать кастомную логику:

plugin.js

Этот блок был наверное самым сложным в этой схеме. Обещаю, дальше будет проще.

Обработка сохранения

WordPress вызывает save-attachment при сохранении полей. Мы уже подключились к этому ajax-хуку в конструкторе класса-плагина, вот код обработчика:

Данные полей придут в массиве $_POST[‘changes’]. Проверим nonce и запишем поле.

Триггерим сохранение через JavaScript

Поскольку поле у нас планируется как скрытое (можно именно скрытое создать, но я убираю его стилями), и пользователь его напрямую не редактирует — потому WordPress не будет считать его изменённым. Чтобы переломить эту ситуацию, мы вручную триггерим сохранение. Давайте вернемся к началу статьи и доопределим функцию сохранения данных:

Такой подход даёт гибкий контроль над UI и серверной логикой. Хотя он требует вмешательства в внутренности wp.media, результат — полностью интегрированное поле в редактор медиафайлов.

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

Wordpress XMLRPC DOS атака

Апрель 23, 2016 г.

Хакеры ищут разные пути взлома ваших сайтов. В большистве случаев, если только сайт не представляет какой то коммерческой ценности, это резвятся детишки, ...

Читать

Программируем поле с картинкой в таксономии Wordpress

Июль 6, 2017 г.

Давайте напишем небольшой плагин, который добавляет в термины таксономии поле выбора изображения. Начиная с версии движка 4.4 CMS Wordpress представляет ...

Читать

References WP plugin

Июнь 22, 2016 г.

Искал плагин для Wordpress, который бы позволил связывать публикации друг с другом. Видно, что не я один искал. :) Пришлось написать свой плагин, разместил ...

Читать

Как вывести категорию товаров Woocommerce в нужном месте?

Июль 14, 2017 г.

Woocommerce показывает каталог товаров (витрину) на странице - /shop/, которая создаётся автоматически при установке плагина. Здесь выводятся ...

Читать
 

Комментарии к «Как добавить своё поле в попап медиафайла WordPress через class-плагин»

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



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