3

新しい 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
});
4

1 に答える 1

1

WP 3.5 では、新しいメディア アップローダーを使用できます。あなたが何をしているのか知っていることを願って、私は簡単に説明します。アイデアは wp_enqueue_script を呼び出すことです (これは WP >= 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();
    });

});
于 2013-06-21T23:35:53.840 に答える