Добавление кнопки "Загрузить медиа" в поле метабокса

Question

Добавление кнопки "Загрузить медиа" в поле метабокса

4 окт. 2012 г., 00:18:41

Просмотры: 62.9K

Голосов: 21

У меня есть пользовательский тип записи с метаполем, которое должно использовать загрузку файлов (для видеофайлов). Мне интересно, какой правильный способ добавить кнопку "Загрузить", которая будет открывать медиабиблиотеку WordPress и устанавливать URL выбранного файла в текстовое поле, связанное с этой кнопкой.

Мне не нужен код для создания самого метаполя, а способ правильно добавить кнопку загрузки медиафайлов WordPress.

SpyrosP

515

метабокс загрузки мета данные записи медиа

Комментарии

Смотрите учебное руководство и простой плагин, созданный на его основе, который вы можете попробовать здесь. Помогло мне.

Fanky

25 окт. 2019 г. 10:07:03

Все ответы на вопрос

Комментарии

Я попробовал этот метод, но текстовое поле ввода #upload_image так и не заполняется

Mr Pablo

7 июл. 2016 г. 11:19:08

этот ответ не работает. смотрите другие ответы.

T.Todua

1 сент. 2016 г. 14:19:15

Небольшое напоминание со страницы Codex для admin_print_scripts: admin_print_scripts в основном используется для вывода встроенного javascript. admin_print_scripts не следует использовать для подключения стилей или скриптов на страницах админки. Вместо этого используйте admin_enqueue_scripts.

Zulian

22 янв. 2013 г. 10:47:33

Решение:

1) В файле functions.php добавьте блок для регистрации необходимых скриптов:

// добавляем необходимые скрипты
add_action('plugins_loaded', function(){
  if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
  }
});

function my_admin_scripts(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
}

// Правильный способ подключения
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* зависимости */
// );
//
// wp_enqueue_script('my-upload');

function my_admin_styles(){
  wp_enqueue_style('thickbox');
}

2) Затем добавьте блок метабокса:

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'Заголовок метабокса', // Название
      'func99999', // Callback-функция
      get_post_types(), // Экран (добавляет метабокс ко всем типам записей)
      'normal' // Контекст
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, 'my-image-for-post', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Загрузить изображение" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery('#my_upl_button').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr('src')
        jQuery('#my_image_URL').val(imgurl);
        jQuery('#picsrc').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery('#my_image_URL').attr('name');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
      return false;
    }); // Конец обработчика клика
  });
  </script>
<?php
}

add_action('save_post', function ($post_id) {
  if (isset($_POST['my_image_URL'])){
    update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']);
  }
});

P.S. Если вам нужно несколько полей, вы можете легко сделать это следующим образом: http://pastebin.com/raw/xpU1ch2W

T.Todua

5.85K

1 сент. 2016 г. 14:11:09

Комментарии

Работает отлично, но только с изображениями. Как можно сделать то же самое с видеофайлами?

Alex

18 июл. 2018 г. 14:57:11

bueltge 17.1K · Accepted Answer · 2012-10-04T06:37:33Z

Посмотрите этот скелет загрузчика медиафайлов. Вы также можете использовать его в своей разметке, например, в Meta Box.

Подсказка: убедитесь, что используете скрипты только на странице, где активен ваш Meta Box. Иначе часто возникают проблемы на стандартных страницах с загрузчиком.

Теперь попытка разобрать важные части для включения загрузчика в ваш пользовательский раздел.

Сначала добавьте кнопку в метабокс:

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Загрузить изображение" />

Теперь подключите скрипты:

function my_admin_scripts() {    
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
}

function my_admin_styles() {

    wp_enqueue_style('thickbox');
}

// лучше использовать get_current_screen(); или глобальную переменную $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {

    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}

Последняя часть — ваш пользовательский скрипт для использования thickbox и загрузчика внутри него.

jQuery(document).ready( function( $ ) {

    $('#upload_image_button').click(function() {

        formfield = $('#upload_image').attr('name');
        tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});