Wordpress - 使用媒体库获取图像

我正在创建一个插件，并且有一个管理页面

在该页面的选项中，我想添加一个按钮，允许我打开 Wordpress 媒体库并从中选择图像，之后获取所选图像的 URL 和alt属性。

如果可以的话，我该如何使用 AJAX 来做到这一点？

首先，您需要将 WordPress 核心媒体脚本和自定义 js 脚本排入队列

function my_enqueue_media_lib_uploader() {

    //Core media script
    wp_enqueue_media();

    // Your custom js file
    wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
    wp_enqueue_script( 'media-lib-uploader-js' );
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');

然后假设您的选项页面中有此标记：一个上传按钮和一个用于存储所选图像 URL 的文本输入

<form method="post">
    <input id="image-url" type="text" name="image" />
    <input id="upload-button" type="button" class="button" value="Upload Image" />
    <input type="submit" value="Submit" />
</form>

您需要添加此 JavaScript 代码来调用上传器弹出窗口

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

  var mediaUploader;

  $('#upload-button').click(function(e) {
    e.preventDefault();
    // If the uploader object has already been created, reopen the dialog
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    // When a file is selected, grab the URL and set it as the text field's value
    mediaUploader.on('select', function() {
      attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#image-url').val(attachment.url);
    });
    // Open the uploader dialog
    mediaUploader.open();
  });

});

选择图像后，您的图片地址输入现在将包含 url 并将保存在表单提交中。