Görüntünün örneğine daha fazla seçenek ekleme. (Ek Ekran Ayarları)

Wordpress 3.9'da görüntü sunumu için basit bir yeniden kullanılabilir eklenti oluşturmaya çalışıyorum ve bir tuğla duvara çarptığım anlaşılıyor.

Görüntünün örneğine birkaç seçenek ekleyebilmek istiyorum. ("Ek Ekran Ayarları" altındaki ayrıntılar). Resim boyutu açılır menüsünü devre dışı bırakan (gri renkli) "Duyarlı" yazan onay kutusu veya sabit sayfa konumları vb. Gibi.

Medya Yöneticisi'nde bir görüntüyü seçerken / değiştirirken, bazı özel alanları kullanarak attachment_fields_to_editfiltreler ekleyebildim ve kardeş filtreleri, ancak bu alanlar görüntünün kendisine (veya isterseniz resim eki posta nesnesine) eklenir, bu nedenle bir sayfada aynı görüntünün iki örneği olsaydı, özel alanımla aynı değeri paylaşırlardı.

a) Eklediğim Özel Metin alanı, bunu örneğe ekleyemiyorum, aynı görüntünün tüm örnekleri bu değeri paylaşıyor.

b) Buradaki seçenekleri eklemek istediğim alandır, çünkü buradaki her şey her örneği takip ediyor gibi görünüyor.

c) Bu, önceki ekrandaki ile aynı ekran ayarlarını gösterir, ancak Wordpress 3.9'daki bir görüntünün üstündeki "kurşun kalem" tıklatıldığında farklı gösterilir. Tarafından verilen özel seçeneklerin attachment_fields_to_editbu ekranda nasıl bulunmadığına dikkat edin .

Her ne kadar kafamın nasıl çalıştığı veya wp.media nesnelerini değiştirmek için en iyi uygulamaların ne olduğu konusunda kafamı tam olarak ele geçirmemiş olmama rağmen, hem php, js hem de cevaplar için googling konusunda oldukça yetkinim. Ama bu beni birkaç gündür boğdu, bu yüzden herhangi bir yardım çok takdir edildi.

Okuduğunuz için teşekkürler!

Kullandığınız terimler biraz kafa karıştırıcı olsa bile, sorunun analizinde kesinlikle haklısınız. "Görüntünün bir örneği" diye bir şey yoktur: bir gönderiye görüntü ekledikten sonra, orijinal görüntü başlığını veya başlığını değiştirmek (örneğin Medya menüsü aracılığıyla) gönderiye eklenen görüntüyü değiştirmez. Sizi ikna etmek için "Metin" sekmesini tıklayın ve oluşturulan HTML koduna göz atın.

"Medya ekle" düğmesiyle resim eklediğinizde şunlar olur:

1. "Göndermeye Ekle" yi tıkladığınızda, <img>seçtiğiniz boyuta bağlı olarak doğru kaynağa sahip etiket, alt metin olarak başlık ve varsa altyazı gibi bir miktar HTML kodu: etiket oluşturmak için Medya modundan veri alınır . Bu kod TinyMCE düzenleyicide doğru yere eklenir ("Metin" sekmesi aracılığıyla kontrol edin)

2. "Görsel" sekmesinde, görsel düzenleyici içindeki görüntüyü temsil etmek için bir "görünüm" oluşturulur. Bu görünüm görüntüyü ve iki düğmeyi görüntüler: düzenleme ve silme. Bu görünüm, HTML koduna dokunmadan görüntüyü yeniden boyutlandırmanıza ve diğer bazı parametreleri görsel olarak değiştirmenize olanak tanır.

Bu nedenle, bazı özel veriler eklemek istiyorsanız (herhangi bir ek mesajına bağlı olmadığı için özel alan olarak adlandırmayın), bu HTML koduna eklemeniz ve daha sonra bu verileri görsel olarak değiştirmeye izin vermek için görünümü değiştirmeniz gerekir. . Sorunuzu iyi anlarsam, resmi sayfada belirli bir şekilde konumlandıracak veriler eklemek istersiniz. Bunun için özel bir sınıf kullanabilirsiniz.

Oluşturulan HTML kodu şöyledir:

<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" />

Ayrıca, boyut açılır listesinde kodun aşağıdaki gibi görünmesini sağlayacak bir "duyarlı" seçeneğe sahip olmak istersiniz:

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

Bunu nasıl başaracağınız aşağıda açıklanmıştır: yayın düzenleme sayfasında yeni bir komut dosyasını sıralayacak bir eklenti oluşturun.

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' ));
    }
}

Ardından, customView.js şöyle görünmelidir:

(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, _));

Ve işte sonuç: