Использование медиа-загрузчика 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 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, которое будет передаваться при отправке формы. Но это я оставлю вам. Уверен, вы справитесь.

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

Источник

• Using the WordPress Media Loader in the Front-End