Использование медиа-загрузчика WordPress во фронтенде

Всем привет! Сегодня я расскажу, как использовать медиа-загрузчик 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 class='bsml-upload' type='submit'>" . __( 'Загрузить', 'bsml' ) . "</button>"; $html .= "<button class='bsml-remove' type='submit'>" . __( 'Очистить', 'bsml' ) . "</button>"; // Иначе сообщаем, что у пользователя нет необходимых прав } else { $html = __( 'У вас нет прав для загрузки файлов!', 'bsml' ); } return $html; }
Code language: PHP (php)

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 );
Code language: JavaScript (javascript)

Ну вот и все! Теперь вы можете проверить работу плагина, используя шорткод [bsml] внутри какой-нибудь формы. Осталось только сделать обработку скрытого поля input, которое будет передаваться при отправке формы. Но это я оставлю вам. Уверен, вы справитесь. 😉

Если будут какие-нибудь вопросы — не стесняйтесь, спрашивайте в комментариях. ✍️

Источник