메타 박스에서 Wordpress 3.5 미디어 업 로더를 사용하십니까?

이것이 가능합니까?

새 업 로더의 작동 방식이 마음에 듭니다. 다른 방법과 마찬가지로 jQuery 호출과 관련이 있다고 생각합니다.

편집하다

이것은 현재 사용중인 코드입니다

jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
    imageField = $(this).prev('input');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
});
window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(imageField).val(imgurl);
    tb_remove();
};
$('.clear_field').click(function() {
    var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
    jQuery(this).parent().siblings('.custom_upload_image').val('');
    return false;
});
});

시작하기 위해 현재 알고있는 한 기본 기능과 재정의가 더 좋습니다. 더 나은 솔루션이있을 수 있지만 아직 3.5 일이 이틀 밖에 없었습니다.

// open modal - bind this to your button
    if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more
    };

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor; 

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
   }

이것은 완전한 작업 답변이 아닙니다. 직접 입력 필드를 정의하고 추적해야합니다. 이렇게하면 시작할 수 있습니다. 더 구체적인 질문이 있으면 물어보십시오.

스크립트가 완료되면 원래 기능을 다시 할당해야합니다.

_{의견에서 뽑아 :}

라이트 박스 닫기 이벤트를 어떻게들을 수 있습니까?

// add listener: 
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }

다음은 테마 옵션에서 WP 3.5 미디어 업 로더를 사용하는 방법에 대한 작은 튜토리얼 입니다. 그것이 내가 생각 해낸 것이며 나에게 완벽하게 작동합니다. 더 나은 해결책을 찾으면 알려주십시오.

테마 옵션에서 코드를 구현 한 방법은 다음과 같습니다.

jQuery(document).ready(function($){
  $('.stag-metabox-table .button').click(function(e){
  var send_attachment_bkp = wp.media.editor.send.attachment;
  var button = $(this);
  var id = button.attr('id').replace('_button', '');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

최신 정보

이 코드는 사후 편집 페이지에서만 작동합니다. 테마 옵션 페이지에서 작동하게하려면 추가해야합니다.wp_enqueue_media();

나는 아직 준비가되지 않았지만 작동하는 거의 동일하게하고 있습니다.

PHP에서 :

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id

자바 스크립트 :

jQuery('#default_featured_image_button').click(function () {
    var formfield = jQuery('#default_featured_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    console.log(html);
    console.log(imgurl);
    // set the url as the value
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

이렇게하면 이미지 URL (모든 크기의)을 <input>요소 에 업로드하고 보낼 수 있습니다 .
설정 으로이 작업을 수행하려고하는데 작동합니다. 지금 필요한 것만 첨부 파일 ID를 첨부 파일로 보내는 신뢰할 수있는 방법입니다.<input>

@janw가 이것을 완벽하게 가지고 있다고 생각하지만 한 가지 일을 할 수 없었습니다. Jan은 다음을 사용하여 미디어 라이브러리 버튼을 삽입합니다.

do_action( 'media_buttons', 'default_featured_image' );

다음을 사용하여 기본 동작을 선점합니다.

jQuery('#default_featured_image_button').click(function () {...

내가 겪은 문제는 이러한 방식으로 미디어 버튼을 삽입해도 링크에 "default_featured_image_button"의 ID가 할당되지 않는다는 것입니다. 실제로 삽입 된 링크에 ID를 추가하지 않습니다. 이것이 제가 작동시키기 위해 한 일입니다.

입력 필드 바로 다음에 메타 박스 콜백 함수에이 줄을 추가했습니다.

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

그런 다음 다음을 사용하여 사용자 정의 jquery 파일과 thickbox css 파일을 functions.php 파일에 넣었습니다.

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );
}

마지막으로 image-set.js 파일에는 다음이 포함되었습니다.

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

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {

        $('html').addClass('Image');

        formfield = $(this).prev('input').attr('name');  
        formfield_id = $(this).prev('input').attr('id'); 

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;
    });

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $('html').removeClass('Image');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});

jQuery를 호출하는 링크 바로 앞에있는 입력 필드의 이름과 ID를 저장하기 위해 변수를 사용했습니다. 이런 식으로이 코드는 같은 페이지에서 반복적으로 사용될 수 있습니다. 내가 한 것처럼 클래스를 모든 버튼에 할당하거나 jquery의 버튼에 개별 ID를 사용해야합니다. Jan의 답변이 나에게 도움이 되었기를 바랍니다.

나는 이것이 오래된 게시물이라는 것을 알고 있지만 내 결과를 공유하고 싶습니다.

미디어 편집기를 열려면이 함수를 호출합니다

wp.media.editor.open();

미디어 편집기는 기본적으로 tinyMCE 편집기 ( window.tinymce)를 확인한 다음 Quicktags ( window.QTags)를 확인하여 내용을 전달합니다.

내용을 얻는 접근 방식을 위해 메서드 window.QTags가있는 사용자 정의 객체를 할당 했습니다 insertContent().

var newObject = {
  insertContent: function(html){
    // to extract the image source
    $(html).find('img').attr('src');
  }
}

// assign the newObject to window.QTags property
window.QTags = newObject;

참조 : phpxref