WP Özelleştirme JS Yöntemlerini Genişletmek Mümkün mü?


9

Anonim apinesnenin yöntemlerini genişletmenin mümkün olup olmadığını merak ediyorum wp-admin/js/customize-control.js. Bu yöntemlerden birini kendi özel mantığımın üzerine yazmam gerekiyor, ancak hemen çağrılan bir işlev ifadesinde sarıldığından mümkün olmadığından şüpheleniyorum:

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

Görebildiğim kadarıyla, anonim olarak çalıştırıldığı ve kullanılamadığı için prototipi pencere nesnesinden uzatamıyorum window.wp.customize. Böyle bir şeyin mümkün olup olmadığı hakkında bir fikrin var mı? Bunu, .toggle () yöntem belgelerinde / açıklamasında geçersiz kılmaya bile değinilmiştir: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , ama ben Sadece tüm JS dosyasını çatallayarak, WP sürümünü ayıklayarak ve kendi kimliğinizi sıkarak veya farklı bir şey ifade edip etmediklerinden emin değilim.

Bunun mümkün olması gerektiği gibi göründüğünü, wp.customize.{method}.extend({ foo: // replace method foo here })ancak bunun yalnızca genel temel sınıflar / nesneler için geçerli olduğunu,wp-admin/js/customize-control.js


3
apiAnonim olsa da , wp.customizeküresel olarak erişilebilen ( eşanlamlı hat 3) ile eşanlamlıdır . Bununla birlikte, kontroller için kullanılan Başka Bir Nesne Modeli readyişlevi çağırır, initializeböylece yöntemlerin üzerine yazma şansı (yani her zaman çok geç olabilir) - ne genişletmeye çalışıyorsunuz?
bonger

Teoride, bu mantıklı - öneriyi takdir eder. Benim durumumda, bu yaklaşımın oldukça çılgın olduğunu ve kullanım durumum için uygun başka bir çözüm bulmayı başardım. Bununla birlikte, çalışma koduyla ilgili bir cevap, kullanım durumu için başka seçeneği olmayan bir kişi için hala yararlı olabilir. Planladığım performans yine de korkunç olurdu.
Brian

1
Ben JS uzmanı değilim. Ancak küçük bir tema eklenti komut dosyası her zaman benim uzantıları yenilemek için var. Ben wp.customizebu nesne ile çalışmak ve işlevler eklemek. kaynak bir örnek için buraya bakın - github.com/bueltge/Documentation/blob/master/js/…
bueltge

Yanıtlar:


5

Sorunuzla ilgili küçük yorumumu geliştireceğim. Ama yine ipucu; Ben JS uzmanı değilim. Takip kaynağı, ipuçları sadece Özelleştirici ile oynarken sanal alanım gibi farklı kontroller, örnekler için kullanıldı .

wp.customize

WP teması özelleştirici arabirimini anlamak, wp.customize javascript nesnesini anlama etrafında odaklanır. wp.customizeNesne önemli olduğunu ve başından üzerine koymalıdır.

Canlı Örnek

Aşağıdaki küçük örnek bunu göstermektedir. İlk önce var'ı apiözelleştiricinin nesnesine ayarladım . Bundan sonra özel alanlarıma ayarladım apive sonucu canlı önizleme için yenilemek için bunu küçük jQuery kaynağı ile geliştirdim.

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

Ayarlar ve Kontroller

Kontrol nesneleri içinde saklanır wp.customize.controlve ayar nesneleri içinde saklanır wp.customize. Değer sınıfının birçok işlevi vardır, size yardımcı olabilir.

  • instance (id) - Koleksiyondan belirtilen kimliğe sahip bir nesne alın.
  • has (id) - Koleksiyon belirtilen kimliğe sahip bir nesne içeriyorsa true, aksi takdirde false olur.
  • add (id, value) - Koleksiyona belirtilen bir kimlik ve değere sahip bir nesne ekleyin.
  • remove (id) - Nesneyi koleksiyondan kaldırın.
  • create (id) - Varsayılan yapıcıyı kullanarak yeni bir nesne oluşturun ve onu koleksiyona ekleyin.
  • each (callback, context) - Koleksiyondaki öğeler üzerinde yineleme yapın.

Özel ayarlar

Bu işlevlerle özel ayarlarımızı geliştirebiliriz.

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

bir dizi için de kullanılabilir

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

Almak

Sonucu konsolda görün.

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

Ayarlamak

Ayar değerlerini işlev aracılığıyla da değiştirebilirsiniz set.

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

Nesne olarak kontrole geçin

console.log( api.control.instance( 'my_custom_setting_field' ) );

Yardımcı Kaynak

  • wp-admin / js / özelleştir-controls.js
  • / Js / özelleştir-preview.js wp-includes
  • / Js / özelleştir-base.js wp-includes
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.