หากต้องการขยาย: ฉันต้องการใช้โค้ด / ลักษณะที่ปรากฏของ Modal เดียวกัน (ที่ใช้ใน wp.media.Modal, wp.media.FocusManager) เพื่อเปิด modal ของกล่องโต้ตอบที่กำหนดเองของฉันไม่ใช่ Media Editor ในอดีตฉันเคยใช้ thickbox สำหรับสิ่งนี้ แต่ wp.media.Modal ดูเหมือนจะเป็นวิธีในอนาคตสำหรับ modals - ไม่พูดถึงมันดูเท่ห์

ฉันแหย่ที่แหล่ง JS เล็กน้อยและมาแก้ปัญหาที่เป็นไปได้สองสาม:

1. "ยืม" รหัส media-views.js และใช้ในปลั๊กอินของฉัน
2. "ขยาย" wp.media.Modal (เป็นมุมมอง Backbone เลย)
3. สร้างการใช้งานที่กำหนดเอง jQueryUI ฯลฯ
4. เพียงแค่ยอมแพ้และใช้ thickbox

การยืมดูเหมือนว่าจะอันตรายน้อยกว่าการใช้ wp.media.Model.extend ({}) แต่สิ้นเปลือง ฉันไม่ใช่แฟนตัวยงของรูปแบบของ jQueryUI แต่มันจะทำให้งานสำเร็จ ในเวลาเดียวกันฉันสามารถปรับใช้ modals (หรือทำให้มันแตกต่างจาก lib อื่น)

รู้สึกเหมือนขาดอะไรบางอย่างที่ชัดเจน: มีใครดึงสิ่งนี้ออกหรือเป็นรหัสโมดอลไลบรารี่ใหม่ที่ "ใหม่เกินไป" เพื่ออนุญาตให้นำมาใช้ซ้ำได้หรือไม่?

ตอบช้า & แก้ไข ข้อจำกัดความรับผิดชอบ: ต่อไปนี้ไม่มีรหัสคัดลอกและวาง

ร่างหยาบ

เนื่องจากฉันไม่เคยลองใช้คำกริยาสื่อในทางที่ผิดสำหรับสิ่งอื่น ๆ นี่เป็นภาพรวมสั้น ๆ ซึ่งร่างโดยแยกส่วนหนึ่งออกจากโครงการที่ฉันกำลังทำอยู่ มันไม่พร้อมที่จะไปตัวอย่าง แต่ควรทำให้คุณใกล้พอ เพียงอ่านความคิดเห็นอย่างระมัดระวังและใช้ PHP ต่อไปนี้ในวัตถุของคุณ

PHP

ในตัวสร้างของเราเราลงทะเบียนสคริปต์ของเราเพิ่มเมตาบ็อกซ์ที่เก็บข้อมูลและปุ่มสื่อกรองในประเภท MIME เพิ่มเติม (เช่น ZIP) และใส่ใจในการบันทึกข้อมูลเพิ่มเติม:

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

ตรวจสอบให้แน่ใจว่าคุณยกเลิกหากคุณไม่ต้องการสคริปต์นั้นในหน้าใดหน้าหนึ่ง สิ่งนี้จะช่วยประหยัดหน่วยความจำร้องขอเวลาและช่วยให้การติดตั้งของคุณสะอาด

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

จากนั้นเราเพิ่มเมตาบ็อกซ์ ภายในฟังก์ชั่นเราสามารถพึ่งพาคุณสมบัติของ$postวัตถุpost_typeซึ่งจะถูกตั้งค่าสำหรับการโพสต์ใหม่เช่นกัน เมื่อเราลงทะเบียนการเรียกกลับในตัวสร้างไปที่ hooks บริบทที่เหมาะสมเราก็สามารถนำสิ่งที่โพสต์มาได้

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

ประเภท MIME เพิ่มเติม

เพียงแค่โยนอาร์เรย์ที่แทนที่หรือเพิ่มลงในชนิด MIME เริ่มต้นของ Media Modal คุณสามารถเพิ่มหรือแทนที่การตั้งค่าอื่น ๆ ได้เช่นกัน เพียงvar_dump( $settings );เพื่อดูสิ่งที่โทรกลับให้ ตรวจสอบให้แน่ใจด้วยว่าเราจะไม่ดักจับการโพสต์ผิดประเภท

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

แสดงเนื้อหา

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']; ?>" />
}

บันทึกข้อมูล

ในที่สุดเราก็ตรวจสอบให้แน่ใจว่าข้อมูลของเราได้รับการบันทึกอย่างถูกต้องและจะถูกตรวจสอบ ใช้esc_*()ฟังก์ชั่นทั้งหมด, typecasting, nonces และอะไรที่ไม่

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

หมายเหตุสุดท้ายก่อนที่จะมุ่งหน้าไปที่ตัวอย่าง JS: รหัสแตกออกจากโครงการปัจจุบัน ดังนั้นมันจะ - ตามที่กล่าวไว้แล้ว - ไม่ทำงานตามค่าเริ่มต้น! มันเป็นเพียงแนวทางและไม่มีอะไรอื่น

จาวาสคริ

จาวาสคริปต์นั้นค่อนข้างตรงไปตรงมา ไม่. แต่อย่างที่คุณเห็นฉันกำลังฉีดทั้ง jQuery เป็นวัตถุสคริปต์ที่แปลเป็นภาษาท้องถิ่นที่กำหนดเองในฟังก์ชั่น จากนั้นคุณจะต้องเพิ่มตรรกะใด ๆ ก็ตามที่คุณอาจต้องการ สภาพแวดล้อมพื้นฐานสำหรับรัฐและการเรียกกลับที่แตกต่างกันมีอยู่และconsole.log()มีอยู่

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

สอน

Dominik Schilling ซึ่งเป็นผู้เขียนตัวจัดการมีเดีย WP 3.5 ได้เขียนชุดสาธิตสำหรับโมเดอเรเตอร์ของสื่อ คุณสามารถดูพวกเขาบน GitHub