আমি অবশেষে যা অর্জন করতে চাই তা হ'ল চিত্রের বিবরণ বাক্সে অতিরিক্ত সেটিংস যুক্ত করা হবে <img>যা data-*বৈশিষ্ট্য হিসাবে চিত্র ট্যাগে সঞ্চিত হবে
উদাহরণ: <img src="..." data-my_setting="...">
আমার কোড
আমি একটি প্লাগইন তৈরি করছি এবং আপনি যখন ছবিগুলি সম্পাদনা করেন তখন আমার আরও সেটিংস তৈরি করতে হবে। এখন পর্যন্ত আমার কাছে নিম্নলিখিত কোড রয়েছে:
jQuery(function($) {
var imageDetails = wp.media.view.ImageDetails
wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
// Initialize - Call function to add settings when rendered
initialize: function() {
this.on('post-render', this.add_settings);
},
// To add the Settings
add_settings: function() {
$('.advanced-section').prepend('\
<h2>My Settings</h2>\
<input type="text" class="my_setting">\
');
// Set Options
this.controller.image.set({"data-settings": 'setting-value-here'})
}
});
}) // End of jQuery(function($))আমি একটি নতুন পোস্ট তৈরি করেছি এবং একটি চিত্র যুক্ত করেছি, তারপরে এটি ক্লিক করে সম্পাদনা টিপুন (সরঞ্জামদণ্ডের পেন্সিল আইকনটি পপ আপ হয়েছে)। আমি চিত্র বিশদ পৃষ্ঠায় শেষ করেছি এবং এটি দেখতে এটির মতো দেখাচ্ছে:
এ পর্যন্ত সব ঠিকই. এই লাইনে:
this.controller.image.set({"data-settings": 'setting-value-here'})
আমি ইনপুটটির মান পেতে সাধারণত jQuery ব্যবহার করতাম, তবে পরীক্ষার উদ্দেশ্যে আমি এটিকে একটি স্ট্যাটিক মান হিসাবে পরিবর্তন করেছি 'setting-value-here'। আমি চিত্র বিবরণ বাক্সের নীচে-ডানদিকে 'আপডেট' টিপলাম।
সমস্যাটি
পাঠ্য সম্পাদকটিতে এটি এইচটিএমএল কোডটি দেখায়:
এই না একটি আছে data-settings="setting-value-here"কীভাবে আসবেন?
আমি যদি এর সাথে লাইনটি প্রতিস্থাপন করি:
this.controller.image.set({alt: 'setting-value-here'})এটা তোলে করেন পরিবর্তন এবং ALT করার ট্যাগ alt="setting-value-here"। সুতরাং আমি ডেটা- অ্যাট্রিবিউট সেট করার চেষ্টা করে কী ভুল করছি?
সমাধান
ধন্যবাদ @bonger (যিনি 50 সম্মাননার পূর্ণ খয়রাত পেয়েছিলাম), আমি নিম্নলিখিত কোড আছে:
পিএইচপি:
function add_my_settings() {
ob_start();
wp_print_media_templates();
$tpl = ob_get_clean();
if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
&& ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
ob_start();
?>
<div class="my_setting-section">
<h2><?php _e( 'My Settings' ); ?></h2>
<div class="my_setting">
<label class="setting my_setting">
<span><?php _e( 'My Setting' ); ?></span>
<input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
</label>
</div>
</div>
<?php
$my_section = ob_get_clean();
$tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
}
echo $tpl;
};
// Hack the output of wp_print_media_templates()
add_action('wp_enqueue_media', $func =
function() {
remove_action('admin_footer', 'wp_print_media_templates');
add_action('admin_footer', 'add_my_settings');
}
);জাভাস্ক্রিপ্ট: (ব্যবহার করে সারিবদ্ধ করা প্রয়োজন wp_enqueue_script())
// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
});
// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
});