WordPress'e Kolayca jQuery Komut Dosyaları Nasıl Eklenir

Yayınlanan: 2021-09-21

WordPress, on yıldan fazla bir süredir etrafımızda. Platform erişim kolaylığı ile ünlü olsa da, WordPress temalarına ve eklentilerine jQuery eklemek birçok geliştirici için endişe kaynağıdır.

WordPress beyaz ölüm ekranı gibi sorunları düzeltme ve WordPress sitenizi bakım moduna alma konusunda daha önce kılavuzlar yazdık. Ve bu parçada, jQuery'nin WordPress'e nasıl ekleneceğini açıklayacağız, ancak buna dalmadan önce, jQuery'nin Uyumluluk moduna kısa bir genel bakış.

jQuery'nin Uyumluluk Modu

WordPress'te jQuery kullanmaya başlamadan önce jQuery'nin uyumluluk modunun ne olduğunu anlamak da aynı derecede önemlidir.

WordPress'teki jQuery önceden yüklenmiş olarak gelir ve bunu kodunuzda kullanabilirsiniz. Bununla birlikte, buradaki nokta, jQuery'nin farklı programlama dillerinin diğer kitaplıklarıyla çakışmaları önleyen uyumluluk modu ile birlikte gelmesidir.

Bu kulağa oldukça normal gelse de, bu savunma mekanizmasında ufak bir sorun var. WordPress'te jQuery kullanırken, eski güzel $ işaretimiz yerine “ jQuery ” terimini kullanmanız gerekecek.

Bu örneğe bir göz atın.

/* Normal jQuery */

$('.hideable').on('tık', function() {

$(bu).hide();

})

/* Uyumluluk modu */

jQuery('.hideable').on('tıklama', function() {

jQuery(bu).hide();

})

Şimdi buradaki sorun o kadar büyük değil, aksine pek hoş değil. İlk olarak, her seferinde “ jQuery ” yazmanız gerekir, bu oldukça fazla zaman alır ve ikincisi, bu, betiğinizin darmadağın ve okunmasını zorlaştırır.

Ancak endişelenmeyin, birkaç değişiklikle uyumluluk sorununu aşabilir ve eski güzel $ işaretini kullanabilirsiniz.

Başvuru için $, jQuery() 'nin diğer adı ve bir işlevin tanıtıcısıdır.

İşte temel bir yapının nasıl göründüğü.

$(seçici).eylem()

Burada $ işareti jQuery'ye atıfta bulunur, $(selector) HTML öğelerini bulur ve action() bu öğeler üzerinde gerçekleştirilecek eylemi tanımlar.

İşte jQuery'nin uyumluluk sorununu aşmak için yararlanabileceğiniz bazı teknikler.

jQuery'nin Uyumluluk Sorunu Nasıl Aşılır?

  1. “jQuery Stealth” Moduna girin
  2. “Çatışma Yok” Moduna Girin

jQuery'nin Gizli Moduna girin

PBS logosu

Görüntü kaynağı: Podfeet

Uyumluluk sorununu aşmanın ilk ve en yaygın yolu, gizli moda girmektir (kodunuzla gizlice hareket etmek).

Diyelim ki komut dosyasını altbilgiye yüklemeye çalışıyorsunuz. Kodu, jQuery'yi $ ile eşleyecek olan anonim bir işleve sarın.

Bu örneğe bakın

(işlev($) {

$('.hideable').on('tık', function() {

$(bu).hide();

})

})( jQuery );

Şimdi, komut dosyasını başlığa eklemek istiyorsanız, her şeyi belgeye hazır bir işleve sarın ve yol boyunca $ iletin.

İşte bir örnek.

jQuery(belge).ready(işlev( $ ) {

$('.hideable').on('tık', function() {

$(bu).hide();

})

});

Çakışma Yok Moduna Girin

Şimdi bu, uyumluluk sorunlarını aşmanın oldukça basit bir yoludur. Tek yapmanız gereken bu kod satırını betiğinizin üstüne bildirmek ve varsayılan $ işareti yerine $j kullanabilirsiniz.

var $j = jQuery.noConflict();

Artık WordPress'te jQuery'yi nasıl kullanacağınızı bildiğinize göre, ana konumuza geçelim – WordPress sitenize jQuery betikleri nasıl eklenir.

WordPress Sitelerine jQuery Nasıl Eklenir?

wordpress-vs-jquery

Resim kaynağı: fl1digital.com

WordPress'e jQuery eklemek, Enqueueing adlı bir işlemle kolayca yapılabilir.

Normal HTML web sitelerine komut dosyaları eklemek için <link> öğesini kullanırız. Aynı şeyi WordPress'te de yapabiliriz. Ancak, buna girebilmek için WordPress'in bazı özel işlevlerini oynamamız gerekiyor. Bunu yapmanın sizin için tüm bağımlılıkları halledeceğini unutmayın.

Diyelim ki bir WordPress teması üzerinde çalışıyorsunuz. Bu işlevi function.php dosyanızda kullanın.

wp_enqueue_script()

İşte nasıl göründüğü.

function my_theme_scripts() {

wp_enqueue_script( 'benim-harika-script', get_template_directory_uri() .'/js/my-great-script.js', dizi( 'jquery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'my_theme_scripts');

İşte bu işlevin alacağı beş argüman.

  1. $handle: bir komut dosyasına başvurmak için kullanılabilecek benzersiz bir tanıtıcı
  2. $src: komut dosyanızın konumu
  3. $deps: bir dizi bağımlılık belirtmek için kullanılır
  4. $ver: betiğin sürüm numarası
  5. $in_footer: WordPress'e komut dosyasının nereye yerleştirileceği konusunda talimat vermek için

Varsayılan olarak, komut dosyası web sitenizin başlığına yüklenir; bu, sitenizin hızını önemli ölçüde etkilediği için önerilmez.

İlgili: WordPress Nasıl Düzenlenir Hakkında Nihai Kılavuzunuz – HTML, CSS, PHP, JavaScript

WordPress Admin'e jQuery Komut Dosyaları Nasıl Eklenir

Aynı işlevleri kullanarak jQuery'yi WordPress yöneticisine ekleyebilirsiniz. Burada tek yapmanız gereken farklı bir kanca kullanmak.

İşte bir örnek

function my_admin_scripts() {

wp_enqueue_script( 'benim-harika-script', plugin_dir_url( __FILE__ ) .'/js/my-great-script.js', dizi( 'jquery'), '1.0.0', true);

}

add_action('admin_enqueue_scripts', 'my_admin_scripts');

Şimdi wp_enqueue_scripts'i admin_enqueue_scripts ile değiştirin ve hazırsınız.

WordPress'te jQuery Kaydı Nasıl Silinir

Ön yüklemelerden farklı bir jQuery sürümü kullanmak istiyorsanız, WordPress'in jQuery kaydını silmeniz gerekir.

İşte WordPress'te jQuery kaydını nasıl silebileceğinize dair bir örnek.

// özel jQuery ekle

function shapeSpace_include_custom_jquery() {

wp_deregister_script('jquery');

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', dizi(), null, true);

}

add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Basit. Tek yapmanız gereken wp_deregister_script() kullanarak WordPress'in jQuery'sinin kaydını silmek ve istediğiniz komut dosyasını eklemek.

Burada unutulmaması gereken bir şey, bu örnekte Google tarafından barındırılan jQuery kitaplığını eklediğimizdir. Kendi komut dosyanızın URL'si ile değiştirmeniz gerekir.

Komut Dosyalarını Sıraya Almadan Önce Kaydetmeli misiniz?

Komut dosyasını yalnızca sayfalarınızda gerektiğinde yüklenmesini istiyorsanız, işlemin başlarında kaydedebilirsiniz.

İşte bir örnek

add_action('wp_loaded', 'register_all_scripts');

işlev register_all_scripts()

{

wp_register_script(…);

}

Bununla işiniz bittiğinde, ihtiyacınız olduğunda komut dosyalarını sıraya alın. İşte nasıl.

add_action('wp_enqueue_scripts', 'enqueue_front_scripts');

add_action('admin_enqueue_scripts', 'enqueue_back_scripts');

Koşullu Etiketleri Kullanma

Ayrıca, jQuery'nizi yalnızca gerektiğinde WordPress'e yüklemek için koşullu etiketleri kullanabilirsiniz.

Bu yöntem genellikle Yönetici'de yalnızca belirli sayfalarda olmasını istediğiniz yerde kullanılsa da, çok fazla bant genişliği ve işlem süresi tasarrufu sağlayarak sonuçta sitenizin yükleme hızlarını artırır.

Ek etiketler kullanma hakkında daha fazla bilgi için WordPress'in yönetici kodlayıcı komut dosyaları belgelerine bakın.

Eklentileri Kullanarak WordPress'e jQuery Nasıl Eklenir

wordpress eklentisi

WordPress, 45000'den fazla eklentiden oluşan eklenti dizinine sahiptir. WordPress sitenizde istediğiniz herhangi bir işlevsellik için bir eklenti bulabilirsiniz.

Aynısı, WordPress site sayfalarına, temalarına ve gönderilerine vb. jQuery eklemek içindir.

İşte WordPress'e jQuery eklemek için en popüler eklentilerden bazıları.

  • Gelişmiş Özel Alanlar
  • Basit Özel CSS ve JS
  • Komut Dosyaları N Stilleri
  • Varlık Temizleme

Çözüm

Al işte ozaman, buyur. Artık WordPress jQuery'yi nasıl ekleyeceğinizi ve kullanacağınızı biliyorsunuz.

Bu bilgiyi projelerinize uygulamak, harika projeler oluşturmanıza yardımcı olacaktır. Bilginizi artırmak için JPG ve JPEG ve WordPress White Label gibi konulardaki kesin kılavuzlarımızı da okuyabilirsiniz.