미디어 이외의 대화 상자에서 wp.media.editor Modal을 재사용 할 수 있습니까?

30

확장하려면 : wp.media.Modal, wp.media.FocusManager에서 사용되는 것과 동일한 모달 코드 / 모양을 사용하여 미디어 편집기가 아닌 내 사용자 정의 대화 상자의 모달을 열고 싶습니다. 과거에는 이런 종류의 작업에 thickbox를 사용했지만 wp.media.Modal은 모달의 미래의 길인 것처럼 보입니다.

JS 소스에서 약간 찔 렀고 몇 가지 가능한 솔루션을 찾았습니다.

  1. 코드 media-views.js를 "차용"하고 플러그인에서 사용하십시오.
  2. "확장"wp.media.Modal (결국 백본보기입니다).
  3. 사용자 정의 구현, jQueryUI 등을 작성하십시오.
  4. 그냥 포기하고 thickbox를 사용하십시오.

차용은 wp.media.Model.extend ({})를 사용하는 것보다 약간 덜 위험 해 보이지만 낭비입니다. 나는 jQueryUI의 모달을 좋아하지 않지만 작업을 완료합니다. 동시에 모달의 사용자 정의 구현을 수행하거나 다른 lib를 기반으로 할 수 있습니다.

내가 명백한 것을 놓친 것 같은 느낌 : 다른 사람이 이것을 뽑았거나 새로운 미디어 라이브러리 모달 코드가 재사용하기에 "너무 새로운 것"입니까?

plugin-development  wp-admin  javascript 
— 제르
소스
3
시도해 보지 못한 것 같습니다. # 2를 추천합니다. 아마도 가장 깨끗하고 가장 도전적인 / 재미 있으며 Backbone을 잘 아는 것처럼 들립니다.
— Montrealist
2
찾은 결과를 공유하십시오!
— paul
에서 플러그인 / 튜토리얼 재미있는 github.com/ericandrewlewis/wp-media-javascript-guide - WP 미디어에 전원을 공급 자바 스크립트에 대한 대화 형 문서 .
— jgraup

답변:

12

늦은 답변 및 수정. 면책 조항 : 다음은 복사 및 붙여 넣기 코드 가 아닙니다 .

거친 스케치

미디어 모달을 다른 용도로 잘못 사용하려고 시도하지 않았으므로 현재 진행중인 프로젝트에서 부품을 분리하여 간략하게 설명합니다. 그건 하지 예를 갈 준비하지만, 그것은 당신에게 충분히 가까이를 데려 와야한다. 주석을 주의 깊게 읽고 객체에 다음 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속성 에 의존 할 수 있으며 ,이 속성은 새 게시물에도 설정됩니다. 생성자에서 콜백을 적절한 컨텍스트 후크에 등록 했으므로 포스트 유형이 오는 모든 것을 간단히 취할 수 있습니다.

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 유형을 재정의하거나 추가하는 배열을 단순히 던져 넣습니다. 다른 설정을 추가하거나 무시할 수도 있습니다. 그냥 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 );

튜토리얼

WP 3.5 미디어 관리자의 저자 인 Dominik Schilling은 미디어 모달에 대한 데모 세트를 작성했습니다. 당신은 할 수 GitHub의에서 볼 .

— 황제
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.