Отображение медиазагрузчика в собственном плагине на WordPress 3.5

Только загрузчик

Ниже приведен пример кода, который работает только на странице редактирования записи. Если вы хотите использовать его и на других страницах, включите функцию wp_enqueue_media(), см. следующий заголовок.

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

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Краткое объяснение работы с медиа-менеджером

1. Сначала подключите необходимые скрипты, используя основную функцию: wp_enqueue_media(); Эта функция настраивает все необходимые параметры, локализует текст меню и загружает все соответствующие файлы JavaScript.

   Вы можете добавить свой скрипт через wp_enqueue_script().

   // Также добавляет проверку, чтобы убедиться, что `wp_enqueue_media` был вызван только один раз.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();
   

   Добавьте также стандартный скрипт для пользовательского заголовка: wp_enqueue_script( 'custom-header' ); Это создает фрейм выбора изображения и связывает его с элементом интерфейса, например, кнопкой или ссылкой. Затем он вызывает URL нашего выбора с ID выбранного изображения. Это тот же скрипт, который используется при выборе изображений для пользовательских заголовков темы.

2. Добавьте кнопку в медиа-менеджер:

   <?php
   $modal_update_href = esc_url( add_query_arg( array(
       'page'     => 'my_media_manager',
       '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
   ), admin_url( 'upload.php' ) ) );
   ?>
   
   <p>
   <a id="choose-from-library-link" href="#"
       data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
       data-choose="<?php esc_attr_e( 'Выбрать изображение по умолчанию' ); ?>"
       data-update="<?php esc_attr_e( 'Установить как изображение по умолчанию' ); ?>"><?php _e( 'Установить изображение по умолчанию' ); ?>
   </a> |
   </p>
   

3. Определите функцию обработки Наконец, вам нужно добавить код для обработки ID изображения, который мы передадим в URL data-update-link.

   // Добавьте в начало страницы data-update-link
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Обработайте и сохраните ID изображения
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }
   

Источники и подсказки:

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/
• http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c
• Фильтры и хуки действий: http://core.trac.wordpress.org/ticket/22186#comment:46

Я также разместил ответ на сайте stackoverflow.com, и это может быть полезно.

Я использую этот метод для подключения медиазагрузчика в свой пользовательский плагин. Возможно, это поможет.

В главном файле темы (index.php) добавьте следующее:

wp_enqueue_style('thickbox'); // подключаем медиафайлы в WordPress
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// загрузка скрипта в админку
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

В файле admin_script.js:

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

В админском файле (admin_settings.php):

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Загрузить изображение" class="wpss-filebtn" />

Подробнее в моем блоге

Дополнительная информация: http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Просто используйте этот код для загрузчика медиафайлов. В ответе jQuery вы получите ссылку.

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Загрузить изображение" />
    <br />Введите URL или загрузите изображение
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


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

        e.preventDefault();

        // Если объект загрузчика уже создан, просто откроем диалог
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        // Расширяем объект wp.media
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Выберите изображение',
            button: {
                text: 'Выбрать изображение'
            },
            multiple: true
        });

        // При выборе файла получаем URL и устанавливаем его в текстовое поле
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        // Открываем диалог загрузчика
        custom_uploader.open();

    });


});
    </script>