Додавання користувацької кнопки зображення за допомогою засобу завантаження медіа в WordPress
Нещодавно я працював над плагіном, де ми хотіли використати за замовчуванням завантажувач медіа WordPress для наших вимог. У нас була спеціальна кнопка зображення, і ми хотіли завантажити зображення за допомогою засобу завантаження медіа. WordPress чудово створив медіа-завантажувач, що дозволяє користувачеві завантажувати нове зображення або використовувати наявне зображення з медіатеки.
Завжди рекомендується використовувати вбудований завантажувач медіа, якщо ви шукаєте власне рішення для завантаження зображення у серверну систему. Таким чином ви дотримуєтеся стандартів WordPress. Реалізація програми для завантаження медіа займає лише кілька рядків коду. Тож без подальших обговорень давайте почнемо з цього.
Для цього підручника я додаю спеціальну кнопку зображення для публікації та сторінки. Після натискання цієї кнопки відкриється програма завантаження медіа, куди користувач може завантажити зображення. URL-адреса завантаженого зображення встановлюється у спеціальному метаполі та зберігається як мета публікації для певної публікації чи сторінки.
Додайте власний метабокс у WordPress
Метабокс – це не що інше, як блок у дописі чи на сторінці. Категорії, теги, обране зображення, фрагмент, обговорення тощо – це приклад мета-вікон. За допомогою вікна Meta можна додати додаткову інформацію для публікації та сторінки.
Нам потрібне мета-поле, яке містить кнопку завантаження зображення та текстове поле. Коли користувач натискає кнопку, він завантажує зображення, а кінцева URL-адреса зображення встановлюється в текстовому полі.
Додавання метабоксу легко і просто. Напишіть код нижче у functions.phpфайлі або у своєму плагіні.
function aw_custom_meta_boxes( $post_type, $post) {
add_meta_box(
'aw-meta-box',
__( 'Custom Image' ),
'render_aw_meta_box',
array('post', 'page'), //post types here
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );
function render_aw_meta_box($post) {
$image = get_post_meta($post->ID, 'aw_custom_image', true);
?>
<table>
<tr>
<td><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
<td><input type="text" name="aw_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" style="width:500px;" /></td>
</tr>
</table>
<?php
}Після додавання вищевказаного коду перейдіть до своєї публікації або сторінки, і ви зможете побачити нове мета-поле, додане разом із полями.
Налаштування WordPress Media Uploader
Тепер ви готові до свого метабоксу. Наступне – натиснути кнопку «Завантажити зображення», відкрити програму завантаження медіа та встановити URL-адресу завантаженого зображення в текстове поле. Тож спочатку вам потрібно створити файл js і поставити його в чергу у середовищі WordPress.
Давайте створимо файл js awscript.jsі поставимо його в чергу наступним чином:
function aw_include_script() {
if (! did_action( 'wp_enqueue_media')) {
wp_enqueue_media();
}
wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );Тут я дав шлях до теми, припускаючи, що ви додаєте цілий код у тему. Якщо ви робите це через плагін, то вам потрібно відрегулювати шлях відповідно до вашого плагіна.
Для виконання цього завдання я взяв посилання на Javascript Reference / wp.media і написав код jQuery. У awscript.jsнапише медіа завантажувач код наступним чином .
jQuery(function($){
$('body').on('click', '.aw_upload_image_button', function(e){
e.preventDefault();
var button = $(this),
aw_uploader = wp.media({
title: 'Custom image',
library: {
uploadedTo: wp.media.view.settings.post.id,
type: 'image'
},
button: {
text: 'Use this image'
},
multiple: false
}).on('select', function() {
var attachment = aw_uploader.state().get('selection').first().toJSON();
$('#aw_custom_image').val(attachment.url);
})
.open();
});
});Тепер продовжуйте і натисніть на кнопку «Завантажити зображення», вона відкриє програму завантаження медіа, виберіть / завантажте зображення, і ви побачите URL-адресу зображення, додану в текстове поле. Нарешті, я збираюся зберегти цю URL-адресу в таблиці ‘postmeta’ з ключем ‘aw_custom_image’. Звичайно, ви можете дати будь-яке ім’я ключу.
function aw_save_postdata($post_id)
{
if (array_key_exists('aw_custom_image', $_POST)) {
update_post_meta(
$post_id,
'aw_custom_image',
$_POST['aw_custom_image']
);
}
}
add_action('save_post', 'aw_save_postdata');Save_post – це дія, яка запускається щоразу, коли допис чи сторінка створюються або оновлюються. За допомогою цієї дії ви можете ввести свій код в систему. Ви можете прочитати більше про цей гачок на документування WordPress.
Сподіваюся, ви дізналися про додавання користувацького завантажувача медіа в WordPress. Спробуйте це у своєму плагіні чи темі та повідомте мені про свої думки в розділі коментарів нижче.