WordPress 3.5自定义媒体上传作为主题选项

WordPress 3.5已于近期发布，我通过thickbox使用了WordPress Media Upload系统，并window.send_to_editor在WordPress主题中使用了某些选项（背景，徽标等...）。

但是，您知道WordPress集成了新的媒体管理器，所以我想使用此新功能将图像/文件上传为自定义字段。因此，我花了整个上午寻找找到理想结果的方法。

我发现此解决方案对您中的某些人可能有用。感谢您给我有关代码或您所想到的任何改进的反馈！

HTML示例：

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery代码：

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

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

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

如果要查看attachment变量中包含的所有设置，可以执行console.log(attachment)或alert(attachment)。

wp_enqueue_media如果您不在帖子编辑页面上，请不要忘记使用（3.5中的新功能）

要使用旧的媒体上传框，您可以执行以下操作：

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

您以意想不到的方式进行操作。您的javascript代码应该看起来像这样：

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});

我对代码进行了一些修改，以使其一次可用于多个字段：

HTML：

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery的：

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

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

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

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});

如果编辑器关闭，我什么也没有触发自定义功能。我用这个：

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

或更好：

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}

我没有太多机会尝试这个，但是对于那些希望利用gallery元素的人来说，这段代码应该可以帮助您。

这只是一个起点-它仅提供一个用逗号分隔的图像ID列表，但这足以使它变得富有创意。

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

这将以逗号分隔的图像ID列表（在编辑器中设置顺序）填充输入字段（使用新的拖放功能）。

该函数希望将短代码发送回去放置在主编辑器中，但是我们不想这样做，因此我们创建了一个新对象，该对象返回一个空白字符串以进行插入。

还要注意，这不能像上面描述的那样处理插入单个图像-它只会将其放入帖子编辑器中。因此，请尝试合并两个侦听器，或删除相应的选项卡。

编辑

花了一些时间查看核心之后，我认为使用此处介绍的技术实际上可以更轻松地完成整个过程，但是如您所读，我还没有弄清楚如何在重新打开图像时预先选择图像。媒体经理。