Sử dụng Wordpress 3.5 Media Uploader trong hộp meta?

Đây có phải là có thể làm gì?

Tôi thích cách trình tải lên mới hoạt động. Tôi đoán nó phải thực hiện với một cuộc gọi jQuery như cách khác đã làm.

BIÊN TẬP

Đây là mã tôi hiện đang sử dụng

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

Để giúp bạn bắt đầu, các chức năng cơ bản và ghi đè theo như tôi biết hiện tại. Có thể có các giải pháp tốt hơn, nhưng tôi chỉ có hai ngày với 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.
   }

Đây không phải là câu trả lời làm việc đầy đủ. Bạn phải tự xác định và theo dõi các trường đầu vào của mình, v.v. Điều này sẽ giúp bạn bắt đầu. Nếu bạn có câu hỏi cụ thể hơn, chỉ cần hỏi.

Và đảm bảo gán lại các chức năng ban đầu khi tập lệnh của bạn được thực hiện.

_{Lấy từ ý kiến:}

Làm thế nào tôi có thể nghe sự kiện gần gũi của hộp đèn?

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

Dưới đây là một hướng dẫn nhỏ về cách sử dụng trình tải lên phương tiện WP 3.5 trong các tùy chọn chủ đề. Đó là những gì tôi nghĩ ra và nó hoạt động hoàn hảo với tôi. Hãy cho tôi biết nếu bạn đưa ra bất kỳ giải pháp tốt hơn.

Đây là cách tôi đã triển khai mã trong các tùy chọn chủ đề của mình:

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;

  });
});

Cập nhật

Mã này chỉ hoạt động trên trang chỉnh sửa bài. Để làm cho nó hoạt động trên trang tùy chọn chủ đề, bạn cần thêmwp_enqueue_media();

Tôi đang làm gần như vậy nhưng nó chưa sẵn sàng nhưng nó hoạt động:

trong 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

Các javascript:

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

Điều này sẽ cho phép bạn tải lên và gửi url hình ảnh (ở bất kỳ kích thước nào) đến thành <input>phần.
Tôi đang cố gắng thực hiện điều này như một cài đặt và nó hoạt động, Chỉ có điều tôi cần bây giờ là một cách đáng tin cậy để gửi ID đính kèm tới<input>

Tôi nghĩ rằng @janw đã hoàn toàn đúng, nhưng tôi không thể làm cho một thứ hoạt động được. Jan chèn nút thư viện phương tiện bằng cách sử dụng:

do_action( 'media_buttons', 'default_featured_image' );

và sau đó thực hiện trước hành động mặc định bằng cách sử dụng:

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

Vấn đề mà tôi gặp phải là việc chèn một nút phương tiện theo kiểu này không gán id "default_featured_image_button" cho liên kết. Trong thực tế, nó không thêm bất kỳ id nào vào liên kết được chèn. Vì vậy, đây là những gì tôi đã làm để làm cho nó hoạt động.

Tôi đã thêm dòng này vào chức năng gọi lại hộp meta ngay sau trường nhập liệu của mình:

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

Sau đó, tôi đã xử lý tệp jquery tùy chỉnh của mình và tệp css hộp dày, cũng trong tệp tin.php của tôi, bằng cách sử dụng:

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

Cuối cùng, tệp image-set.js của tôi bao gồm:

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

Bạn sẽ lưu ý rằng tôi đã sử dụng các biến để lưu trữ tên và id của trường đầu vào ngay trước liên kết gọi jQuery. Theo cách đó, mã này có thể được sử dụng nhiều lần trên cùng một trang. Bạn sẽ chỉ cần gán một lớp cho tất cả các nút hoặc sử dụng id riêng cho các nút trong câu hỏi của bạn như tôi đã làm. Tôi hy vọng điều này sẽ giúp ai đó như câu trả lời của Jan đã làm cho tôi.

Tôi biết rằng đây là một bài viết cũ, nhưng tôi chỉ muốn chia sẻ những phát hiện của mình:

Để mở trình chỉnh sửa phương tiện, chúng tôi gọi chức năng này

wp.media.editor.open();

về cơ bản, trình soạn thảo phương tiện sẽ kiểm tra trình soạn thảo tinyMCE ( window.tinymce), sau đó Quicktags ( window.QTags), để chuyển nội dung đến.

Đối với cách tiếp cận của tôi để có được nội dung, tôi đã gán window.QTagsmột đối tượng tùy chỉnh, có một insertContent()phương thức:

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;

Tham khảo: phpxref