
Всем привет! Сегодня я расскажу, как использовать медиа-загрузчик WordPress в любом месте, где он вам понадобится для добавления изображений. Естественно, без программирования не обойдется. 😉
PHP
Начнем с основного.
В первую очередь, для работы медиа-загрузчика WordPress необходимо подключить его JavaScript-файлы с помощью wp_enqueue_media().
Затем, используя фильтр ajax_query_attachments_args, ограничим пользователям доступ к файлам в библиотеке, отображая лишь те из них, что были загружены текущим пользователем. Если такая фича вам не нужна, то просто не используйте этот фильтр. 😉
Будет разумно проверять права пользователя на загрузку файлов каждый раз, когда потребуется вызывать медиа загрузчик. Сделать это можно с помощью current_user_can( ‘upload_files’ ).
Окей, теперь смотрите, как это реализуется на практике. Я напишу небольшой плагин для демонстрации примера. Создадим папку для плагина и в ней главный файл — bsml.php. Поместим в него следующий код.
<?php
/**
* Plugin Name: BS Media Loader
* Plugin URI: http://dev.neuropassenger.ru/ispolzovanie-zagruzchika-izobrazhenij-wordpress-vo-frontende
* Description: Basic Media Loader Plugin
* Version: 1.0.0
* Author: Breakout Studio
* Author URI: http://dev.neuropassenger.ru/
* Text Domain: bsml
* Domain Path: /languages
*/
// Инициализация плагина
function bsml_init() {
load_plugin_textdomain( 'bsml', false, plugin_dir_url(__FILE__) . 'languages/' );
add_action( 'wp_enqueue_scripts', 'bsml_enqueue_media_loader_scripts' );
add_filter( 'ajax_query_attachments_args', 'bsml_restrict_media_files' );
add_shortcode( 'bsml', 'bsml_shortcode' );
}
add_action( 'init', 'bsml_init' );
// Подключаем необходимые файлы для работы загрузчика
function bsml_enqueue_media_loader_scripts() {
// Наш скрипт для обработки загрузчика
wp_enqueue_script( 'bsml', plugin_dir_url(__FILE__) . 'js/bsml.js', array(), '1.0.0' );
// Скрипты WordPress для работы загрузчика
wp_enqueue_media();
}
// Доступ пользователя только к тем файлам, которые он загрузил сам
function bsml_restrict_media_files( $query ) {
if ( !current_user_can( 'manage_options' ) )
$query['author'] = get_current_user_id();
return $query;
}
// Регистрируем шорткод для вывода загрузчика
function bsml_shortcode() {
// Если все ок, выводим кнопку для загрузки
if( current_user_can( 'upload_files' ) ) {
$label = __( 'Выберите файл', 'bsml' );
$no_image_path = plugin_dir_url(__FILE__) . 'img/no-image.png';
// Превью изображения
$html = "<img class='bs_prev_img' data-src='$no_image_path' src='$no_image_path' width='150px' height='150px'>";
// Скрытое поле для передачи загруженного изображения в обрабатывающих форму скрипт
$html .= "<input type='hidden' name='bsml_image' class='bsml-image'>";
// Кнопки для управления загрузчиком изображений
$html .= "<button type='submit'>" . __( 'Загрузить', 'bsml' ) . "</button>";
$html .= "<button type='submit'>" . __( 'Очистить', 'bsml' ) . "</button>";
// Иначе сообщаем, что у пользователя нет необходимых прав
} else {
$html = __( 'У вас нет прав для загрузки файлов!', 'bsml' );
}
return $html;
}
JavaScript
Теперь займемся обработкой нажатий на кнопки и реализуем функциональность нашего медиа-загрузчика. Это довольно просто, вызвать интерфейс загрузчика и затем сделать что-нибудь с загруженным файлом.
Для начала, создадим объект bsmlFrame, используя wp.media(), с помощью которого будем работать с медиа-загрузчиком.
Затем «прикрепим» обработчик на событие ‘select‘ нашего bsmlFrame объекта, чтобы сделать что-то, когда файл выбран. В нашем случае мы будем внедрять в HTML-код id загруженного изображения и его url, чтобы у нас отобразилось превью. Переменная attachment хранит в себе объект со всей необходимой информацией о загруженном изображении. Вы можете использовать console.log(), чтобы увидеть все, что содержится в этом объекте.
Далее сделаем так, чтобы открывалось модальное окно медиа-загрузчика при нажатии на кнопку «Загрузить» с помощью bsmlFrame.open().
Наконец, будем сбрасывать форму к исходному состоянию при нажатии на кнопку очистить. Удалим превью загруженного изображения и вернем то, что стоит по умолчанию до каких-либо действий пользователя.
Весь код, приведенный ниже, следует разместить в каталоге со скриптами, /js/. Для этого создайте файл и дайте ему имя bsml.js. Выше вы могли заметить, как мы его уже подключили с помощью wp_enqueue_script().
(function( $ ) {
$(function() {
var bsmlFrame;
// Открываем окно загрузчика
$('.bsml-upload').on('click', function(event) {
event.preventDefault();
var btn = $(this);
if (bsmlFrame) {
bsmlFrame.open();
return;
}
// Инициализируем окно загрузчика
bsmlFrame = wp.media.frames.bsmlFrame = wp.media({
title: $(this).data('uploader-title'),
button: {
text: $(this).data('uploader_button_text')
},
multiple: false
});
// Создаем обработчик, работающий после выбора файла
bsmlFrame.on('select', function() {
var attachment = bsmlFrame.state().get('selection').first().toJSON();
btn.hide();
$(btn).prev.prev.attr('src', attachment.url);
$(btn).prev().val(attachment.id);
});
bsmlFrame.open();
});
// Сбрасываем форму к исходному состоянию
$('.bsml-remove').on('click', function() {
var btn = $(this);
var src = $(btn).prev().prev().prev().attr('data-src');
$(btn).prev.prev.prev.attr('src', src);
$(btn).prev.prev.val('');
$(btn).prev.show();
return false;
});
});
})( jQuery );
Ну вот и все! Теперь вы можете проверить работу плагина, используя шорткод [bsml] внутри какой-нибудь формы. Осталось только сделать обработку скрытого поля input, которое будет передаваться при отправке формы. Но это я оставлю вам. Уверен, вы справитесь. 😉
Если будут какие-нибудь вопросы — не стесняйтесь, спрашивайте в комментариях. ✍️