Модуль WordPress «Загрузка/добавление мультимедиа» — это важная функция, которая позволяет пользователям легко добавлять изображения, видео и другие медиафайлы на свой веб-сайт WordPress. В этой статье мы рассмотрим несколько методов с примерами кода, как добавить модальное окно WordPress «Загрузить/Добавить медиа» на ваш веб-сайт. Эти методы помогут вам улучшить пользовательский опыт и упростить процесс загрузки мультимедиа. Давайте погрузимся!

Метод 1: использование медиа-кнопки WordPress по умолчанию
Самый простой способ добавить модальное окно «Загрузить/добавить медиафайлы» в WordPress — использовать медиа-кнопку по умолчанию, предоставляемую WordPress. Вы можете использовать следующий пример кода, чтобы добавить кнопку в нужное место:

<input type="button" class="button" id="custom-media-button" value="Add Media" />
<script>
  jQuery(document).ready(function($) {
    $('#custom-media-button').on('click', function() {
      wp.media.editor.open();
    });
  });
</script>

Метод 2. Добавление модального окна к пользовательской кнопке.
Если вы предпочитаете использовать пользовательскую кнопку, которая запускает модальное окно «Загрузить/добавить медиафайл», вы можете использовать следующий пример кода:

<input type="button" class="button" id="custom-media-button" value="Add Media" />
<script>
  jQuery(document).ready(function($) {
    $('#custom-media-button').on('click', function() {
      var customUploader = wp.media({
        title: 'Select or Upload Media',
        button: {
          text: 'Use this Media'
        },
        multiple: false // Set to true for multiple media selection
      });
      customUploader.on('select', function() {
        var attachment = customUploader.state().get('selection').first().toJSON();
        // Handle the selected media attachment
      });
      customUploader.open();
    });
  });
</script>

Метод 3: интеграция модального окна в пользовательский мета-блок.
Если вы хотите добавить модальный модуль «Загрузить/добавить медиафайл» в пользовательский мета-блок, вы можете использовать следующий пример кода:

function custom_meta_box_callback() {
  // Display your custom meta box fields here
  echo '<input type="button" class="button" id="custom-media-button" value="Add Media" />';
}
function enqueue_custom_scripts($hook) {
  if ($hook === 'post.php' || $hook === 'post-new.php') {
    wp_enqueue_media();
    wp_enqueue_script('custom-media-script', get_template_directory_uri() . '/js/custom-media-script.js', array('jquery'), '1.0', true);
  }
}
add_action('add_meta_boxes', 'add_custom_meta_box');
add_action('admin_enqueue_scripts', 'enqueue_custom_scripts');

Создайте файл custom-media-script.jsсо следующим содержимым:

jQuery(document).ready(function($) {
  $('#custom-media-button').on('click', function(e) {
    e.preventDefault();
    var customUploader = wp.media({
      title: 'Select or Upload Media',
      button: {
        text: 'Use this Media'
      },
      multiple: false // Set to true for multiple media selection
    });
    customUploader.on('select', function() {
      var attachment = customUploader.state().get('selection').first().toJSON();
      // Handle the selected media attachment
    });
    customUploader.open();
  });
});

В этой статье мы рассмотрели несколько способов добавления модального окна WordPress «Загрузка/добавление мультимедиа» на ваш веб-сайт. Независимо от того, хотите ли вы использовать медиа-кнопку по умолчанию, пользовательскую кнопку или интегрировать ее в собственный мета-блок, эти методы предлагают гибкость и удобство. Реализовав любой из этих методов, вы сможете улучшить возможности загрузки мультимедиа для своих пользователей WordPress.