Divi ile harici JavaScript snippet’lerini kullanmak için en iyi uygulama

WordPress ve Divi, web siteleri oluşturmamızı kolaylaştırmak için birçok olağanüstü şey yapıyor. Ancak bazen sadece JavaScript ile elde edilebilecek daha karmaşık işlevlere ihtiyacımız var. Divi ile, bir çocuk teması hazırlamasanız bile, eklenti olmadan tema veya web sayfanıza JavaScript veya JQuery snippet (kod kodu) ekleyebilirsiniz. Bu öğreticide, harici JavaScript snippet’lerini Divi ile kullanmak için en iyi uygulamalardan bazılarını tartışacağız. JavaScript ve JQuery JavaScript hakkındaki hızlı kelime, web sitesinde gördüğünüz dinamik işlevselliğin arkasındaki bir mucizedir. Bu, Web için oluşturulan tüm tema dosyalarınıza erişebilen ve yalnızca HTML veya CSS ile mümkün olmayan bir tarayıcı aracılığıyla her türlü işlevi gerçekleştirebilen istemcinin kodlama dilidir.
JQuery (en popüler JavaScript kütüphanelerinden biri), web sitenize çeşitli tarayıcı türlerinde çalışacak JavaScript görüntüleri eklemeyi çok kolaylaştırdı. Bu yüzden bugün web sitesinde kullanılan birçok jQuery’yi görmek. JQuery ayrıca WordPress üzerine inşa edilmiştir, böylece Divi’ye eklediğiniz her jQuery kodu doğru şekilde biçimlendirilirse çalışır. Divi/WordPress’teki tam jQuery snippet’lerini biçimlendirmek Çoğu durumda Hazır İşlev Hazır belgesini kullanır, jQuery görüntülerinizde $ (belge) .Ready () kullanmanızı öneririm. JavaScript $ (belge) ‘e eklenen ne olursa olsun. Ready (), JavaScript çalıştırmadan önce belgenin (veya DOM) yüklenmesini ve hazır olmasını sağlayacaktır. Bu, sayfa güvenli bir şekilde manipüle edilmeye hazır olmadığında JavaScript’in çalıştırılabileceği belirli durumları önler.
Divi’de işlevi şöyle görünecek … JQuery (belge) .Ready (function () {// DOM hazır olduğunda yüklenecek jQuery kodu ekle
});
WordPress’te JQuery kullanırken “$” yerine “JQuery” yerine “JQuery” yerine, WordPress uyumluluk modunda bir jQuery sürümü ile donatılmıştır, JQuery için $ Standard çalışmaz. Bu, WordPress’te kullanabilecek veya kullanamayacağınız diğer JavaScript kütüphaneleriyle çatışmamak için korumaktır. Bunun yerine, JQuery’yi $ kısayol yerine kullanmalısınız. Yani bu … $ (belge) .Ready (function () {
$ (“P”). Tıklayın (function () {
$ (this). hide ();
});
});
Buna değiştirilmesi gerekiyor …
JQuery (belge) .Ready (function () {
JQuery (“P”). Click (function () {
JQuery (this). Hide ();
});
});
Ancak, kodu çok şişmiş tutmak ve $ kısayol kaydetmek istiyorsanız, belgeye hazır işleve iletilen bir argüman olarak $ eklerseniz jQuery yerine $ kullanabilirsiniz. Bu, $ $ ‘ı bu işlevde bulunan jQuery görüntülerinde saklamanıza olanak tanır. Böyle görünecek … jQuery (belge) .Ready (işlev ($) {
// JQuery’ye başvurmak için $ kullanarak JQuery kodu ekleyin.
$ (“Div”). Hide ();
});
Ya da belgeye hazır işlevle birlikte böyle basit bir işlevle jQuery için $ ‘a devam edebilirsiniz …
(işlev ($) {
// JQuery’ye başvurmak için $ kullanarak JQuery kodu ekleyin.
$ (belge) .Ready (function () {
$ (“Div”). Hide ();
});
}) (jQuery);
Artık JavaScript görüntülerinin nasıl biçimlendirileceğine dair en iyi uygulamalardan bazılarını anladığımıza göre, bunları divi sitenize nasıl doğru ekleyeceğinizi keşfedelim. JavaScript görüntüleri bir sayfaya kod modülünü kullanarak bir sayfaya ekleyin Divi’deki bir sayfaya bir JavaScript (veya JQuery) görüntüleri eklemek istiyorsanız, kod modülünü kullanabilirsiniz. Bu, JS’nin her sayfaya gereksiz yüklenmemesini sağlayacak ve buna ihtiyaç duymayan sayfalarda sayfalarda hafif bir artışa neden olacak. İşte nasıl yapılacağı aşağıda açıklanmıştır. İlk olarak, JS görüntüleri gerektiren sayfaları düzenlerken Divi’nin üreticisini etkinleştirin. Ardından, kod modülünü sayfanıza ekleyin.
Kod sayfada herhangi bir yerde çalışacak, bu yüzden onu nereye koymak istediğiniz size kalmış. Kod modülünü ekledikten sonra JavaScript görüntülerini yapıştırın. Kodun bir JavaScript olarak tanınması için kodu etiketine sardığınızdan emin olun.
Kodun JavaScript olarak tanınması için snippet’lerinizin etiketi ile sarılarak doğru formatta kodlandığından emin olmayı unutmayın. JQuery kullanıyorsanız, belge işlevini hazır ekleyin, böylece belgenin her için her hazırlıkta bulunduğunda. Ayrıca, kısaltmalar yerine snippet’lerinizde jQuery kullanmalısınız.