WordPress - wp.media를 사용하여 메타박스에 갤러리 오버레이 추가

WordPress - wp.media를 사용하여 메타박스에 갤러리 오버레이 추가

워드프레스에 첨부파일 ID의 쉼표 문자열을 저장하기 위해 메타박스를 사용하려고 합니다.

메타박스는 정상적으로 작동하고 있지만, 저는 그것을 얻기 위해 노력하고 있습니다.wp.media오버레이는 사용자가 여러 이미지를 선택하고 드래그 앤 드롭 순서를 지정한 다음 "선택" 단추를 클릭하면 ID 문자열을 메타박스에 넣을 수 있는 방식으로 열립니다.

플러그인을 제안하지 마십시오.저는 그것들이 많이 있다는 것을 알지만, 저는 이것을 테마로 만들고 있고 최소한의 코드를 원합니다.

제가 가지고 있는 JS & PHP는 다음과 같습니다.

jQuery('.custom-post-gallery').on( 'click', function(e){
    e.preventDefault();

    var image_frame;
    if(image_frame){
       image_frame.open();
    }

    // Define image_frame as wp.media object
    image_frame = wp.media({
        title: 'Select Gallery Images',
        library : {
            type : 'image'
        },
        multiple: true
    });

    image_frame.states.add([
        new wp.media.controller.Library({
            id:         'post-gallery',
            title:      'Select Images for the Post Gallery',
            priority:   20,
            toolbar:    'main-gallery',
            filterable: 'uploaded',
            library:    wp.media.query( image_frame.options.library ),
            multiple:   image_frame.options.multiple ? 'reset' : false,
            editable:   true,
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true
        });
    ]);

    image_frame.open();
});

<?php
    $meta_key = 'custom_post_gallery';
    $image_ids = get_post_meta( $post->ID, $meta_key, true );
?>
  
<input class="custom-post-gallery" name="<?php echo $meta_key; ?>" type="text" value="<?php echo $image_ids; ?>"/>

이 오버레이는 제어 키를 잡고 있는 경우 하나 또는 여러 개의 이미지를 선택할 수 있는 UI만 보여주지만 끌어서 놓기 순서 등은 표시되지 않습니다.어떻게든 "갤러리" 모드로 열 수 있습니까?그리고 현재 선택된 이미지에 사용할 ID를 제공합니까?

감사합니다!

만약 내가 맞다면, 클릭할 때 미디어 창을 여는 텍스트 필드가 있고 선택 버튼을 클릭할 때 선택한 이미지의 ID를 필드 값(ID는 쉼표로 구분됨)에 삽입하고 싶을 것입니다.그렇다면, 이것이 제가 수정한 것입니다.

수정:

세미콜론으로 인한 오류(세미콜론을 가질 수 없는 배열 내부에 있음)

    displayUserSettings: true
}); // --> here

수정됨:

image_frame 변수를 이 범위 밖에서 설정하고 다시 열기 작업 후 반환해야 합니다.

var image_frame; // --> outside the scope
if(image_frame){
   image_frame.open();
   // --> add return
}

추가 사항:

JS를 랩하고 $ 기호로 jQuery를 스코프에 주입하면 jQuery 대신 $ 기호를 사용하여 다른 JS 스크립트와의 충돌을 방지할 수 있습니다.

(function($){
...
})(jQuery);

텍스트 필드 개체를 $that 변수로 설정하여 더 깊은 범위 내에서 사용합니다.

var $that = $(this);

선택 작업을 추가하고 선택한 이미지 ID를 쉼표로 구분하여 필드 값에 삽입합니다.

       image_frame.on( 'select', function() {

            var ids = '', attachments_arr = [];

            // Get media attachment details from the frame state
            attachments_arr = image_frame.state().get('selection').toJSON();
            $(attachments_arr).each(function(e){
                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';
                ids += $(this)[0].id + sep;
            });
            $that.val(ids);

        });

모두 함께:

수정된 JS 부분만:

(function($){

    var image_frame;

    $('.custom-post-gallery').on( 'click', function(e){

        e.preventDefault();

        // If the media frame already exists, reopen it.
        if (image_frame){
           image_frame.open();
           return;
        }

        var $that = $(this);

        // Define image_frame as wp.media object
        image_frame = wp.media({
            title: 'Select Gallery Images',
            library : {
                type : 'image'
            },
            multiple: true
        });

        image_frame.states.add([
            new wp.media.controller.Library({
                id:         'post-gallery',
                title:      'Select Images for the Post Gallery',
                priority:   20,
                toolbar:    'main-gallery',
                filterable: 'uploaded',
                library:    wp.media.query( image_frame.options.library ),
                multiple:   image_frame.options.multiple ? 'reset' : false,
                editable:   true,
                allowLocalEdits: true,
                displaySettings: true,
                displayUserSettings: true
            })
        ]);

        image_frame.open();

        image_frame.on( 'select', function() {

            var ids = '', attachments_arr = [];

            // Get media attachment details from the frame state
            attachments_arr = image_frame.state().get('selection').toJSON();
            $(attachments_arr).each(function(e){
                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';
                ids += $(this)[0].id + sep;
            });
            $that.val(ids);

        });

    });   

})(jQuery);

저는 이것이 효과가 있습니다, 문제가 있으면 말씀해 주세요.

언급URL : https://stackoverflow.com/questions/48818952/wordpress-add-gallery-overlay-to-a-metabox-using-wp-media