WordPress, JavaScript'i nasıl düzgün bir şekilde tanıtıyor?JS ve CSS dosyalarının özel yüklenmesi

Kullanmak içinWordPress web sitesiprogramcılar, geliştirmeWordPress eklentisiVeya bir WordPress temasını özelleştirirken bazı JavaScript ve CSS komut dosyası oluşturma kaynaklarına başvurulur.

• Genellikle, insanlar doğrudan HTML için link, script etiketlerini kullanır.
• Aslında, WordPress, komut dosyalarına başvurmak için yerleşik karmaşık işlevlere ve yöntemlere sahiptir.
• Bu nedenle, WordPress'in yerleşik yöntem referanslarını kullanmak daha profesyonel ve daha genişletilebilir.

Hatalı alıntı yöntemi

İki yaygın alıntı yöntemi vardır, sorun değil, sadece mükemmel veya makul değil.

Tip 1:bağlantı etiketleri CSS dosyalarına atıfta bulunur

• Komut dosyası etiketleri, JS dosyalarını uygular.Burada ayrıntılı değil.

Tip 2:wp_head işlevini kullanın

• wp_head işlevi, bazı özel veya sistem tanımlı içeriğin çıktısını almak için kullanılır.
• Bu dosyaya başvurmak için bazen aşağıdaki kodu kullanırız:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• İlgili dosyalara başvurmak için yukarıdaki kodu function.php dosyasına kopyalayın.

WordPress Enqueue Komut Dosyaları kaynak mekanizması

Hepimizin bildiği gibi, WordPress'in birçok eklentisi vardır:

• Hemen hemen her eklenti, bir kaynak dosyasına başvurur.
• Kaçınılmaz olarak, iki eklenti tarafından referans verilen kaynaklar arasında kararsız hale gelecek ve verimliliği etkileyebilecek çatışmalar olacaktır.

wp_enqueue_script işlevini kullanın

• WordPress'te bir kaynağa başvurmak için kullanmalısınızwp_enqueue_scriptKuyruğa alınan veya sıralanan işlevin adında kuyruğa alma sözcüğü olan bir işlev.
• Kaynakları kuyruğa almanın bu WordPress yolu ile (Kodlama Komut Dosyaları), referanslar ilgili dosyalardan ve çekirdek koddan ayrılır.
• Kullanıcı kaynağı devre dışı bırakmak isterse, onu çekirdek koddan değiştirmeden silebilir, değiştirebilir ve yorumlayabilir.

Ayrıca, jQuery, jQuery UI vb. gibi yaygın olarak kullanılan bazı kitaplıklar WordPress'te yerleşiktir.

Doğrudan yerleşik kitaplığı çağırmak için wp_enqueue_script işlevini kullanabiliriz, bu da kodu ve daha temiz bir belirtimi kaydeder.

Kendi JS ve CSS dosyalarınıza başvurmak için bu işlevi kullanırsanız, kullanmanız gerekir.wp_register_scriptİşlev bir tanımlayıcıyı (tutamaç) kaydeder ve ardındanwp_enqueue_scriptİşlev, bu bayrağa karşılık gelen kaynağı çağırır.

WordPress'te JS ve CSS dosyaları nasıl düzgün bir şekilde içe aktarılır?

WordPress, JS ve CSS yöntemleri için mantıklı içe aktarma yöntemleri sağlar.

Plugin.css dosyasını eklentiye aktarmak için aşağıdaki kodu kullanabilirsiniz ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Yukarıdakiler, plugin_stylesheet tanımlayıcısına sahip bir kaynak oluşturmak için wp_register_script işlevini kullanır.

Ardından, sıraya alınmış isteklerini ekleyinwp_enqueue_scriptseylemler çalışıyor.

İşlev adı bir komut dosyası olmasına rağmen, kaynak dosyasının türüyle ilgisi yoktur ve hem CSS hem de JS için geçerlidir.

wp_register_script işlevi gerçekten o kadar basit değil, beş parametreye sahip olabilir:

1) $ tutamacı:Kaynak tanımlayıcısı.

• 由wp_enqueue_scriptAktar.

2) $src:Kaynağın konumu.

• Göreli veya mutlak adresler, adresleri vb. almak için WordPress yerleşik işlevlerini kullanır.
• YaygınKonumlandırmaişlevi vardırplugins_url,get_template_directory_uri等.

3) $deps:güvenmek.

• jQuery eklentisinden bahsediyorsanız ve jQuery yapısına güvenmeniz gerekiyorsa, jQuery'yi doldurmanız gerekir.
• Bir dizi olarak iletildiğini unutmayın.

4) $ver:Kaynak sürümü, isteğe bağlı.

5) $in_footer:en alta koyarmısın

• Normalde, JS dosyaları sayfanın en altına yerleştirilmelidir, bu parametreyi True olarak ayarlayabilir, boş bırakabilir veya en üste çıktı almak için False yapabilirsiniz.

Daha eksiksiz bir JavaScript dosyası referans örneğine bakalım ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress temaları, kaynakları içe aktarmak için wp_enqueue_script kullanır

WordPress tema geliştirmedeki programcılar, kullanınwp_enqueue_scriptKaynakları içe aktarın.

• Yukarıdaki örnekler, WordPress eklentisi geliştirme için başvurulan kaynakların örnekleridir.
• Konuda atıfta bulunulan yöntem benzerdir.

Temel fark, tema altındaki kaynak dosya adresini almak için tema dizinini almak için ilgili işlevi kullanmaktır.

kullanabilirsinizget_template_directory_urigeçerli tema dizinini alma işlevi.

Bir çocuk teması kullanıyorsanız, kullanmanız gerekir.get_stylesheet_directory_uriİşlev, ilgili kaynakları almak için ana temanın dizinini alır.