คุณมีความถูกต้องสมบูรณ์เกี่ยวกับการวิเคราะห์ปัญหาแม้ว่าคำศัพท์ที่คุณจ้างจะสับสนเล็กน้อย ไม่มีสิ่งเช่น "อินสแตนซ์ของภาพ": เมื่อคุณแทรกรูปภาพในโพสต์การแก้ไขชื่อรูปภาพเดิมหรือคำบรรยายภาพ (ผ่านเมนูสื่อเป็นต้น) จะไม่แก้ไขภาพที่ถูกแทรกลงในโพสต์ หากต้องการโน้มน้าวใจคุณให้คลิกที่แท็บ "ข้อความ" และตรวจสอบรหัส HTML ที่สร้างขึ้น
นี่คือสิ่งที่เกิดขึ้นเมื่อคุณแทรกภาพด้วยปุ่ม "เพิ่มสื่อ":
เมื่อคุณคลิกที่ "แทรกเพื่อโพสต์" ข้อมูลจะถูกนำมาจาก Modal สื่อเพื่อสร้างรหัส HTML บางส่วน: <img>แท็กที่มีแหล่งที่ถูกต้องขึ้นอยู่กับขนาดที่คุณเลือกชื่อเป็นข้อความ alt และคำบรรยายภาพหากมี รหัสนี้ถูกแทรกในตำแหน่งที่ถูกต้องในตัวแก้ไข TinyMCE (ตรวจสอบผ่านทางแท็บ "ข้อความ")
ภายในแท็บ "ภาพ" จะมีการสร้าง "มุมมอง" เพื่อแสดงภาพภายในโปรแกรมแก้ไขภาพ มุมมองนี้แสดงรูปภาพและปุ่มสองปุ่ม: แก้ไขและลบ มุมมองนี้เป็นสิ่งที่ช่วยให้คุณปรับขนาดภาพและเปลี่ยนพารามิเตอร์อื่น ๆ ได้โดยไม่ต้องสัมผัสกับโค้ด HTML
ดังนั้นหากคุณต้องการเพิ่มข้อมูลที่กำหนดเอง (อย่าเรียกว่าฟิลด์ที่กำหนดเองเนื่องจากไม่ได้แนบไว้กับโพสต์สิ่งที่แนบมา) คุณจะต้องแทรกข้อมูลลงในโค้ด HTML นี้แล้วปรับเปลี่ยนมุมมองเพื่อให้สามารถเปลี่ยนข้อมูลนี้ได้ . หากฉันเข้าใจคำถามของคุณเป็นอย่างดีคุณต้องการเพิ่มข้อมูลที่จะวางตำแหน่งภาพในลักษณะเฉพาะบนหน้า คุณสามารถใช้คลาสที่กำหนดเองสำหรับสิ่งนี้
นี่คือรหัส HTML ที่สร้างขึ้น:
<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />
และคุณต้องการมีตัวเลือก "ตอบสนอง" ในรายการแบบเลื่อนลงขนาดที่จะทำให้โค้ดมีลักษณะดังนี้:
<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />
นี่คือวิธีการบรรลุสิ่งนี้: สร้างปลั๊กอินที่จะจัดคิวสคริปต์ใหม่ในหน้าแก้ไขโพสต์
add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
if($hook == 'post.php'){
wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
}
}
จากนั้น customView.js ควรมีลักษณะดังนี้:
(function($, _){
var media = wp.media;
var origImageDetails = media.view.ImageDetails;
media.view.ImageDetails = origImageDetails.extend({
initialize: function() {
origImageDetails.prototype.initialize.apply( this, arguments );
this.on( 'post-render', this.responsiveSize );
this.listenTo( this.model, 'change:size', this.setReponsiveSize );
this.initSize = this.model.get('size');
},
responsiveSize: function(){
// add a "Reponsive" option to the Size dropdown setting
var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
this.$('.embed-media-settings select.size').append($opt);
},
setReponsiveSize: function(){
// remove width and height
if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
}
});
}(jQuery, _));
และนี่คือผลลัพธ์:
