Как добавить своё поле в попап медиафайла 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, результат — полностью интегрированное поле в редактор медиафайлов.

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

Добавляем flash (swf) файлы в медиатеку сайта на Wordpress

Июнь 20, 2016 г.

Файлы Adobe Flash с расширением .swf нельзя загрузить в wordpress из коробки. Сделано так не без веских на то оснований. Но если вы осознаёте риски, то ...

Читать

Как в WP получить путь к каталогу темы

Апрель 14, 2023 г.

Wordpress реализует целое семейство параметров, которые можно использовать в шаблоне. В том числе и переменные, указывающие путь к файлам темы. Разбираемся в нюансах. Ключевых переменных тут две: [crayon-68dee177ea5f4645364007/] В чем их ...

Читать

Добавим галочку на согласие по обработке персональных данных в форму комментариев

Июль 26, 2017 г.

Продолжаю тему о "пользовательском соглашении об обработке персональных данных". В этот раз мы будем добавлять галочку в форму комментариев сайта на WP. ...

Читать

Получение кода публикации, со страницы которой была отправлена форма WPCF7

Июнь 9, 2018 г.

В продолжение статьи о сохранении данных формы в БД в виде публикации в WP, я собираюсь рассказать о том как получить код публикации, со страницы которой была выполнена отправка данных формы. Находясь внутри обработчика wpcf7_mail_sent, вы не сможете ...

Читать
 

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

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



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