Làm cách nào để chọn hình ảnh từ Thư viện phương tiện trong plugin của tôi?

Tôi đã viết một plugin trong đó bạn có một biểu tượng trò chuyện nhỏ ở góc dưới bên phải, tuy nhiên tôi muốn người dùng có thể chọn một hình ảnh làm biểu tượng từ Media Library. Làm cách nào để làm điều này với API Wordpress? Hình ảnh là một cài đặt trong plugin (chỉ có thể thay đổi bởi quản trị viên)

Bạn nên sử dụng wp.mediađể sử dụng hộp thoại WordPress Media Manager.

Trước tiên, bạn cần phải ghi danh các scritps:

// As you are dealing with plugin settings,
// I assume you are in admin side
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
  // change to the $page where you want to enqueue the script
  if( $page == 'options-general.php' ) {
    // Enqueue WordPress media scripts
    wp_enqueue_media();
    // Enqueue custom script that will interact with wp.media
    wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
  }
}

HTML của bạn có thể giống như thế này (lưu ý mã của tôi sử dụng ID đính kèm trong cài đặt plugin thay vì url hình ảnh như bạn đã làm trong câu trả lời của mình, tôi nghĩ nó tốt hơn nhiều. Ví dụ: sử dụng ID cho phép bạn có được các kích thước hình ảnh khác nhau khi bạn cần họ):

$image_id = get_option( 'myprefix_image_id' );
if( intval( $image_id ) > 0 ) {
    // Change with the image size you want to use
    $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
} else {
    // Some default image
    $image = '<img id="myprefix-preview-image" src="https://some.default.image.jpg" />';
}

 <?php echo $image; ?>
 <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" />
 <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç

myscript.js

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

      jQuery('input#myprefix_media_manager').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 Media',
                           multiple : false,
                           library : {
                                type : 'image',
                            }
                       });

                       image_frame.on('close',function() {
                          // On close, get selections and save to the hidden input
                          // plus other AJAX stuff to refresh the image preview
                          var selection =  image_frame.state().get('selection');
                          var gallery_ids = new Array();
                          var my_index = 0;
                          selection.each(function(attachment) {
                             gallery_ids[my_index] = attachment['id'];
                             my_index++;
                          });
                          var ids = gallery_ids.join(",");
                          jQuery('input#myprefix_image_id').val(ids);
                          Refresh_Image(ids);
                       });

                      image_frame.on('open',function() {
                        // On open, get the id from the hidden input
                        // and select the appropiate images in the media manager
                        var selection =  image_frame.state().get('selection');
                        var ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          var attachment = wp.media.attachment(id);
                          attachment.fetch();
                          selection.add( attachment ? [ attachment ] : [] );
                        });

                      });

                    image_frame.open();
     });

});

// Ajax request to refresh the image preview
function Refresh_Image(the_id){
        var data = {
            action: 'myprefix_get_image',
            id: the_id
        };

        jQuery.get(ajaxurl, data, function(response) {

            if(response.success === true) {
                jQuery('#myprefix-preview-image').replaceWith( response.data.image );
            }
        });
}

Và hành động Ajax để làm mới bản xem trước hình ảnh:

// Ajax action to refresh the user image
add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image'   );
function myprefix_get_image() {
    if(isset($_GET['id']) ){
        $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
        $data = array(
            'image'    => $image,
        );
        wp_send_json_success( $data );
    } else {
        wp_send_json_error();
    }
}

PD: đây là một mẫu nhanh được viết ở đây dựa trên câu trả lời khác . Không được kiểm tra vì bạn không cung cấp đủ thông tin về ngữ cảnh chính xác mà mã sẽ được sử dụng hoặc các vấn đề chính xác mà bạn gặp phải.

Được sử dụng wordpress-settings-api-classbởi Tareq Hasan, Url: https://github.com/tareq1988/wordpress-sinstall-api- class

• Bao gồm các lớp chính class.settings-api.php trong plugin của bạn. (tệp này https://github.com/tareq1988/wordpress-sinstall-api-group/blob/master/src/ class.sinstall-api.php )
• Xác định lựa chọn của bạn. Bạn cần sử dụng 'type' => 'file'như bạn muốn thêm một trình tải lên phương tiện truyền thông. (Xem ví dụ này để hiểu rõ hơn https://github.com/tareq1988/wordpress-sinstall-api-group/blob/master/example/procedural-example.php )

Vì bạn muốn biểu tượng khác nhau cho mọi người dùng, bạn sẽ phải lưu trữ hình ảnh trong hồ sơ người dùng. Điều này có nghĩa là bạn cần thêm một trường người dùng:

// create the field
add_action( 'show_user_profile', 'wpse_235406_chaticon' );
add_action( 'edit_user_profile', 'wpse_235406_chaticon' );

function wpse_235406_chaticon ($user) { 
    echo '
    <h3>Chat Icon</h3>
    <table class="form-table">
        <tr>
            <th><label for="chaticon">Chat Icon</label></th>
            <td>
                <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br />
                <span class="description">Please select your chat icon.</span>
            </td>
        </tr>
    </table>';
}

// save the field
add_action( 'personal_options_update', 'wpse_235406_chaticon_save' );
add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' );

function wpse_235406_chaticon_save ($user_id) {
    if (current_user_can ('edit_user', $user_id)) 
        update_usermeta ($user_id, 'chaticon', $_POST['chaticon']);
}

Bây giờ, điều này cung cấp cho bạn khả năng tải lên một tệp từ máy tính của người dùng. Nếu bạn muốn người dùng chọn tệp từ các hình ảnh hiện có, mọi thứ trở nên phức tạp hơn, bởi vì sau đó bạn cần gọi thư viện phương tiện thay vì tải lên tệp mặc định. Steven Slack đã viết một bài đăng tuyệt vời làm thế nào để làm điều này, mà tôi không muốn lấy tín dụng bằng cách sao chép mã của mình ở đây.

Trong mẫu của bạn, bạn phải phân biệt ba khả năng: người dùng chưa đăng nhập, người dùng đăng nhập nhưng không có biểu tượng, người dùng đăng nhập và có biểu tượng. Một cách thô bạo, bao gồm điều này:

$current_user = wp_get_current_user();
if ( 0 == $current_user->ID ) {
  ... do what you want to do for not logged in users ...
  }
else {
  $icon = get_user_meta ($current_user->ID, 'chaticon');
  if (empty($icon)) {
    ... default icon with link to upload possibility ...
    }
  else {
     ... display $icon ...
     }

Mã đầy đủ với plugin bạn có thể tìm thấy trên url này: http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/

Dễ dàng sử dụng chỉ cần sao chép dán mã vào nơi bạn cần

Tôi đã sử dụng giải pháp này (không sử dụng Thư viện phương tiện):

Sử dụng công cụ chọn hình ảnh-lib bên trong một phương thức đặt giá trị của đầu vào bị ẩn, được đăng lên các tùy chọn. Bằng cách lấy tất cả các phương tiện truyền thông và lặp lại nó dưới dạng tùy chọn, tôi có thể cho phép người dùng chọn một img.

HTML

<input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" />
<br>
<a href="#imageModal" class="waves-effect waves-light btn modal-trigger">
    change
</a>
<input id="image_url" name="image_url" type="text" value="" hidden />

PHP / HTML

<div id="imageModal" class="modal">
    <div class="modal-content">
        <select class="image-picker show-html">
            <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>"  value="0"></option>
            <?php
            $query_images_args = array(
                'post_type'   => 'attachment',
                'post_mime_type' => 'image',
                'post_status' => 'inherit',
                'posts_per_page' => - 1,
            );

            $query_images = new WP_Query( $query_images_args );
            $i = 1;
            foreach ( $query_images->posts as $image ) {
                ?>
                <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>"  value="<?php echo $i; ?>"></option>
                <?php
                $i  ;
            }
            ?>
        </select>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-light btn change">Choose</a>
    </div>
</div>
</div>
</div>

Mã não

 $(".change").on("click", function() {
 +            var url = $(".image-picker > option:selected").attr("data-img-src");
 +            $("#image").attr("src", url);
 +            $("#image_url").attr("value", url);
 +            $("#imageModal").closeModal();
 +        });