在WordPress 3.5上以自己的插件显示Media Uploader

时间:2013-01-07 作者:user1320276

我对新WordPress 3.5中的媒体上传程序没有什么问题。我创建了自己的插件,上传图片。我使用的代码是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
但它也不起作用。

3 个回复
SO网友:bueltge

Only Uploader

下面是一个示例代码,仅适用于后期编辑页面。如果您还将在其他页面上使用,请包括该函数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;
  });

});

Short explanation of Media Manager

<首先包括相关脚本,使用核心功能: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或我们使用所选图像id所做的选择。这与选择主题自定义标题图像时使用的脚本相同。

将按钮添加到媒体管理器:

<?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>
最后,您需要添加一些代码来处理我们将传递到数据更新链接url的图像id。

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

Sources and hints:

SO网友:Sumith Harshan

我放了一个answer 在stackoverflow中。com网站,这将是有帮助的。

我正在使用此方法将媒体上传器使用到我的自定义插件中。也许这会有帮助。

main theme file(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&amp;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 file(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" />
更多详细信息in my blog

更多信息http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

SO网友:Rutunj sheladiya

只需将此代码用于媒体上载程序。您在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>

结束