আমি একটি প্লাগইন লিখেছি যাতে নীচের ডানদিকে আপনার কোণে একটি ছোট চ্যাট আইকন রয়েছে, তবে আমি চাই যে ব্যবহারকারীটি আইকন হিসাবে কোনও চিত্র চয়ন করতে সক্ষম হন Media Library। আমি কীভাবে ওয়ার্ডপ্রেস এপিআই দিয়ে এটি করতে পারি? চিত্রটি প্লাগইনে একটি সেটিংস (কেবলমাত্র প্রশাসক দ্বারা পরিবর্তনযোগ্য)
উত্তর:
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' );
}
}আপনার এইচটিএমএল এর মতো কিছু হতে পারে (আপনি আমার উত্তরের মতো ইমেজ ইউআরএল পরিবর্তে প্লাগইন সেটিংয়ে আমার কোডটি সংযুক্তি আইডি ব্যবহার করুন নোট করুন, আমি মনে করি এটি আরও ভাল example উদাহরণস্বরূপ, আইডি ব্যবহার করা আপনাকে বিভিন্ন চিত্রের আকার পেতে দেয় যখন আপনি তাদের প্রয়োজন):
$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();
}
}পিডি: এটি অন্যান্য উত্তরের উপর ভিত্তি করে এখানে লেখা একটি দ্রুত নমুনা । পরীক্ষিত হয়নি কারণ কোডটি কী ব্যবহৃত হবে তা বা আপনার সঠিক সমস্যাগুলি সম্পর্কে সঠিক তথ্য সরবরাহ করেন নি।
wordpress-settings-api-classতারেক হাসান, ইউআরএল দ্বারা ব্যবহার করুন : https://github.com/tareq1988/wordpress-settings-api-class
class.settings-api.php
আপনার প্লাগইনে মূল শ্রেণি অন্তর্ভুক্ত করুন । (এই ফাইলটি https://github.com/tareq1988/wordpress-settings-api-class/blob/master/src/class.settings-api.php )'type' => 'file'মিডিয়া আপলোডার যুক্ত করতে চাইলে আপনাকে ব্যবহার করতে হবে । (আরও ভাল বোঝার জন্য এই উদাহরণটি দেখুন https://github.com/tareq1988/wordpress-settings-api-class/blob/master/example/procedural-example.php )wp.mediaনিয়ন্ত্রণ মত ।
আপনি যেহেতু প্রতিটি ব্যবহারকারীর জন্য আইকনটি আলাদা হতে চান তাই আপনাকে ব্যবহারকারী প্রোফাইলটিতে ছবিটি সংরক্ষণ করতে হবে। এর অর্থ আপনার অতিরিক্ত ব্যবহারকারী ক্ষেত্র যুক্ত করতে হবে:
// 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']);
}এখন, এটি আপনাকে ব্যবহারকারীর কম্পিউটার থেকে একটি ফাইল আপলোড করার সম্ভাবনা দেয়। আপনি যদি ব্যবহারকারী চান যে বিদ্যমান চিত্রগুলিকে ফাইলটি নির্বাচন করুন, জিনিসগুলি আরও জটিল হয়ে উঠবে, কারণ তারপরে আপনাকে ডিফল্ট ফাইল আপলোডের পরিবর্তে মিডিয়া লাইব্রেরি কল করতে হবে। স্টিভেন স্ল্যাক একটি দুর্দান্ত পোস্ট লিখেছেন কীভাবে এটি করা যায়, আমি তার কোডটি এখানে কপি-পেস্ট করে ক্রেডিট নিতে চাই না।
আপনার টেমপ্লেটে আপনাকে অবশ্যই তিনটি সম্ভাবনা আলাদা করতে হবে: ব্যবহারকারী লগ ইন নয়, ব্যবহারকারী লগ ইন করেছেন তবে কোনও আইকন নেই, ব্যবহারকারী লগ ইন করেছেন এবং আইকন রয়েছে। মোটামুটিভাবে, এটি অন্তর্ভুক্ত করুন:
$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 ...
}প্লাগইন সহ একটি পূর্ণ কোড আপনি এই url এ দেখতে পারেন: http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/
ব্যবহারের জন্য সহজ কেবল আপনার প্রয়োজনীয় জায়গায় কোডটি কপি করুন
আমি এই সমাধানটি ব্যবহার করেছি (মিডিয়া লাইব্রেরি নিজেই ব্যবহার না করে):
কোনও মডেলের অভ্যন্তরে চিত্র-পিকার-লিব ব্যবহার করে যা কোনও লুকানো ইনপুটটির মান সেট করে, যা বিকল্পগুলিতে পোস্ট করা হয়। সমস্ত মিডিয়া পেয়ে এবং এটিকে বিকল্প হিসাবে প্রতিধ্বনিত করার মাধ্যমে আমি ব্যবহারকারীকে একটি ইম্জি নির্বাচন করতে পারি।
এইচটিএমএল
<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 />পিএইচপি / এইচটিএমএল
<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>জাতীয়
$(".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();
+ });wp.mediaনিয়ন্ত্রণ মত ।
wp.mediaকাস্টম আপলোডগুলির অনুমতি দেওয়ার জন্য অন্তর্ভুক্ত করা উচিত , এই প্রয়োজনীয়তার জন্য একটি মিডিয়া ফাইল নির্বাচন করুন। ডাব্লুপিএসইর অনেকগুলি উদাহরণ রয়েছে তবে সম্ভবত এই পোস্টগুলি আপনাকে জিরোসোনারমানি.com/… সহায়তা করবে আপনি এছাড়াও গিথুব উদাহরণগুলিতে সন্ধান করতে পারেন, বিশেষত সমুদ্র 90 - github.com/ocean90/media-modal-demo