Để mở rộng: Tôi muốn sử dụng cùng một mã Modal / giao diện (như được sử dụng trong wp.media.Modal, wp.media.F FocusManager) để mở một phương thức của hộp thoại tùy chỉnh của riêng tôi, không phải Trình chỉnh sửa phương tiện. Trước đây, tôi đã sử dụng hộp dày cho loại điều này, nhưng wp.media.Modal dường như là cách của tương lai cho các phương thức - Chưa kể nó trông rất tuyệt.

Tôi đã chọc vào nguồn JS một chút và đã đưa ra một vài giải pháp khả thi:

1. "Mượn" mã media-view.js và sử dụng nó trong plugin của tôi.
2. "Mở rộng" wp.media.Modal (rốt cuộc đó là Chế độ xem xương sống).
3. Tạo một triển khai tùy chỉnh, jQueryUI, v.v.
4. Chỉ cần từ bỏ và sử dụng hộp dày.

Vay mượn có vẻ hơi nguy hiểm hơn so với sử dụng wp.media.Model.extend ({}), nhưng lãng phí. Tôi không phải là một fan hâm mộ lớn của các phương thức của jQueryUI, nhưng nó sẽ hoàn thành công việc. Đồng thời, tôi có thể thực hiện tùy chỉnh các phương thức (hoặc căn cứ vào một lib khác).

Cảm giác như tôi đang thiếu một điều hiển nhiên: Có ai khác đã gỡ bỏ điều này hay mã phương thức thư viện phương tiện mới "quá mới" để cho phép tái sử dụng?

Trả lời muộn & chỉnh sửa. Tuyên bố từ chối trách nhiệm: Dưới đây là không có mã sao chép & dán-togo.

Phác họa thô

Vì tôi chưa bao giờ thử lạm dụng phương thức truyền thông cho bất cứ điều gì khác, đây là một tổng quan ngắn, được phác họa bằng cách chia ra một phần trong dự án mà tôi hiện đang thực hiện. Nó không phải là một ví dụ sẵn sàng để đi, nhưng nó sẽ mang lại cho bạn đủ gần. Chỉ cần đọc các bình luận cẩn thận và thực hiện PHP sau trong các đối tượng của bạn.

PHP

Trong hàm tạo của chúng tôi, chúng tôi đăng ký tập lệnh của mình, thêm các hộp meta chứa thông tin và nút phương tiện, lọc trong các loại MIME bổ sung (ví dụ ZIP) và quan tâm đến việc lưu dữ liệu bổ sung:

public function __construct()
{
    add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );

    foreach( $this->post_types as $post_type )
        add_action( "add_meta_boxes_{$post_type}", array( $this, 'add_meta_box' ) );

    add_filter( 'media_view_settings', array( $this, 'filter_media_view_settings' ), 10, 2 );

    add_action( 'wp_insert_post_data', array( $this, 'wp_insert_post_data' ), 10, 2 );
}

Đảm bảo rằng bạn hủy bỏ nếu bạn không cần tập lệnh đó trên một trang cụ thể. Điều này giúp tiết kiệm bộ nhớ, yêu cầu thời gian và giúp giữ cho cài đặt của bạn sạch sẽ.

public function enqueue_scripts( $page )
{
    if (
        ! in_array( $page, array( 'post.php', 'post-new.php' ) )
        # Assuming that there's a class property array that holds post types we want to add to
        # OR ! in_array( get_current_screen()->post_type, array_keys( $this->post_types ) )
    )
        return;

    wp_enqueue_media();
    wp_enqueue_script(
        'wpse_media_modal',
        plugins_url( 'assets/js/media-modal.js', dirname( __FILE__ ) ),
        array(
            # 'jquery',
            'media-views'
        ),
        null,
        true
    );
    wp_localize_script(
        'wpse_media_modal',
        'wpse_obj',
        $this->get_media_props()
    );
}

Sau đó, chúng tôi thêm hộp meta. Bên trong hàm, chúng ta có thể dựa vào thuộc tính $postđối tượng post_type, cũng sẽ được đặt cho các bài đăng mới. Khi chúng ta đã đăng ký các cuộc gọi lại trong hàm tạo cho các hook theo ngữ cảnh phù hợp, chúng ta có thể chỉ cần lấy bất kỳ loại bài đăng nào đi kèm.

public function add_meta_box( $post )
{
    add_meta_box(
        'wprd_upload',
        __( 'Upload', 'our_textdomain' ),
        array( $this, 'render_content' ),
        $post->post_type,
        'advanced',
        'default',
        array()
    );
}

Các loại MIME bổ sung

Chỉ cần ném vào một mảng ghi đè hoặc thêm vào các loại MIME mặc định của Phương thức truyền thông. Bạn cũng có thể thêm hoặc ghi đè các cài đặt khác. Chỉ var_dump( $settings );để xem những gì gọi lại cung cấp. Ngoài ra, hãy đảm bảo chúng tôi không chặn loại bài sai.

public function filter_media_view_settings( $settings, $post )
{
    if ( ! in_array( $post->post_type, array_keys( $this->post_types ) ) )
        return $settings;

    $settings['mimeTypes'] += array( 'application/zip' );

    return $settings;
}

Kết xuất nội dung

public function render_content()
{
    $props = array(
        'modalTitle'      => __( 'Select ZIP Archives', 'our_textdomain' ),

        // The following data is what we will access later
        // SomeIDfromLocalizedScriptOBJ
        'buttonID'        => 'open-media-lib',
        'buttonClass'     => 'open-media-button',
        'buttonText'      => __( 'Add ZIP', 'our_textdomain' ),
        'buttonDataText'  => __( 'Select', 'our_textdomain' ),
        'buttonDataTitle' => __( 'Select Whatever', 'our_textdomain' ),

        'mimeTypes'       => array(
            $zip => __( 'ZIP Archive', 'our_textdomain' ),
        ),
    );

    wp_nonce_field( plugin_basename( __FILE__ ), $this->nonce_name );
    ?>
    <input type="button"
           class="button <?php echo $props['buttonClass']; ?>"
           id="<?php echo $props['buttonID']; ?>"
           value="<?php echo $props['buttonText']; ?>"
           data-title="<?php echo $props['buttonDataTitle']; ?>"
           data-button-text="<?php echo $props['buttonDataText']; ?>" />
}

Lưu dữ liệu

Cuối cùng, chúng tôi đảm bảo dữ liệu của chúng tôi được lưu đúng cách và sẽ được kiểm tra. Sử dụng tất cả các esc_*()chức năng, typecasting, nonces và những gì không.

public function wp_insert_post_data( $data, $post_array )
{
    if (
        ! in_array( $post_array['post_type'], array_keys( $this->post_types ) )
        # OR ( defined( 'DOING_AUTOSAVE' ) AND DOING_AUTOSAVE )
        OR ! isset( $_POST[ $this->nonce_name ] )
        OR ! wp_verify_nonce( $_POST[ $this->nonce_name ], plugin_basename( __FILE__ ) )
    )
        return $data;

    $post_array['zip'] = array_map( 'array_filter', $post_array['zip'] );

    $id = $post_array['ID'];
    update_post_meta(
        $id,
        'zip',
        $post_array['zip'],
        get_post_meta( $id, 'zip' )
    );

    return $data;
}

Lưu ý cuối cùng, trước khi đi qua ví dụ về JS: Mã được tách ra khỏi một dự án hiện tại. Vì vậy, nó sẽ - như đã đề cập - không hoạt động theo mặc định! Nó chỉ là một hướng dẫn và không có gì khác.

Javascript

Các javascript là khá thẳng về phía trước. Không phải. Nhưng như bạn có thể thấy, tôi đang tiêm cả jQuery làm đối tượng tập lệnh được bản địa hóa tùy chỉnh vào hàm. Từ đó trở đi, bạn sẽ phải thêm bất cứ logic nào bạn có thể cần. Môi trường xung quanh cơ bản cho các trạng thái và cuộc gọi lại khác nhau được cung cấp và console.log()s có mặt.

var ds = ds || {};

( function( $, obj ) {
    var media;

    ds.media = media = {};

    _.extend( media, {
        view: {},
        controller: {}
    } );

    media.buttonID    = '#' + obj.buttonID,

    _.extend( media, {
        frame: function() {
            if ( this._frame )
                return this._frame;

            var states = [
                new wp.media.controller.Library(),
                new wp.media.controller.Library( {
                    id:                 'image',
                    title:              'Images',
                    priority:           20,
                    searchable:         false,
                    library:            wp.media.query( { type: 'image' } ),
                    multiple:           true
                } ),
                /*new wp.media.controller.Library( {
                    id:                 'video',
                    title:              'Video',
                    priority:           40,
                    library:            wp.media.query( { type: 'video' } ),
                    multiple:           false,
                    contentUserSetting: false // Show the Upload Files tab.
                } ),*/
                new wp.media.controller.Library( {
                    id:                 obj.SomeIDfromLocalizedScriptOBJ,
                    title:              obj.SomeTitlefromLocalizedScriptOBJ,
                    priority:           30,
                    searchable:         true,
                    // filterable:         'uploaded',
                    library:            wp.media.query( { type: obj.SomeMIMETypesfromLocalizedScriptOBJ } ),
                    multiple:           true
                    // contentUserSetting: true
                } ),
            ];

            this._frame = wp.media( {
                // className: 'media-frame no-sidebar',
                states: states
                // frame: 'post'
            } );

            this._frame.on( 'open', this.open );

            this._frame.on( 'ready', this.ready );

            this._frame.on( 'close', this.close );

            this._frame.on( 'menu:render:default', this.menuRender );

            this._frame.state( 'library' ).on( 'select', this.select );
            this._frame.state( 'image' ).on( 'select', this.select );
            this._frame.state( obj.ZIPTabID ).on( 'select', this.select );

            return this._frame;
        },

        open: function() {
            console.log( 'Frame opened' );
        },

        ready: function() {
            console.log( 'Frame ready' );
        },

        close: function() {
            console.log( 'Frame closed' );
        },

        menuRender: function( view ) {
            /* view.unset( 'library-separator' );
            view.unset( 'embed' );
            view.unset( 'gallery' ); */
        },

        select: function() {
            var settings = wp.media.view.settings,
                selection = this.get( 'selection' );

            selection.map( media.showAttachmentDetails );
        },

        showAttachmentDetails: function( attachment ) {
            // This function normally is used to display attachments
            // Handle removal of rows
            media.removeAttachmentRow( /* some var */ );
        },

        removeAttachmentRow: function( row ) {
            // Remove stuff callback
        },

        init: function() {
            // Open media frame
            $( media.buttonID ).on( 'click.media_frame_open', function( e ) {
                e.preventDefault();

                media.frame().open();
            } );
        }
    } );

    $( media.init );
} )( jQuery, wpse_obj );

Hướng dẫn

Dominik Schilling - tác giả của trình quản lý phương tiện WP 3.5 - đã viết một bộ các bản demo cho các phương thức truyền thông. Bạn có thể xem chúng trên GitHub .