3. Taraflar mı olmalı $ wp_scripts / $ wp_styles-> add_data?


31

WP_DependenciesSınıf içinde adında bir yöntem var add_data. Bu işlev, WordPress yüklemesi sırasında kodlanmış komut dosyalarına / stillere veri ekler. Bu işlev için genel olarak belirtilen bir kullanım, farklı IE sürümlerinde hedeflenen stil sayfaları eklerken koşullu eklemektir. Örneğin, IE8 ve daha düşük hedeflemek için:

function test_wp_print_styles() {
    global $wp_styles;

    wp_enqueue_style( 'test-style', get_template_directory_uri() . '/css/test.css', array(), 1, 'all' );
    $wp_styles->add_data( 'test-style', 'conditional', 'lte ie8' );
}
add_action( 'wp_print_styles', 'test_wp_print_styles' );

Bu, şöyle yapacak:

<!--[if lte ie8]>
<link rel='stylesheet' id='test-style-css'  href='http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1' type='text/css' media='all' />
<![endif]--> 

Core'a baktığımda, bu yöntemin kullanıldığı bir avuç yer görüyorum:

  • WP_Styles->add_inline_style(): başvurulan stil sayfasından sonra satır içi stil ekler (ile yapılır WP_Styles->print_inline_style())

  • WP_Scripts->localize(): bir json kodlu nesne ekler (daha "public" wp_localize_script()işlevi tarafından sarılır )

  • wp_plupload_default_settings() : 'wp-plupload' betiği için json kodlu nesneyi (çok boyutlu bir diziden oluşturulmuş) ekler (bunun 3.4'da çıkacağına dikkat edin)

  • Scriptleri ve stilleri kaydederken / kodlarken Varsayılan scriptler için veri ekleme ( wp-includes/script-loader.php)

Yöntemin kullanımlarını okumaktan, belirli bir kullanım durumuna sahip görünmüyor. Içinde wp_plupload_default_settings, keyfi veri enjeksiyonu için izin veriyor gibi görünüyor. İçinde wp_register_script, üstbilgi ve altbilgi komut dosyaları arasında ayrım yapmak için kullanılmış gibi görünüyor. İçinde add_inline_style, belirtilen bir stil sayfası doldurulduktan sonra eklenmesi gereken satır içi stili belirtmek için kullanılır.

Bu işlev için mükemmel bir kullanım, harici bir komut dosyasını sıkıştıracağınız ancak bazıları DB'den gelen bazı yapılandırma değişkenleri göndermeniz gereken aşağıdaki kod gibi bir şey olacaktır:

function zdt_enqueue_add_this() {
    global $wp_scripts;

    wp_enqueue_script( 'zdt-add-this', 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere' );

    // Contrived example of database call to get a twitter handle stored in the db
    $author_twitter_handle = zdt_get_twitter_handle();

    $js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
    $js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';

    $wp_scripts->add_data( 'zdt-add-this', 'data', $js );
}
add_action( 'wp_enqueue_scripts', 'zdt_enqueue_add_this' );

Bu sonuçlanacak:

<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>

wp_localize_scriptBunun, addthis_sharenesnenin özellikler içinde özelliklere sahip olması nedeniyle gerçekleştirilemediğine dikkat edin ( daha önce buralarda biraz kaba bir şekilde yazdım ).

EDIT: Bunu söylerken yanılmışım. wp_localize_scriptçok boyutlu dizileri iyi idare eder.

Bu yöntem aşağıdaki nedenlerden dolayı gerçekten iyi çalışıyor gibi görünüyor:

  1. Veriyi kod tanıtıcısına eklemenizi sağlar, böylece her zaman komut dosyası ile doğru şekilde kodlanır. Dahası, senaryoyu boşaltmak, senaryo sırasını ve senaryo yerleşimini belirlemek akıllıca olacaktır.
  2. PHP'ye vars göndermek için PHP kullanmanıza izin verir.
  3. Daha wp_print_stylessonra enqueeded bir komut dosyası tarafından uygulanan bazı rasgele komut dosyası yazdırmak için kullanmaktan daha organize görünüyor .

Bu yöntem için beni endişelendiren beklendiği gibi çalışmayan bazı şeyler var. Bu sorunlardan biri, wp_localize_scriptbirlikte kullanırsanız $wp_scripts->add_data, beklenmeyen sonuçlar alabilmenizdir. Örneğin:

// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();

$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';

$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );

üretir:

<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>

Oysa bu senaryo:

// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();

$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';

wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );

üretir:

<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>

Ayarlanan dataanahtar wp_localize_script, çağrının sonunda nihayetinde üzerine yazılır $wp_scripts->add_data, oysa wp_localize_scriptaynı komut dosyası için iki kez ararsanız , dizge uygun şekilde birleştirilir.

Bunların hepsi enqueeded script ile kullanmak için keyfi bir script basmak için gerçekten kullanışlı bir yöntem olsa da, çatışma potansiyeli nedeniyle yaygın olarak kullanılmaması gerektiğini düşündürüyor. Bunu, kodun topluluk eklentileri / temalarında kullanılmayacağı kişisel projelerde kullanmak için kesinlikle bir argüman görebilirim.

Ayrıca, fonksiyonun amacı ile ilgili herhangi bir ipucu olup olmadığını görmek için Core Trac'e baktım. Keyfi JS eklemenin başka yollarını araştıran bir bilet (http://core.trac.wordpress.org/ticket/11520) (destansı bir tane) buldum. Bu nedenle, keyfi JS eklemek için daha iyi bir yol yaratmaya ilgi duyulduğu anlaşılıyor, ancak add_datasürecin bir parçası olup olmadığından tam olarak emin değilsiniz .

Asıl sorum şu: geliştiriciler bu işlevi kullanıyor mu? Bazı durumlarda (örneğin, wp_register_script), 3. tarafların kullanmaması gereken "özel" bir işlev gibi gözükmektedir; Bununla birlikte, diğer durumlarda (örneğin wp_plupload_default_settings), sıkıştırılmış bir komut dosyasından önce keyfi JS enjekte etmenin mükemmel bir makul yolu gibi görünüyor.

Bunun "doğru" bir cevabı olduğunu sanmıyorum ama diğer devlerin ne düşündüğünü duymayı çok isterdim. Ayrıca bu yapbozda tamamen ihmal ettiğim ve başkalarının bu konuda ne söyleyeceklerini duymaktan hoşlanabileceğim parçalar olduğunu hayal ediyorum.

Yanıtlar:


4

Bu işlev, WordPress yüklemesi sırasında kodlanmış komut dosyalarına / stillere veri ekler.

Pek sayılmaz. Bulunan komut dosyalarına / stillere veri ekler registered.

Ayarlanan veri anahtarının wp_localize_scriptçağrısının sonunda nihayetinde üzerine yazıldığından , aynı komut dosyası için iki kez $wp_scripts->add_dataararsanız wp_localize_script, dizge uygun şekilde birleştirilir.

Sağ. Her ikisi de altta yatan (erişilebilir olmayan, dahili) API'yi çağırır, böylece üzerine yazdığınız (yazdığınız gibi). Bu aradığında olur $this->get_data( $handle, 'data' );.

Soru

Asıl sorum şu: geliştiriciler bu işlevi kullanıyor mu?

Cevap

Basitçe söylemek gerekirse: Evet, ihtiyacınız olanı yapma şansınız olmadığında.

Başka bir örnek: Bir komut dosyasının kayıtlı olup olmadığını kontrol edin (örneğin json2/jquery) ve altbilgiye taşıyın (kontrol edin extra['group']).

// Move scripts to the footer - in case it isn't already there
if ( ! $wp_scripts->get_data( 'json2', 'group' ) )
    $wp_scripts->add_data( 'json2', 'group', 1 );

if ( ! $wp_scripts->get_data( 'jquery', 'group' ) )
    $wp_scripts->add_data( 'jquery', 'group', 1 );

Not: Bu ↑ yalnızca dosyalanmış veriler için çalışır extra!

Ek Notlar

Karşı Soru: Çekirdek tarafından kaydedilen komut dosyalarına hiç bağımlılık eklemeyi denediniz mi? Örneğin: JSON2İstenilen depsleri eklemeye çalışın jQuery. Buna müdahale etmeden bu mümkün değildir global $wp_scripts:

global $wp_scripts;

$scripts = array( 
     'jquery'      => array( 'json2' )
    ,'jquery-form' => array( 'json2' ) 
);

foreach ( $scripts as $handle => $deps )
{
    // Ugly hack: Intercept the global to force the "natural"/needed order: JSON2 » jQuery
    $deps_default =& $wp_scripts->registered[ $handle ]->deps;
    $wp_scripts->registered[ $handle ]->deps = array_merge( $deps_default, $deps );
}

Sınıfın yapamayacağı bir sürü şey var. Gibi bir şey kullanarak Yani ->add_data()olduğunu imo tamamen geçerlidir. Sadece sahip olduklarınızı kullanın, çünkü temel derslerden yoksun yaşamaktan daha iyi.


"Çekirdek, varsayılan ve yerleşik komut dosyalarına bağımlılıklar eklemek için bir olasılık ekleyene kadar bekleyin" trac'te bir bilet açtınız mı?
scribu

@scribu Teşekkürler, ama hayır, yapmadım ve yapmadım. Tüm biletlerim orada çürüyor, bu yüzden çaba harcamadan trac biletlere geri döndüm. Bu, suç değil, şu ana kadar yaşadıklarımın bir sonucudur. Ancak sizinle tartışmaya başlamam için, eklentilerimden birindeki basit bir kopya / yapıştırmadan kaldığı için kaldıracağım.
kaiser

O zaman sanırım buraya sormam gerekecek: jQuery'den önce JSON2'yi yüklemenin faydası ne olabilir?
scribu

Hiçbir şey, soyut bir örnek olarak. Daha ayrıntılı bir örnek bulmaya çalışırsanız, o zaman ihtiyacı JSON2olan bir kütüphaneyi hayal edebilirsiniz , ama daha önce de yüklenmesi gerekiyor jQuery: Adını verelim UberjQuery. Btw: Çekirdeğin içine kazma konusunda oldukça başarılı olduğunuzdan neden zaman ayırıp bir cevap yazmıyorsunuz? Sanırım okumaya değmeyecek.
kaiser

Düşüncelerin için teşekkürler Kaiser! Kesinlikle "API" tarafından desteklenen JS ekleme yöntemlerini arıyorum. Bunu bildiğim halde, her şeyi yapmak için bükebilirim, bu dengesiz kodlara yol açabilir. Yapabileceklerinden ziyade neye yönelik olduğunu bilmek güzel ve elbette bununla çok şey yapılabilir.
tollmanz

1

WP 3.3'te script verilerinin nasıl kullanılacağı hakkında büyük bir tartışma vardı:

http://core.trac.wordpress.org/ticket/11520

O Not edebilirsiniz iç içe diziler geçmesine wp_localize_data()şimdi:

wp_localize_script( 'jquery', 'jQueryL10n', array(
    'foo' => array(
        'bar' => array( 'apple', 'orange' )
    ),
) );

Bu yüzden, yapmam add_data()gerekenler için daha yüksek seviyeli bir API olmasaydı , bazı son durumlarda davranışların değişebileceğini anlamak gibi birleştirme söz konusu olduğunda bunu kullanırdım.


Girişiniz için teşekkür ederiz Scribu! O bilete bağlanman çok komik! Mesajımla bağlantı kurdum, ancak çok boyutlu dizilerin şimdi desteklendiğini anlamadım.
tollmanz

Ha ... güzel düzenleme! Düşündüğüm kadarıyla o biletin kafam karıştı.
tollmanz

@tollmanz Evet, özellikle o sırada IRC'de değilseniz, oldukça kafa karıştırıcı.
scribu

Bay @ungestaltbar bana bir ay önce çok boyutlu dizileri eklemenin bir yolunu gösterdi. Bilmiyordum, bunun zaten çekirdekte olduğunu.
kaiser

@scribu - çok boyutlu dizileri zaten desteklemiyor mu? - en azından onları sorunsuz kullanıyorum ...
Stephen Harris
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.