Відображення завантажувача медіа у власному плагіні на Wordpress 3.5

У мене в WordPress 3.5 у програмі Media Uploader мало проблем. Я створив власний плагін, який завантажував картинку. Я використовую цей код JS:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

Код працює чудово, але, на жаль, форми видаються неповними. Коли я вибираю будь-яке зображення, не відображається "Налаштування відображення вкладених файлів" праворуч. Я не знаю чому. Я намагаюся додати параметри до медіа:

displaySettings: true,
displayUserSettings: true

Але це також не працює.

Лише завантажувач

нижче коду прикладу, працює лише на сторінці редагування публікацій. Якщо ви будете використовуватись і на іншій сторінці, тоді включіть функцію 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;
  });

});

Коротке пояснення Media Manager

1. Спочатку включайте відповідні сценарії, використовуйте основну функцію: wp_enqueue_media(); Функція встановлює всі відповідні настройки, локалізує текст меню та завантажує всі відповідні файли javascript.

   Ви можете додати спеціальний сценарій через wp_enqueue_script().

   // Also adds a check to make sure `wp_enqueue_media` has only been called once.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();

   Додайте також сценарій за замовчуванням для спеціального заголовка: wp_enqueue_script( 'custom-header' ); Це створює кадр вибору зображення та прив'язує його до елемента інтерфейсу, наприклад кнопки чи посилання. Потім він викликає URL або наш вибір із обраним ідентифікатором зображення. Це той самий скрипт, який використовується при виборі зображень для власних заголовків тем.

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( 'Choose a Default Image' ); ?>"
       data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
   </a> |
   </p>

3. Визначте функцію дії останньою, вам потрібно додати якийсь код для обробки ідентифікатора зображення, який ми передамо URL-адресі оновлення-посилання.

   // Add to the top of our data-update-link page
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Process and save the image 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'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
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="Upload Image" 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="Upload Image" />
    <br />Enter a URL or upload an image
</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 the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        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);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>