WordPress 3.5 사용자 지정 미디어 업로드(테마 옵션)

WordPress 3.5 사용자 지정 미디어 업로드(테마 옵션)

최근 WordPress 3.5가 출시되었고, 저는 Thickbox를 통해 WordPress Media Upload 시스템을 사용했습니다.window.send_to_editorWordPress 테마(배경, 로고 등)의 일부 옵션에 대해 설명합니다.

그러나 WordPress에 새로운 Media Manager가 통합되었다는 것을 알고 계시겠지만, 저는 이 새로운 기능을 사용하여 이미지/파일을 커스텀 필드로 업로드하고 싶었습니다.그래서 나는 원하는 결과를 얻을 수 있는 방법을 찾기 위해 아침을 보냈다.

저는 이 솔루션을 찾았습니다.여러분들에게 유용할 수 있습니다.코드나 개선사항에 대한 피드백을 주셔서 감사합니다!

HTML 샘플:

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery 코드:

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) {

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

에 포함된 모든 설정을 표시하는 경우attachment할 수 있는 변수console.log(attachment)또는alert(attachment).

당신이 의도하지 않은 방식으로 일을 진행했군요.Javascript 코드는 다음과 같습니다.

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});

사용하는 것을 잊지 마세요.wp_enqueue_media(3.5의 새로운 기능) 투고 편집 페이지가 아닌 경우

오래된 미디어 업로드 상자를 사용하려면 다음 작업을 수행합니다.

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

한 번에 여러 필드에 사용할 수 있도록 이 코드를 조금 더 수정했습니다.

HTML:

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

j쿼리:

jQuery(document).ready(function($){

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) {

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});

에디터가 닫히면 커스텀 기능을 실행할 수 있는 것을 찾을 수 없습니다.나는 이것을 사용한다.

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

또는 그 이상:

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}

이 코드를 사용해 본 적은 별로 없지만 갤러리 요소를 활용하고자 하는 사용자라면 이 코드를 사용해 보시기 바랍니다.

이것은 단지 시작점일 뿐이며, 쉼표로 구분된 이미지 ID 목록만 제공하지만, 이 정도면 창의력을 발휘하기에 충분합니다.

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

그러면 입력 필드에 이미지 ID가 콤마로 구분된 목록(새로운 끌어서 놓기 기능 사용)으로 설정됩니다.

이 함수는 메인 에디터에 배치하기 위해 쇼트 코드가 반환될 것으로 예상하지만, 우리는 이것을 원하지 않기 때문에 삽입을 위해 빈 문자열을 반환하는 새 개체를 만듭니다.

또한 위에서 설명한 것처럼 하나의 이미지를 삽입할 수 없습니다.포스트 에디터에 삽입하기만 하면 됩니다.따라서 두 청취자를 결합하거나 적절한 탭을 제거하십시오.

편집

코어를 살펴본 결과, 이 모든 과정은 여기서 설명하는 기술을 사용하면 실제로 더 쉽게 할 수 있다고 생각합니다만, 읽어보실 것처럼 미디어 매니저를 다시 열 때 이미지를 미리 선택하는 방법은 아직 모릅니다.

언급URL : https://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options