Question

我无法理解如何在我的主题选项页面中实现新的WP媒体上传器。有没有关于如何做到这一点或一些解释的文件？我已经看过几个如何做到这一点的样本，但没有一个对他们的代码有任何好的解释。是否有选项列表如何自定义媒体上传框架？我的意思是，如果你能做这样的事情会不会很好（参见//创建媒体框架。）：

// Uploading files
var file_frame;
jQuery('.upload_image_button').live('click', function() {
    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: 'My frame title',
        button: {
            text: 'My button text',
        },
        id: 'logo-frame',
        multiple: false,

        editing_sidebar: false, // Just added for example
        default_tab: 'upload', // Just added for example
        tabs: 'upload, library', // Just added for example
        returned_image_size: 'thumbnail' // Just added for example


    });

    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
        var attachment;
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get('selection').first().toJSON();

        // Do something with attachment.id and/or attachment.url here

    });

    // Finally, open the modal
    file_frame.open();
    return false
});

Answer 1

对于WP 3.5，您可以使用新的媒体上传器。我会简短地希望你知道你在做什么。想法是调用wp_enqueue_script（这仅适用于WP＆gt; = 3.5 btw）。调用脚本后，您可以操作javascript对象。你必须做一些检查才能看到你的全套选项。

首先，您必须将脚本排入队列：

add_action( 'wp_enqueue_scripts', 'front_upload_enqueues' );
function front_upload_enqueues() {
    wp_register_script('uploads', 
        // path to upload script
        get_template_directory_uri().'/lib/js/media-upload.js' 
    );
    wp_enqueue_script('uploads');
    if ( function_exists('wp_enqueue_media') ) {
        // this enqueues all the media upload stuff
        wp_enqueue_media();
    }
}

然后你必须添加javascript（在我的情况下为jQuery）：

jQuery(document).ready(function($){
    var frame;
    /*
     * Upload button click event, which builds the choose-from-library frame.
     *
     */
    $('.form-table').on('click', '.member-upload-field .btn-upload', function( event ) {
        var $el = $(this);
        event.preventDefault();

        // Create the media frame.
        frame = wp.media.frames.customHeader = wp.media({
            title: $el.data('choose'),
            library: { // remove these to show all
                type: 'image', // specific mime
                author: userSettings.uid // specific user-posted attachment
            },
            button: {
                text: $el.data('update'), // button text
                close: true // whether click closes 
            }
        });

        // When an image is selected, run a callback.
        frame.on( 'select', function() {
            // Grab the selected attachment.
            var attachment = frame.state().get('selection').first(),
                link = $el.data('updateLink');

            $el.prev('input').val( attachment.attributes.id );
            $el.parent().prev().find('img').attr('src', attachment.attributes.url );
        });

        frame.open();
    });

});

3.5 Wordpress媒体上传手册实现

1 个答案: