WordPress 16 yılı aşkın süredir hayatımızın bir parçası, ancak temalara ve eklentilere komut dosyası ekleme yöntemi birçok geliştirici için bir gizem olmaya devam ediyor. Bu yazıda, nihayet kafa karışıklığına bir son verdik.
En yaygın kullanılan JavaScript kitaplıklarından biri olduğu için bugün temalarınıza veya temalarınıza jQuery komut dosyalarını nasıl ekleyeceğinizi tartışıyoruz. WordPress eklentileri.
JQuery uyumluluk modu hakkında
WordPress'e komut dosyaları eklemeye başlamadan önce, jQuery'nin uyumluluk modunu anlamak önemlidir.
Muhtemelen bildiğiniz gibi, WordPress zaten dahil jQuery ile birlikte geliyor.
WordPress'teki jQuery sürümünde ayrıca bir " uyumluluk modu Bu, diğer javascript kitaplıklarıyla çakışmaları önlemek için bir mekanizmadır.
Bu savunma mekanizmasının bir parçası sizin olamaz kullan $diğer projelerde yaptığınız gibi doğrudan imzalayın.
Bunun yerine, WordPress için jQuery kodu yazarken, jQuery.
İşte bu kodun bir örneği:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Sorun şu ki, jQuery yazmak milyonlarca kez daha uzun sürüyor, okumayı zorlaştırıyor ve betiğinizi ağırlaştırabiliyor.
İyi haber?
Birkaç değişiklikle, sevimli küçük dolar sembolümüzü tekrar kullanabilirsiniz.
Bu arada, eğer jQuery için yeni , $ işareti sadece jQuery () için bir takma ad, daha sonra bir fonksiyon için bir takma addır.
Temel yapı şu şekildedir: $(selector).action(). Dolar işareti jQuery'yi tanımlar… “(seçici)” HTML öğelerini sorgular veya bulur… ve son olarak “jQuery () eylemi” öğeler üzerinde gerçekleştirilecek eylemdir.
Uyumluluk sorunumuzu nasıl çözebileceğimize geri dönelim… İşte bazı uygun seçenekler:
1. Enter jQuery gizli modu
Uyumluluk modunu aşmanın ilk yolu kodda gizlice dolaşmaktır.
Örneğin, betiğinizi altbilgiye yerleştirirseniz, kodunuzu jQuery'yi eşleyen adsız bir işleve sarabilirsiniz. $.
Aşağıdaki örnekte olduğu gibi:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Komut dosyanızı başlığa eklemek istiyorsanız (mümkünse kaçınmanız gerekir, daha fazlası aşağıdadır), her şeyi belgeye hazır bir işlevde sararak $yol boyunca.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. "Çakışma Yok" moduna girin
JQuery'nin yazımını önlemenin bir başka kolay yolu, moda geçmektir. "Uyuşmazlık ücretsiz" ve farklı bir kısayol kullanın.
Bu durumda: $jvarsayılan yerine $.
Yapmanız gereken tek şey betiğinizin en üstünde ilan etmek:var $j = jQuery.noConflict();
Pekala, şimdi WordPress için geçerli jQuery kodu yazma hakkında daha fazla bilginiz var, hadi onu sayfamıza ekleyelim. Site Web.
WordPress'e jQuery scriptleri nasıl eklenir
WordPress'e jQuery betikleri eklemenin en kolay yollarından biri 'ayar' adı verilen bir işlemdir. bekleme çizgisi '.
bir için Site Web Klasik HTML, kullanırdık <link> komut dosyaları eklemek için öğe. WordPress de aynı şeyi yapıyor, ancak bunu başarmak için özel WP işlevleri kullanacağız.
Bu şekilde bizim için tüm bağımlılıklarımızı yönetir (teşekkürler WP!).
Bir tema üzerinde çalışıyorsanız, işlevi kullanabilirsiniz. wp_enqueue_script() içinde senin functions.php dosyası.
İşte böyle görünüyor:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Bu işlev beş argüman:
- $ tutamaç - betiğe başvurmak için kullanabileceğiniz benzersiz bir tutamaç.
- $src – komut dosyasının konumu.
- $ deps - bir bağımlılıklar dizisini belirtir.
- $ ver - betiğinizin sürüm numarası.
- $ in_footer - WordPress'in komut dosyasını nereye koyacağını bilmesini sağlar.
* Dikkat edilmesi gereken bir şey $in_footer varsayılan olarak komut dosyalarının başlığa yükleneceği anlamına gelir.
Bu kötü bir uygulamadır ve sitenizi önemli ölçüde yavaşlatabilir. Bu nedenle, betiğinizi altbilgiye yerleştirmek istiyorsanız, bu parametrenin true olarak ayarlandığından emin olun.
WordPress yöneticisine komut dosyaları ekleme
Yöneticiye komut dosyaları da ekleyebilirsiniz. Kullanılan işlevler tamamen aynıdır, sadece farklı bir kanca kullanmanız gerekir.
Örnek:
işlev my_admin_scripts () {
wp_enqueue_script ('harika betiğim', plugin_dir_url (__DOSYA__). '/js/my-great-script.js', dizi ('jquery'), '1.0.0', doğru);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Giriş yapmak yerine, wp_enqueue_scriptskullanmalıyız admin_enqueue_scripts.
WordPress'ten jQuery aboneliği nasıl iptal edilir
Peki ya WordPress tarafından önceden yüklenmiş olandan farklı bir jQuery sürümü kullanmak isterseniz?
Sıraya koyabilirsiniz… ancak bu, sayfada jQuery'nin iki sürümü olacağı anlamına gelir.
Bunu önlemek için WP sürümünün kaydını silmemiz gerekir.
İşte böyle görünüyor:
// özel jQuery içerir
shapeSpace_include_custom_jquery () işlevi {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Kullanmak kadar kolay wp_deregister_script () için kaydını WP'den jQuery, ardından eklemek istediğiniz jQuery komut dosyasını içerir.
Yukarıdaki örnekte, Google tarafından barındırılan jQuery kütüphanesi , ancak bunu açıkça kendi komut dosyanızın URL'si ile değiştireceksiniz.
Komut dosyalarını sıraya koymadan önce kaydetmeniz gerekmez mi?
Komut dosyalarınızı doğrudan sayfalarınıza yüklemek yerine gerektiği gibi yüklemek istiyorsanız, komut dosyasını daha önce kaydedebilirsiniz.
Örneğin, tarihinde wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Bunu yaptıktan sonra, ihtiyacınız olduğunda komut dosyalarını sıraya koyabilirsiniz:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Diğer komut dosyalarıyla çakışmamak için aynı adları kullanmayı unutmayın.
Koşullu etiketlerin kullanımı
Komut dosyalarınızı yalnızca gerektiğinde yüklemek için koşullu etiketleri kullanın.
Bu, bir komut dosyasını yalnızca belirli bir sayfada (ve yöneticinin tamamında değil) kullanmak istediğiniz yönetici bölümünde daha sık kullanılır. Aynı zamanda bant genişliğinden ve işlem süresinden de tasarruf sağlar; bu da yükleme sürelerinin daha hızlı olması anlamına gelir. Site Web.
Bir göz atın kuyruklama komut dosyalarının dokümantasyonu Daha fazla bilgi için WordPress Kodeksinde.
Eklentileri kullanarak jQuery'yi WordPress'e ekleyin
WP eklentileri dizini ayrıca yazılarınıza, sayfalarınıza veya sayfalarınıza komut dosyası eklemek için kullanabileceğiniz birçok ilginç eklenti içerir. WordPress temaları.
Aşağıda, iyi bilinen JavaScript / jQuery eklentilerine bazı örnekler verilmiştir: gelişmiş özel alanlar , Basit özel CSS ve JS , komut dosyası stilleri n et kaynak temizliği.
Kendi jQuery projenizi oluşturun
JQuery'nin daha iyi anlaşılması sadece işinizi daha etkili hale getirecektir. İster kendi web siteniz için ister müşteri projeleri için.
jQuery basitliğiyle bilinir ve (umarız) bu makalede öğrendiğiniz gibi, WordPress'e basit jQuery komut dosyaları eklemek, nasıl yapılacağını öğrendikten sonra pasta yapmak kadar kolaydır.
Evet, vanilya HTML kullanmaya kıyasla biraz ek yük var, ancak bağımlılık yönetimi ve netliğin ek faydası da var.
Sadece bu değil, jQuery WP'nin varsayılan uyumluluğunu atlamak gibi küçük hileler kullanarak, kendinize çok fazla zaman, çaba ve şişirilmiş kod kazandıracaksınız.
