आपको wp.media
वर्डप्रेस मीडिया मैनेजर डायलॉग का उपयोग करना चाहिए ।
सबसे पहले, आपको स्क्रिट्स को एनक्ल्यूज़ करना होगा:
// 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 कुछ इस तरह का हो सकता है (ध्यान दें कि आपने अपने उत्तर में इमेज url के बजाय प्लगइन सेटिंग में मेरे कोड का उपयोग अटैचमेंट आईडी किया है, मुझे लगता है कि यह बहुत बेहतर है। उदाहरण के लिए, आईडी का उपयोग करने से आपको अलग-अलग चित्र आकार प्राप्त करने की अनुमति मिलती है। उनकी जरूरत):
$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 );
}
});
}
और छवि पूर्वावलोकन को ताज़ा करने के लिए अजाक्स कार्रवाई:
// 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();
}
}
पीडी: यह एक त्वरित नमूना है जो अन्य उत्तर के आधार पर यहां लिखा गया है । परीक्षण नहीं किया गया है क्योंकि आपने सटीक संदर्भ के बारे में पर्याप्त जानकारी नहीं दी है जो कोड का उपयोग किया जाएगा या आपके पास सटीक समस्याएं हैं।
wp.media
कस्टम अपलोड की अनुमति देने के लिए शामिल होना चाहिए , इस आवश्यकता के लिए मीडिया फ़ाइल का चयन करें। WPSE के बहुत से उदाहरण हैं, लेकिन हो सकता है कि यह पोस्ट आपको jeroensormani.com/ में मदद करे। इसके अलावा आप गितुब उदाहरणों पर भी, विशेषकर ओशन 90 से - github.com/ocean90/media-modal-demo