Wordpress 3.5自定义媒体上传为您的主题选项

Question

最近发布了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).

Answer 1

你以一种无意的方式去做.你的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();
});

Answer 2

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

Answer 3

我对此代码进行了一些修改,使其可以同时用于多个字段:

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

});