Wordpress 3.5'te Medya Eklentisini Kendi Eklentisinde Görüntüle

Yeni WordPress 3.5'te Medya Yükleyici ile çok az sorunum var. Resmi yükleyen kendi eklentisini oluşturdum. Bu kod JS kullanıyorum:

<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>

Kod iyi çalışıyor, ancak maalesef formlar eksik görünüyor. Herhangi bir resim seçtiğimde bana sağ tarafta 'Ek Ekran Ayarları' gösterilmiyor. Nedenini bilmiyorum. Medyaya seçenekler eklemeyi deniyorum:

displaySettings: true,
displayUserSettings: true

Ama aynı zamanda işe yaramıyor.

Sadece Yükleyici

örnek kodun altında, yalnızca yayın düzenleme sayfasında çalışır. Başka bir sayfada da kullanacaksanız, işlevi dahil ederseniz wp_enqueue_media(), bir sonraki başlığa bakın.

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'ın kısa açıklaması

1. İlk önce ilgili komut dosyalarını ekleyin, temel işlevi kullanın: wp_enqueue_media(); İşlev ilgili tüm ayarları yapar, menü metnini yerelleştirir ve tüm uygun javascript dosyalarına yükler.

   Yoluyla özel komut dosyası ekleyebilirsiniz 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();

   Özel üstbilgi için varsayılan bir komut dosyası da ekleyin: wp_enqueue_script( 'custom-header' ); Bu, bir görüntü seçim çerçevesi oluşturur ve bunu bir arabirim öğesine, örneğin bir düğmeye veya bağlantıya bağlar. Daha sonra seçilen resim kimliğiyle bir URL'yi veya seçimimizi çağırır. Bu, tema özel başlık resimleri seçilirken kullanılan komut dosyası ile aynıdır.

2. Düğmeyi medya yöneticisine ekleyin:

   <?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. Eylem İşlevini tanımla son olarak, data-update-link url'sine ileteceğimiz resim kimliğini işlemek için bazı kodlar eklemeniz gerekir.

   // 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 );
   }

Kaynaklar ve ipuçları:

• 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
• Filtre ve İşlem Kancaları: http://core.trac.wordpress.org/ticket/22186#comment:46

Stackoverflow.com sitesine de bir cevap koydum ve bu yardımcı olur.

Medya eklentisini özel eklentime kullanmak için bu yöntemi kullanıyorum. Bu yardımcı olabilir.

içinde ana teması dosyasında (index.php) bunlar ekleyin.

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');

Gelen admin_script.js dosyası,

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+"'/>");
}

yönetici dosyası (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" />

Blogumda daha fazla ayrıntı

Daha fazla bilgi http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Medya yükleyicisi için bu kodu kullanmanız yeterlidir. jquery yanıtında bağlantı var.

<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>