您应该使用wp.media 使用WordPress Media Manager对话框。
首先，您需要将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可以是这样的（注意，我的代码在插件设置中使用附件ID，而不是像您在回答中那样使用图像url，我认为这样更好。例如，使用ID可以在需要时获得不同大小的图像）：
$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" />\';
}
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 );
}
});
}
以及刷新图像预览的Ajax操作：
// 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：这是一个基于
other answer. 未测试，因为您没有提供有关代码将使用的确切上下文或存在的确切问题的足够信息。
