Divi ile Harici JavaScript Parçacıklarını Kullanmak İçin En İyi Uygulamalar

WordPress ve Divi, bir web sitesi oluşturmamızı kolaylaştırmak için kutudan çıktığı gibi birçok harika şey yapıyor. Ancak bazen yalnızca JavaScript ile gerçekleştirilebilecek daha gelişmiş işlevlere ihtiyaç duyarız.

Divi ile, bir alt temanız olmasa bile, eklenti olmadan temanıza veya web sayfanıza JavaScript veya jQuery snippet'lerini (kod parçaları) kolayca ekleyebilirsiniz. Bu öğreticide, Divi ile harici JavaScript snippet'lerini kullanmak için bazı en iyi uygulamaları gözden geçireceğiz.

JavaScript ve jQuery Üzerine Hızlı Bir Söz

JavaScript, bir web sitesinde gördüğünüz dinamik işlevselliğin arkasındaki sihirdir. Tüm tema dosyalarınıza erişebilen ve yalnızca HTML veya CSS ile mümkün olmayan her türlü işlevi tarayıcı üzerinden gerçekleştirebilen web için oluşturulmuş bir istemci tarafı kodlama dilidir.

JQuery (en popüler JavaScript kitaplıklarından biri), web sitelerinize farklı tarayıcı türlerinde çalışacak JavaScript parçacıkları eklemeyi gerçekten kolaylaştırdı. Bu nedenle bugün web sitelerinde çok fazla jQuery kullanıldığını görüyoruz. JQuery ayrıca WordPress'te yerleşiktir, bu nedenle Divi'ye eklediğiniz herhangi bir jQuery kodu, düzgün biçimlendirilmişse çalışır.

Divi/WordPress'te Doğru JQuery Snippet Biçimlendirmesi

Belge Hazır İşlevini Kullanma

Çoğu durumda, jQuery snippet'lerinizde $(document).ready() kullanmanızı öneririm. $(document).ready() eklenen herhangi bir JavaScript, JavaScript'i çalıştırmadan önce belgenin (veya DOM'nin) yüklendiğinden ve hazır olduğundan emin olur. Bu, sayfa güvenli bir şekilde manipüle edilmeye hazır olmadığında JavaScript'in yürütülebileceği belirli durumları önler.

Divi'de fonksiyon şöyle görünmelidir…

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

WordPress'te jQuery kullanırken “$” yerine “jQuery” kullanma

WordPress, uyumluluk modunda zaten bir jQuery sürümüyle birlikte geldiğinden, jQuery için standart $ çalışmaz. Bu, WordPress'te kullanabileceğiniz veya kullanamayacağınız diğer JavaScript kitaplıklarıyla çakışmasını önlemek içindir. Bunun yerine, $ kısayolu yerine jQuery kullanmanız gerekecek.

Yani bu…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Buna dönüştürülmeli…

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Ancak, kodu daha az şişirmek ve bu $ kısayollarını korumak istiyorsanız, belgeye hazır işlevine geçirilen bir argüman olarak $ eklerseniz, jQuery yerine $ kullanabilirsiniz. Bu, $ değerini o işlevde bulunan jQuery snippet'inde tutmanıza izin verecektir.

İşte böyle görünecek…

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Veya jQuery için $ jQuery belgeye hazır işleviyle birlikte bunun gibi basit bir işlevle iletebilirsiniz…

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

JavaScript snippet'lerinin nasıl biçimlendirileceğiyle ilgili bazı en iyi uygulamaları anladığımıza göre, bunları Divi sitenize nasıl düzgün şekilde ekleyeceğinizi keşfedelim.

Kod Modülünü Kullanarak Tek Bir Sayfaya JavaScript Parçacıkları Ekleme

Divi'de tek bir sayfaya javascript (veya jquery) parçacığı eklemek istiyorsanız, Kod Modülünü kullanabilirsiniz. Bu, JS'nin gereksiz yere her sayfaya yüklenmemesini ve buna ihtiyaç duymayan sayfalarda sayfa yükleme süresinde küçük bir artışa neden olmamasını sağlayacaktır.

İşte nasıl yapılacağı. İlk olarak, JS snippet'ine ihtiyaç duyan sayfayı düzenlerken divi oluşturucuyu etkinleştirin. Ardından sayfanıza bir kod modülü ekleyin.

Kod sayfanın herhangi bir yerinde çalışacak, bu yüzden nereye koymak istediğiniz size kalmış.

Kod modülünü ekledikten sonra JavaScript snippet'ini yapıştırın. Kodun JavaScript olarak tanınması için kodu bir <script> etiketine sardığınızdan emin olun.

Kodun JavaScript olarak tanınması için <script> etiketiyle sararak snippet'inizin düzgün biçimde kodlandığından emin olmayı unutmayın. Ve jQuery kullanıyorsanız, belge hazır olduğunda yüklenmesi için belgeye hazır işlevini ekleyin. Ayrıca, snippet'inizde $ kısayolu yerine jQuery kullanmanız gerekecektir.

Bu kadar! Snippet'iniz sayfada beklendiği gibi çalışmalıdır.

Not: <script> etiketi genellikle <script> ortam türünü aşağıdaki gibi belirtmenizi gerektirir…

<script type="text/javascript">
</script>

Ancak, "metin/javascript" varsayılan tür olduğundan, onu JavaScript kod parçacıkları için kullanırken onu dışarıda bırakmakta bir sakınca yoktur.

Divi Tema Seçeneklerini Kullanarak Tüm Sayfalara/Gönderilere JavaScript Parçacıkları Ekleme (alt tema gerekmez)

JavaScript parçacıkları, Divi'nin Tema Seçenekleri altındaki kod entegrasyonu sekmesi kullanılarak da Divi'ye eklenebilir. Bu yöntem, web sitenizin tüm sayfalarına/yayınlarına yüklemek istediğiniz JS parçacıkları için iyi çalışır. Bu, bir alt temanız yoksa veya Divi sitenize eklenmesi gereken yalnızca birkaç JS parçacığınız varsa ve bunları harici bir JS dosyasına eklemek istemiyorsanız iyi bir seçenektir.

Kod entegrasyonu bölümünü bulmak için Divi > Tema Seçenekleri'ne gidin ve Entegrasyon sekmesine tıklayın.

JavaScript Snippet'inizi Nereye Koyacağınızı Bulmak

Orada Divi sitenize özel kod ekleyebileceğiniz dört alan göreceksiniz. Çoğu durumda, gövdeye JS parçacıkları eklemek en iyisidir. Bu aslında snippet'inizi sayfanızın altına yerleştirir, böylece sayfa yükleme hızı için harika olan her şeyden sonra yüklenir. Bazı durumlarda, kodun daha erken yüklenebilmesi için (veya belgeniz JavaScript'in daha erken çalışmasına bağlıysa) kodu başa eklemek isteyebilirsiniz. Bu nedenle, size en iyi performans, zamanlama ve işlevsellik dengesini sağlayan en iyi seçeneği test etmeniz ve karar vermeniz gerekecektir.

Örneğin, başlığınıza stil ekleyen bir jQuery snippet'iniz olabilir. Bu durumda, onu gövdeye (sayfanın sonunda) yüklemek istemezsiniz çünkü başlık, snippet okunana kadar başlangıçta bu stil olmadan yüklenir. Bu, ziyaretçilerinizin kısa bir an için çirkin görünmesine neden olur. Ancak, kafaya yükleseydiniz, şekillendirmede bu gecikme olmazdı.

Yalnızca blog gönderileri için geçerli olan kodunuz varsa, JS snippet'ini gönderilerinizin altına eklemeyi de seçebilirsiniz. Bu, kodun gereksiz yere başka sayfalara yüklenmesini önleyecektir.

Kod entegrasyon alanları, kodu doğrudan sayfanıza ekleyecektir, bu nedenle kod snippet'lerinizi <script> etiketiyle sarmanız gerekir.

Ayrı bir JS dosyasından Divi'ye JS parçacıkları ekleme (bir alt tema kullanarak)

Divi siteniz için her zaman bir alt tema kullanmanız önerilir. Alt tema kurulumunu doğru bir şekilde yaptıktan sonra, özel JS parçalarınızı tutmak için kullanılabilecek bir JS dosyası da dahil edebilirsiniz.
Bu kesinlikle WordPress sitelerinde javascript kullanmanın tercih edilen yoludur ve Divi ile de iyi çalışır.

Alt temanızda JS dosyası oluşturma

Özellikle tema dosyalarında değişiklik yapmayı planlıyorsanız, bir Divi alt teması kurmak her zaman harika bir fikirdir. Bir Divi alt teması oluşturduktan sonra, tüm JS snippet'lerinizi tek bir yere yerleştirebileceğiniz bir JavaScript dosyasını kolayca oluşturabilirsiniz.

İşte nasıl yapılacağı.

Bir JavaScript dosyası oluşturun ve onu Alt Tema Klasörünüze ekleyin

Bir kod düzenleyici kullanarak yeni bir dosya oluşturun ve bunu bir JavaScript dosyası olarak kaydedin. Örneğin, dosyayı "scripts" adıyla "js" türü olarak kaydettiyseniz, tam dosya adı "scripts.js" olur. Divi'ye eklenmesini istediğiniz tüm js parçacıklarını ekleyeceğiniz yer burasıdır. Dosya bir js dosyası olarak kaydedildiğinden, parçacıkları bir <script> etiketine sarmanız gerekmez.

Dosya oluşturulduktan sonra, onu alt tema klasörünüze eklemeniz gerekir. Daha iyi organizasyon için özel js dosyalarımı tutmak için bir js klasörü oluşturmayı seviyorum. Bunu yapmak için, alt tema klasörünüzün kökünde “js” adında yeni bir klasör oluşturun ve “scripts.js” dosyasını bu klasöre ekleyin.

Alt Temanızın Functions.php dosyasındaki Komut Dosyalarını Sıralama

Şimdi js dosyasını Divi'ye yüklenmesi için kuyruğa almamız gerekiyor. Halihazırda oluşturulmuş bir alt temanız varsa, alt tema için style.css dosyasını zaten kuyruğa aldığınız yerde, aşağıdaki gibi görünmesi gereken bir function.php dosyanız olmalıdır…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Şimdi aynısını yeni js dosyanız için yapmanız gerekecek. Bunu yapmak için, işleve aşağıdaki parçacığı eklemeniz gerekir.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

style.css ve scripts.js dosyasını kuyruğa almak için gereken son kod şöyle görünür…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Son düşünceler

Web tasarımında yeniyseniz veya Divi'ye yeni başlıyorsanız, JavaScript'i veya onu web sitenize nasıl ekleyeceğinizi bilmiyor olabilirsiniz. Umarım bu gönderi, sizi doğru yöne yönlendirmek ve deneyimli web geliştiricilerinin bile takdir edebileceği en iyi uygulamaları sağlamak için yardımcı olmuştur.

Yorumlarda sizden haber bekliyorum.

Şerefe!