Использование медиа-загрузчика 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:  https://neuropassenger.ru/ispolzovanie-zagruzchika-izobrazhenij-wordpress-vo-frontende
 * Description: Basic Media Loader Plugin
 * Version:     1.0.0
 * Author:      Breakout Studio
 * Author URI:  https://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, которое будет передаваться при отправке формы. Но это я оставлю вам. Уверен, вы справитесь. 😉

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

Источник

• Using the WordPress Media Loader in the Front-End