Ana İçeriğe Geç

doğru WordPress jQuery kodu nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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.

Bu, en çok kullanılan JavaScript kitaplıklarından biri olduğundan, bugün WordPress temalarınıza veya eklentilerinize jQuery komut dosyalarını nasıl ekleyeceğinizi tartışıyoruz.

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:

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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

Tamam, artık WordPress için geçerli jQuery kodu yazma hakkında daha fazla şey biliyorsunuz, hadi web sitemize ekleyelim.

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 '.

Klasik bir HTML web sitesi için,  <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:

  1. $ tutamaç - betiğe başvurmak için kullanabileceğiniz benzersiz bir tutamaç.
  2. $ src - komut dosyasının konumu.
  3. $ deps - bir bağımlılıklar dizisini belirtir.
  4. $ ver - betiğinizin sürüm numarası.
  5. $ 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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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 tüm yönetimde değil) kullanmak istediğiniz yönetimde daha sık kullanılır. Ayrıca bant genişliğinden ve işlem süresinden tasarruf sağlar, bu da web siteniz için daha hızlı yükleme süresi anlamına gelir.

Bir göz atın kuyruklama komut dosyalarının dokümantasyonu  Daha fazla bilgi için WordPress Kodeksinde.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Eklentileri kullanarak jQuery'yi WordPress'e ekleyin

WP eklentileri dizini ayrıca WordPress yayınlarınıza, sayfalarınıza veya temalarınıza komut dosyaları eklemek için kullanabileceğiniz birçok ilginç eklenti içerir.

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer