WordPress'te jQuery Komut Dosyaları Nasıl Eklenir ve Kullanılır

Dinamik arama çubukları, gelişmiş ürün filtreleri ve kaydırıcılar gibi etkileşimli sayfa öğeleri, sitenizi daha kullanıcı dostu ve ilgi çekici hale getirebilir. Ancak JavaScript kullanmadan veya WordPress eklentileri kurmadan bu özelliklerden herhangi birini oluşturmak imkansızdır.

Şans eseri, WordPress'te jQuery kullanarak kolayca JavaScript tasarım öğeleri oluşturabilirsiniz. Bunu manuel olarak yapabilir veya işlemi hızlandırmak için bir eklenti kullanabilirsiniz.

Bu yazıda size jQuery'i tanıtacağız ve onu neden kullanmak isteyebileceğinizi tartışacağız. Ardından, WordPress sitenize özel jQuery komut dosyaları eklemenin iki yolunu göstereceğiz ve bazı sık sorulan soruları gözden geçireceğiz.

jQuery nedir? (ve neden kullanmak isteyebilirsiniz)

WordPress'te jQuery betiklerini nasıl ekleyeceğinizi öğrenmeden önce, jQuery'nin kendisi hakkında temel bir anlayışa ihtiyacınız olacak.

Özetle jQuery, bu kodlama dilini yazma ve kullanma şeklinizi basitleştiren hafif, açık kaynaklı bir JavaScript kitaplığıdır.

JavaScript kullanarak WordPress temalarını ve eklentilerini kolayca değiştirmenize ve geliştirmenize olanak tanır. JavaScript birçok özellik için gerekli olduğundan, bu özellik son derece yararlı olabilir.

Örneğin, Ajax, olay işleme ve DOM çaprazlama/manipülasyon için JavaScript'e ihtiyacınız var. Özellikle Ajax işlevselliği pratik ve popülerdir. Web geliştiricileri, anında arama yükleme ve gelişmiş e-ticaret ürün filtreleme oluşturmak için kullanır.

Tıklama veya arama gibi bir kullanıcı eylemi genellikle bu JavaScript özelliklerini tetikler. Kaydırıcılar, ışık kutusu açılır pencereleri ve daha fazlası gibi ek istemci tarafı özellikler oluşturmak için de jQuery'ye ihtiyacınız var.

jQuery varsayılan olarak WordPress'e dahil mi?

jQuery, WordPress kurulumunuza varsayılan olarak dahil edilen çok kullanışlı ve popüler bir kaynaktır. Sadece nasıl kullanılacağını bilmen gerekiyor! Sonraki bölümlerde, size bunu nasıl yapacağınızı öğreteceğiz.

WordPress'e jQuery komut dosyaları eklemeden önce yapılması gerekenler

Yakında WordPress'te jQuery betiklerini nasıl ekleyebileceğinizi açıklayacağız. Ama önce, çekirdek dosyalarını değiştirmeye çalışmadan önce web sitenizi korumak için birkaç şey yapmalısınız.

En önemlisi, her zaman sitenizin yedeğini almanız önerilir. Bunun nedeni, kritik web sitesi dosyalarındaki en ufak bir kodlama hatasının bile ciddi zararlar verebilmesidir. Yedekleme yaptığınızda, acil bir durumda sitenizi kolayca önceki durumuna geri yükleyebilirsiniz.

WordPress sitenizi nasıl yedekleyeceğinizden emin değilseniz veya yalnızca süreci kolaylaştıracak bir araç arıyorsanız, Jetpack VaultPress Backup mükemmel bir seçenektir.

Jetpack VaultPress Backup, sitenizdeki her değişikliği otomatik olarak kaydeder. Ardından, içeriğinizi hızlı bir şekilde kurtarmak için tek tıklamayla geri yüklemeleri kullanabilirsiniz. Jetpack, sitenizi Jetpack mobil uygulamasından geri yüklemenize bile izin verir. Ayrıca, herhangi bir sorunla karşılaşırsanız, sınıfının en iyisi müşteri desteği olan Mutluluk Mühendislerinden yardım alabilirsiniz!

Web sitenizi daha fazla korumak için bir WordPress hazırlama sitesi oluşturmaya da değer. Ardından, değişikliklerinizi canlı yayınlamadan önce test edebilirsiniz.

WordPress'e özel jQuery komut dosyaları nasıl eklenir

Artık jQuery hakkında daha fazla bilgi sahibi olduğunuza ve sitenizi büyük değişikliklere hazırladığınıza göre, WordPress'e özel jQuery komut dosyaları eklemenin iki yolunu tartışalım!

Yöntem 1: jQuery'yi manuel olarak ekleyin

Öncelikle, jQuery'yi WordPress'e manuel olarak nasıl ekleyeceğinizi göstereceğiz. Biraz geliştirme deneyiminiz varsa ve süreç üzerinde tam kontrol istiyorsanız, bu yöntem sizin için olabilir.

Temanızı güncellediğinizde yaptığınız değişikliklerin geçersiz kılınmaması için bir alt tema kullanmaya değer.

Adım 1: Uyumluluk Moduna Girin

jQuery ile ilgili harika şeylerden biri, kodlama yaparken bazı tanıdık kısayolları kullanmanıza izin vermesidir. En önemlisi, jQuery'yi temsil etmek için $ sembolünü kullanabilirsiniz. Bu size çok zaman kazandırabilir, ancak diğer bazı kütüphaneler bu kısayolu farklı bir şeyi temsil etmek için kullanır.

Bu nedenle, Uyumluluk Moduna geçmek ve jQuery için benzersiz bir takma ad oluşturmak isteyeceksiniz. Bu şekilde, diğer kütüphanelerle çakışmaları önleyeceksiniz.

Bunu aşağıdaki kodu kullanarak yapabilirsiniz:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

Yukarıdaki betiği çalıştırdığınızda, kısayol olarak $ yerine $j kullanabileceksiniz. Alternatif olarak, aşağıdakileri kullanabilirsiniz:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

Bu kod parçacığı herhangi bir çakışmayı önleyecektir. Yine de kısayol yerine tam adı olan jQuery'yi kullanmanız gerekecek.

2. Adım: Bir betik dosyası oluşturun

Artık ihtiyacınız olan koda sahip olduğunuza göre, bir komut dosyası oluşturmaya hazırsınız. Bir dosya oluşturun ve ona "my_new_script_file.js" gibi açıklayıcı bir ad verin. .js uzantısını kullandığınızdan emin olun ve tercih ettiğiniz uyumluluk kod parçasını en üste ekleyin.

Bu noktada, web sitesi dosyalarınız içinde benzersiz klasörleri olan tema dosyalarınıza erişmeniz ve bunları düzenlemeniz gerekecektir.

Dosya yöneticinizi veya FileZilla gibi ücretsiz bir Dosya Aktarım Protokolü (FTP) istemcisini kullanarak web sitenize bağlanarak başlayın.

Ardından, kök dizininizi açın. Bu, public_html veya basitçe public gibi bir adla adlandırılmalıdır. Alternatif olarak, web sitenizin adı da olabilir.

Ardından, aktif temanızın klasörünü bulun ve yeni bir alt klasör oluşturun. /js/ olarak adlandırın.  

Son olarak, yeni betik dosyanızı bu alt klasöre ekleyin. İçeriği, uygulamaya çalıştığınız özelliğe bağlı olarak farklılık gösterecektir.

3. Adım: functions.php dosyanıza bir jQuery betiği ekleyin

Ardından, temanızın functions.php dosyasını bulmanız gerekecek. Hem ebeveyn hem de çocuk temalarında bir tane olmalıdır. Burası tüm manuel özelleştirmelerin gerçekleştiği yerdir.

JavaScript, kuyruğa almayı gerektirdiğinden, wp_enqueue_script() işlevini kullanmanız gerekir. Kodunuz şöyle bir şeye benzeyebilir:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Benzersiz betik dosyanızın adını değiştirdiğinizden ve onu functions.php dosyasına eklediğinizden emin olun. Bu, tema dosyanıza önceki adımda oluşturduğunuz betik dosyasını kullanmasını söyleyecektir.

Yöntem 2: Bir WordPress eklentisi ile jQuery ekleyin

Az önce gördüğümüz gibi, özellikle WordPress'te kod düzenlemeye aşina değilseniz, jQuery'yi manuel olarak eklemek zaman alıcı ve biraz riskli olabilir. Şimdi size bir WordPress eklentisi ile jQuery'yi nasıl ekleyeceğinizi göstereceğiz.

1. Adım: Bir jQuery eklentisi kurun

Öncelikle, bir jQuery eklentisi seçmeniz gerekecek. En popüler seçeneklerden ikisi Basit Özel CSS ve JS ve Gelişmiş Özel Alanlardır.

Bu eğitim için Gelişmiş Özel Alanlar kullanacağız. Bu araç, özel blok türleriyle ilgi çekici, etkileşimli özellikler oluşturmanıza yardımcı olur.

Ücretsiz sürüm, düğme grupları, Google Haritalar, renk seçiciler, oEmbed ve çok daha fazlası gibi öğeleri eklemek için birçok yararlı blok türüne sahiptir. 30 özel bloğun tümünü istiyorsanız, Gelişmiş Özel Alanların ücretli sürümüne geçmeniz gerekir.

Tercih ettiğiniz planı seçtikten sonra, genellikle yaptığınız gibi eklentiyi yükleyip etkinleştirin. Eklenti ayarlarınızın altına herhangi bir lisans anahtarı ekleyin.

2. Adım: Yeni bir özel alan oluşturun

Eklentiyi yükleyip etkinleştirdikten sonra, Özel Alanlar → Yeni Ekle'ye gidin.

Burada, ilk alan grubunuzu oluşturmanız gerekecek. Yeni Alan Grubu Ekle'nin yanında bir başlık verin. Ardından, Değişiklikleri Kaydet'e tıklayın.

Artık yeni alanı düzenlemeye başlayabilirsiniz. Etiketin altındaki Düzenle'ye tıklayarak seçenekleri genişletebilirsiniz.

İlk olarak, Alan Türü için açılır menüyü açın ve birini seçin.

Ardından, Alan Etiketi , Alan Adı vb. alanları doldurun. Aşağı kaydırmaya devam ederseniz, Konum Kuralları ve Sunum gibi ek ayarları değiştirebilirsiniz.

Seçtiğiniz konuma bağlı olarak, yeni özel bloğunuzu orada görebileceksiniz. Blok Düzenleyicide, bloğu Alan Etiketi altında belirlediğiniz etiketle tanımlayabilirsiniz.

İşiniz bittiğinde, Değişiklikleri Kaydet'i tıklayın. + Alan Ekle butonunu seçip bu işlemi tekrarlayabilirsiniz. Bundan sonra, alanınız için seçtiğiniz konumlardan birine gidin ve onu özelleştirmeye başlayın!

WordPress'te jQuery nasıl ertelenir

Tartıştığımız gibi, WordPress'te JavaScript ve jQuery kullanmak için pek çok neden var. Aslında, birçok kullanıcının hafife aldığı bazı etkileşimli özellikler için çok önemlidirler.

Ancak dezavantajı, bu karmaşık istemci tarafı öğelerinin web sitenizi yavaşlatabilmesidir. Bu nedenle, WordPress siteniz yüklendiğinde JavaScript'i (ve uzantı olarak jQuery'yi) otomatik olarak ertelemek isteyebilirsiniz.

JavaScript'i ertelediğinizde, sitenizdeki tüm ana öğeler, daha az kritik olan JavaScript özelliklerinden önce yüklenir. Tabii ki, sitenizin ziyaretçileri muhtemelen bunun olduğunu fark etmeyecek, ancak sayfa daha hızlı yükleniyormuş gibi görüneceği için kullanıcı deneyimini (UX) iyileştirecektir.

Web sitenizde jQuery'yi otomatik olarak ertelemek istiyorsanız, bunu yapmak için Jetpack Boost'u kullanabilirsiniz.

Bu eklenti, genel olarak web sitenizin performansını büyük ölçüde artırabilir. Sonuç olarak, sayfa hızından ödün vermeden tercih ettiğiniz tüm JavaScript özelliklerini koruyabileceksiniz.

Jetpack Boost, gerekli olmayan JavaScript'i ertelemenin yanı sıra, CSS yüklemesini optimize edebilir ve yavaş görüntü yüklemeyi uygulayabilir (diğer performans optimizasyonlarının yanı sıra). Bu aracı kullanarak Önemli Web Verileri puanlarınızı yükseltebilir ve sitenizin arama sonuçlarındaki görünürlüğünü artırabilirsiniz.

WordPress'te jQuery hakkında sık sorulan sorular

Umarım, WordPress'te jQuery hakkındaki şüphelerinizin çoğunu açıklığa kavuşturmuşuzdur. Yine de gözden kaçırdığımız bir şey varsa, sık sorulan sorulardan bazılarını burada bulabilirsiniz!

WordPress'te kullanılan jQuery sürümünü değiştirebilir misiniz?

Bazen temalar ve eklentiler, sitenize jQuery sürümlerinin yerini alabilir veya ekleyebilir. Bu nedenle, sürümünüzün her zaman güncel olduğundan emin olmanız önemlidir. Bunu, jQuery Updater veya jQuery için Version Control gibi bir eklenti kullanarak kolayca yapabilirsiniz.

WordPress sitemde jQuery sürümünü nereden kontrol edebilirim?

Genellikle jQuery sürümünüzü bir tarayıcıda kontrol edebilirsiniz. Google Chrome'da, ön uçta web sitenize gitmeniz yeterlidir. Ardından Görünüm → Geliştirici → JavaScript Konsolu'na gidin.

jQuery.fn.jquery girin, konsol sitenizin geçerli sürümünü döndürmelidir.

JQuery'i WordPress'ten tamamen kaldırabilir misiniz?

Kısa cevap: evet. Sitenizde JavaScript kullanmanın sitenizin performansını olumsuz etkilediğini keşfederseniz, jQuery'yi kaldırmak veya 'kaydını silmek' isteyebilirsiniz.

Bunu yapmak için, functions.php dosyanıza aşağıdaki kodu eklemeniz yeterlidir:

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

Sayfalarınızı büyük ölçüde yavaşlatıyorsa, jQuery'yi sitenizden tamamen kaldırmanız gerektiğini unutmayın. Yine de, jQuery zaten daha ağır JavaScript kodunu optimize ettiğinden, bu muhtemelen olmayacak.

JQuery'i ekledikten sonra sitenizin hızı düştüyse, Jetpack Boost gibi bir çözüm kullanmak daha iyi bir alternatif olacaktır. Gerekli olmayan JavaScript'i erteleyebilir.

JQuery'i Vanilla JavaScript ile değiştirebilir misiniz?

jQuery'i vanilya JavaScript ile değiştirmek mümkündür. Ancak, çok fazla geliştirme deneyiminiz yoksa zorlayıcı olabilir. Bu nedenle, bunu yapmanız gerekiyorsa bir geliştirici tutmayı düşünmelisiniz.

Bir kez daha, jQuery'nin normal JavaScript ile değiştirilmesinin muhtemelen gereksiz olduğunu belirtmekte fayda var çünkü jQuery zaten en uygun JavaScript kodunu sağlıyor. Çoğu zaman, jQuery'nin küçük performans etkileri zahmete değer ve erteleme genellikle daha iyi bir seçenektir.

Bu rotayı izlemeye karar verirseniz, WordPress'e JavaScript eklemek için bu kılavuza göz atmaya değer. Süreçte size yardımcı olabilir.

WordPress'te jQuery kullanma

Sitenizdeki ilgi çekici özellikler için karmaşık JavaScript kullanmak, kullanıcı deneyimini büyük ölçüde iyileştirebilir ve hedeflerinizi ilerletebilir. Ne yazık ki, bu etkileşimli öğeleri sıfırdan oluşturmak için zamanınız veya geliştirme becerileriniz olmayabilir. İyi haber şu ki, bu işlemi kolaylaştırmak için jQuery betiklerini kullanabilirsiniz.

Özetlemek gerekirse, WordPress'e jQuery eklemenin iki yolu vardır. İlk olarak, Uyumluluk Moduna girip bir komut dosyası oluşturarak bunu manuel olarak yapabilirsiniz. Ardından, yeni betiğinizi functions.php dosyanıza ekleyin. Alternatif olarak, işlemi hızlandırmak ve manuel kodlama ihtiyacını ortadan kaldırmak için Gelişmiş Özel Alanlar gibi bir eklenti kullanabilirsiniz.

Web sitenize sofistike tasarım öğeleri eklemek için jQuery kullandığınızda, kullanıcı deneyimini geliştirebilir ve ziyaretçilerinizi etkileyebilirsiniz. Ancak birden çok etkileşimli özellik, web sayfalarınızın performansına zarar verebilir. Neyse ki, Jetpack Boost sitenizin hızını optimize etmenize yardımcı olabilir.