WordPress sitenize jQuery ekleyin
Bu makalede, WordPress’te jQuery’yi doğru bir şekilde nasıl devre dışı bırakacağınızı ve etkinleştireceğinizi göstereceğiz ve en son sürümü indireceğiz. Bu bilgilerin sizin için yararlı olacağını umuyoruz. Makalede birçok kod örneği olacaktır.
İçindekiler tablosu
WordPress’te ‘JQuery’ yerine ‘$’ kullanma
WordPress özel temanıza veya eklentinize jQuery nasıl eklenir
JQuery WordPress’e Nasıl Bağlanıyor
Jquery’yi WordPress’e doğru şekilde kaydedin
WordPress JQuery yükünü kontrol edin
WordPress’ten farklı bir jQuery sürümü nasıl kullanılır
WordPress JQuery nasıl güncellenir
Bildiğimiz gibi WordPress’te ‘JQuery’ yerine ‘$’ kullanan WordPress, jQuery ile birlikte gelir. Eklentinizde ve temanızda doğru kullanmak için, aşağıdaki kodu Fonksiyonlara eklemeniz gerekir.
1
Buradaki hile, varsayılan olarak JQuery kopyalarının uyumluluk modunda işlev görmesidir. Bu, ünlü $ kısayolunun işe yaramayacağı anlamına gelir. Bu, dolar işaretleri, örneğin mootools veya prototipler kullanarak diğer JavaScript kütüphaneleriyle çatışmalar yapmamak için yapılır. Birçok eklenti üreticisi ve tema geliştiricisi bunu bilir ve ürünleri güvenli hale getirmek için ‘$’ yerine jQuery kullanır.
/ * Her yerde gördüğünüz normal jQuery */
$ (“#biraz element”). Yaddayaddayadda ();
/ * “Güvenli” JQuery WordPress’te gördüğünüz */
jQuery (“#some-element”). Yaddayaddayadda ();
1
2
3
4
5
6
7
8
9
$ (“#biraz element”). Yaddayaddayadda ();
/ * “Güvenli” JQuery WordPress’te gördüğünüz */
JQuery (“#biraz element”). Yaddayaddayadda ();
Komut dosyasına birçok kez bir kuyruk yazdığınızda, okunabilirliğini karmaşıklaştırır ve aşırı komut dosyası boyutunu artırır. Sonuç olarak, site aşırı yüklenir ve daha yavaş çalışır. Bunu yapmayı bırakalım. Komut dosyası, birçok durumda yapılan altbilgiye yüklenirse, kodu anonim işlevle sarabilirsiniz. $ ona aktarılacak: (işlev ($) {
// $ Works! İsterseniz bir sonraki satırla test edebilirsiniz
// console.log ($);
}) (jQuery);
1
2
3
4
5
6
7
// $ Works! İsterseniz bir sonraki satırla test edebilirsiniz
// console.log ($);
}) (jQuery);
Başlıktaki tüm komut dosyalarını yüklemeniz gerekiyorsa, belge hazırlık özelliğini kullanmanız gerekebilir. $ oraya gönderilecek:
JQuery (belge) .Ready (işlev ($) {
// $ Works! İsterseniz bir sonraki satırla test edebilirsiniz
// console.log ($);
});
1
2
3
4
5
6
7
// $ Works! İsterseniz bir sonraki satırla test edebilirsiniz
// console.log ($);
});
Artık WordPress sitesine eklenen jQuery komut dosyalarınızda $ sembolünü güvenli bir şekilde kullanabilirsiniz. WordPress komut dosyasını WordPress sitesindeki çalıştırmak için WordPress özel temanıza veya eklentinize jQuery nasıl eklenir, uygun kütüphaneyi eklemeniz gerekir. Ancak neyse ki, WordPress yapısı gerekli tüm kütüphaneleri içermiştir. İşlevini sağlamak için, yalnızca temanıza bağlamanız gerekir. JQuery WordPress’e WordPress’e nasıl bağlanır, jQuery kitaplığı otomatik olarak bağlanır, şablonunuzda kafada aşağıdaki PHP koduna sahipseniz:
1
JQuery’yi WordPress’e doğru kaydedin, JQuery WordPress’i bağlamadan önce, HTML Kod sayfasını açın ve jQuery’nin daha önce etkin tema veya herhangi bir eklenti tarafından bağlanmadığından emin olun. Tüm bağlı WordPress komut dosyaları kaydedilmeli ve wp_enqueue_script () işleviyle yüklenmelidir. Bu, eklentinin bağlı olan belirli kütüphaneleri algılayabilmesi, bağımlılıkları tanımlayabilmesi ve aynı komut dosyasını tekrar içermemesi gerekir.
HTML kodu kodu jQuery’den bahsetmiyorsa, aktif temanın functions.php dosyasındaki bağlantıyı başlatmanız gerekir. JQuery, varsayılan olarak kaydedildiği için WordPress’e bağlanması en kolay olanıdır. WordPress JQuery kitaplığını WordPress’ten otomatik olarak bağlamak için, aşağıdaki satırları işlevlerinize eklemeniz gerekir.
İşlev tema_scripts_method () {
wp_enqueue_script (‘jQuery’);
}
Add_action (‘wp_enqueue_scripts’, ‘tema_scripts_method’);
1
2
3
4
5
6
7
wp_enqueue_script (‘jQuery’);
}
Add_action (‘wp_enqueue_scripts’, ‘tema_scripts_method’);
JQuery WordPress Yükünü Kontrol Edin Her şeyi doğru yaparsanız, ardından web sitenizdeki kaynak kodunuzda aynı satırı göreceksiniz:
1
2
3
Kaynak kodu ekranını etkinleştirmek için tarayıcı penceresinde Ctrl + U’ya basın.
WordPress’ten farklı bir jQuery sürümü nasıl kullanılır, JQuery temaya veya eklentiye bağlandığında diğer durumları göz önünde bulundurun, ancak başka bir sürüme ihtiyacınız var. Ayrıca, örneğin CDN gibi diğer kaynaklardan jQuery yüklemeniz gerekebilir. İlk olarak, önceki JQuery kaydını iptal etmeniz gerekir:
WP_DereGister_Script (‘JQuery’);
Ve sonra yeni bir tane kaydedin. Örneğin bu şekilde:
wp_register_script (‘jQuery’, ‘//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js’, false, null);
wp_enqueue_script (‘jQuery’);
1
2
3
wp_enqueue_script (‘jQuery’);
Unutmayın, wp_register_script () işlevi birkaç parametreye sahiptir: wp_register_script ($ tute, $ src, $ depers, $ ver, $ in_footer);
$ tutamak – kısayol, benzersiz komut dosyası adı;
$ src – senaryo yolu;
$ DEPS – yüklenen komut dosyası satırı;
$ ver – sürüm;
$ in_footer – altbilgiye komut dosyasını indirin.
WordPress JQuery Nasıl Güncellenir Kütüphaneyi güncelleyeceğinizde, tüm süreç iki bölümden oluşur. İlk olarak, komut dosyasını JQuery WordPress’te devre dışı bırakmanız ve ardından tekrar etkinleştirmeniz gerekir. Bunun için wp_deregister_script, wp_register_script, wp_enqueue_script işlevini kullanın. Ne demek istiyorlar?
wp_register_script – Bağlanacak komut dosyasını kaydedin (otomatik olarak yüklenmez);
WP_ENQUEUE_Script-Conct-Conct-Contains Web Siteleri/Temalar/Eklentiler için komut dosyaları;
WP_DEREGISTER_SCRIPT – Önceden kayıtlı komut dosyalarını silin.
Fonksiyondaki JQuery Güncelleme Kodu’nu tamamlayın ..php dosyası şöyle görünecektir:
// JQuery’nin eski sürümünü kaldırın ve uyumlu bir sürüm yükleyin
İşlev my_update_jquery () {
if (! Is_admin ()) {
WP_DereGister_Script (‘JQuery’);
wp_register_script (‘jQuery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, false, false, true);
wp_enqueue_script (‘jQuery’);
}
}
Add_action (‘wp_enqueue_scripts’, my_update_jquery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
İşlev my_update_jquery () {
if (! Is_admin ()) {
WP_DereGister_Script (‘JQuery’);
wp_register_script (‘jQuery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, false, false, true);
wp_enqueue_script (‘jQuery’);
}
}
Add_action (‘wp_enqueue_scripts’, my_update_jquery);
Burada bazı nüanslar var:
Ajax.googleapis.com’a bağlantı, JQuery Kütüphanesi’nden WordPress’in en son ve en son sürümüne bağlanmanıza olanak tanır. İstenirse belirli bir değeri belirleyebilirsiniz.
En son parametre olarak gerçek değer, mümkünse altbilgiye jQuery içerecektir. Burada, çıktı için WP_Head’e, ancak her temada olması gereken WP_FOOTER’a ihtiyacınız yok.
JQuery’yi güncelledikten sonra, web sitesinde yüklenen eklentinin veya komut dosyasının işlevselliğini kontrol etmek önemlidir. Bu kütüphanenin çalışmak için ihtiyaçları varsa, erken sorulmalıdır, bu yüzden belki, kodu altbilgiye taşımak her zaman en iyi çözüm değildir.
Bu kod, WordPress sisteminin temel komut dosyası yerine google cdn’den jQuery’yi bağlar. CDN Technology, en yakın sunucudan kullanıcıya dosyaları kullanmanıza olanak tanır, bu da indirmeyi hızlandırır. WordPress web sitesi HTML kodunuza daha yakından bakarsanız, jQuery ile birlikte genellikle jquery migrate.min.js adlı benzer bir komut dosyası görebilirsiniz. Bu kütüphane, şablonunuzun veya modülünüzün tüm uyumsuzluğunu önceki jQuery sürümüyle ortadan kaldırır. JQuery WordPress kütüphanesini güncellerken bu geçiş komut dosyasını terk etmeniz gerekiyorsa, önceki kod biraz farklı görünecektir:
İşlev my_update_jquery () {
if (! Is_admin ()) {
WP_DereGister_Script (‘JQuery-Core’);
wp_register_script (‘JQuery-Core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, false, false, true);
wp_enqueue_script (‘jQuery’);
}
}
Add_action (‘wp_enqueue_scripts’, my_update_jquery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (! Is_admin ()) {
WP_DereGister_Script (‘JQuery-Core’);
wp_register_script (‘JQuery-Core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, false, false, true);
wp_enqueue_script (‘jQuery’);
}
}
Add_action (‘wp_enqueue_scripts’, my_update_jquery);
