Додаємо media uploader для custom fields або ще один featured image, make you live better

Все почалося десь рік тому з того що я хотів додати медіа завантажувач для плагіна menu image, але на жаль в той час без дублювання js файлу з кори wordpress нічого не можна було зробити, а копіювати код не хотів через те що його потрібно більше підтримувати при оновленні, на тому і забив. Але недавно вирішив переглянути що змінилося, і ось що з цього вийшло.

Тепер заходимо в адмінку і включаємо нову тему, зовні вона нічим не буде відрізнятися від twentyfourteen. Потім створюємо functions.php і Новомосковський далі.

Додаємо metabox з висновком html код нашої картинки

Реєструємо функцію на подію admin_init:

Зараз ми тільки додали metabox і нічого не повинно працювати тому що callback функції для виклик ще немає, додаємо її:

Тепер можна дивитися, і ось що маємо отримати

Тепер додамо більш корисний html код всередину metabox'а, додамо ось таку функцію:

Функція працює просто: приймає параметром id зображення і виводить його, інакше виводить звичайне посилання при натисканні на яку ми будемо викликати медіа завантажувач. Викликаємо цю функцію в нашому metabox'е:

Тут теж просто, беремо біля посту meta інформацію по ключу _alt_thumbnail_id і передаємо в функцію яка виводить html. Мета даних з таким ключем ще немає, так що в адмінці побачимо зараз тільки неробочу посилання.

На цьому перша частина завішана, далі буде js.

Підключаємо js файл який буде викликати медіа завантажувач

Спочатку створимо в корені теми директорію js всередині якої помістимо файл alternative_image.admin.js. Додаємо функцію на подію admin_enqueue_scripts всередині якої і підключимо наш файл і парочку файлів з кори:

У цій функції wp_localize_script може показати не знайомої функцією, але вона просто передає параметри з php в js. З самих параметрів є масив з перекладами, це заголовок вікна медіа завантажувача і кнопка при виборі картинки, і параметр nonce. в який потрапить унікальний код який буде відправлятися з ajax запитом і який потрібен для запобігання csrf.
А в js файлі буде ось такий код:

У ньому теж немає нічого страшного, все «легко і просто» ™. Id нашого metabox'а - alternative_image. по-цьому прив'язуємося на кліки всередині нього. Кліка буде два: додавання зображення і видалення. При кліці на додавання зображення викликаємо медіа завантажувач з параметрами які передавали через wp_localize_script. Після вибору зображення і натискання на кнопку, завантажувач викличе подія select на яке у нас додана функція яка першу вибрану картинку (а їх може бути кілька, см. Параметр multiple) і викликає функцію AltImageUpdate з параметром id поста і id обраного зображення. А при кліці на видалення зображення викликається та ж функція але замість id зображення передаємо -1. Сама ж функція AltImageUpdate просто відправляє ajax запит, яким ми потім опрацюємо, і отримані дані вставляє в наш metabox.

Зараз саме час подивитися в адмінку на результат. При кліці на посилання всередині metabox'а медіа завантажувач буде показуватися, але при виборі картинки нічого не станеться. А щоб щось сталося додамо подія на ajax в наступному розділі.

Збереження обраного зображення

Залишилося зберегти вибране зображення id якого ми відправляємо за допомогою ajax запиту.

Озброївшись цим знанням додамо останню функцію яка буде викликатися на ajax запиті і зберігати id зображення до посту:

А ось в цій функції всі ну зовсім-зовсім просто. Беремо id поста і зображення з переданих даних, перевіряємо чи може поточний користувач редагуватися поточний пост і перевіряємо nonce. далі видаляємо мета дані якщо переданий id дорівнює -1, інакше оновлюємо мета по ключу _alt_thumbnail_id і вказуємо передані id зображення. На цьому збереження і видалення зображення вже працює, далі, якщо все пройшло добре, викликаємо функції яку викликали в metabox'е для виведення html коду, і передаємо її висновок назад в js код де вставляємо висновок всередину metabox'а.

Ось що виходить в результаті:

Для зручного виведення зображення скопіюємо парочку функцій з кори:

Тепер в будь-якому зручному місці в шаблоні, всередині циклу loop. виводимо

Як бонус нижче розповім як зробити таке ж поле але з можливість вибору декількох зображень.
Картинка для привернення уваги

Навігація по публікаціям

Підкажи, де можна почитати про wp.media?

Про wp.media можна почитати в js файлах в назві яких є слово media, як такої документації ніхто не писав, тому що дуже швидко все змінюється.

не працює, все зробив як написано ((

Що саме не працює? Дивись висновок консолі, логи пхп. Днями викладу архів з робочою версією, якщо не забуду)

Вітаю, знайшов Ваш пост. Зараз освоюю WP і роблю саме те, що описано в статті. Виникла проблема - не викликається медіа-завантажувач. Хоча скрипт /js/alternative_image.admin.js подкгрузілся. Я все роблю не з функції теми, а з плагіна.
PHP функція підключення js-скрипта:

function inmtoo_realt_admin_enqueue_scripts_action ($ hook) global $ post;

// check if it's a post edit page and not any other admin page
if (
($ Hook == 'post-new.php' || $ hook == 'post.php')
$ Post-> post_type == 'realty_residental'
)

// load media library scripts
wp_enqueue_media ();
wp_enqueue_style ( 'editor-buttons');

// load our js file
wp_enqueue_script (
'Alternative-image',
plugin_dir_url (__FILE__). '/js/alternative_image.admin.js',
array ( 'jquery')
);

// add variables to our js file
wp_localize_script (
'Alternative-image',
'Inmtoo_Realty',
array (
'L10n' => array (
'UploaderTitle' => __ ( 'Set alternative image', 'Inmtoo_Realty'),
'UploaderButton' => __ ( 'Select image', 'Inmtoo_Realty'),
),
'Nonce' => wp_create_nonce ( 'set_post_alternative_thumbnail_'. $ Post-> ID),
)
);
>
>

А це сам JS
(Function ($) $ (document) .ready (function () var AltImageUpdate = function (post_id, thumb_id) wp.media.post ( 'set_alternative_thumbnail', post_id: post_id,
thumbnail_id: thumb_id,
nonce: child_theme.nonce
>) .done (function (html) $ ( '# alternative_image') .find ( '. Inside') .html (html);
>);
>;

$ ( '# Alternative_image')
.on ( 'click', '# set-post-alternative-thumbnail', function (e) e.preventDefault ();
e.stopPropagation ();

var uploader = wp.media (title: child_theme.l10n.uploaderTitle,
button: ,
multiple: true
>);
uploader.on ( 'select', function () var attachments = [];
uploader.state (). get ( 'selection') .forEach (function (i) attachments.push (i.id);
>);
AltImageUpdate (wp.media.view.settings.post.id, attachments);
>);
uploader.open ();
>)
.on ( 'click', '# remove-post-alternative-thumbnail', function (e) e.preventDefault ();
e.stopPropagation ();

AltImageUpdate (wp.media.view.settings.post.id, -1);
>);
>);
>) (JQuery);

Привіт, є підозри що в первісному вигляді скрипт вже може не працювати з новою версією кори, я з вп з того часу особливо не працював. Для початку подивися в js console, може там помилки є якісь.

Додав готову тему, качай і дивись що зробив не так.

Спасибо) скачати подивлюся)