JavaScript'i WordPress'e nasıl yükleyeceğinizi öğrenmek ister misiniz?

Tüm WordPress tema genellikle PHP, HTML, CSS ve JavaScript dosyalarından oluşur. JavaScript, geliştiriciler arasında popüler bir programlama dilidir. WordPress tema. Bir HTML sayfasını etkileşimli yapan ve ayrıca sunucuyla etkileşime girmenize izin veren bir dildir.

Web sitenizde nasıl kullanacağınızı bilmek büyük bir avantaj olacaktır.

Gerçekten JavaScript kullanmak için, web sitenize nasıl yükleyeceğinizi bilmeniz gerekir.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

JavaScript WordPress yüklemek için nasıl

Bir adım geri gidelim ve WordPress'in komut dosyalarını ve stilleri nasıl yüklediğine ilk göz atalım. JavaScript dosyalarını oluştururken, bunları üstbilgi bölümünde veya altbilgide sayfanıza ekleyebileceğinizi öğrendiniz.

Ayrıca öğreticimizi keşfedin CSS, HTML ve Javascript dosyalarınızı nasıl sıkıştırabilirim?

WordPress de tam olarak aynı şeyi yapar, ancak bu komut dosyası etiketlerini yalnızca başlık veya alt bilgi dosyanıza bırakamazsınız. WordPress tema. WordPress “adlı akıllı bir yükleme mekanizması kullanıyor” kuyruğa '.

Bu mekanizma bağımlılıklara anlam vermek için gereklidir. WordPress temanız için jQuery kodu yazıyorsanız, önce jQuery'nin yüklenmesi gerekir.

Bir jQuery eklentisine dayanan bir kod yazarsınız. Bu durumda, önce jQuery, sonra jQuery eklentisi, sonra kodunuz yüklenmelidir.

"Kod" nasıl eklenir? (Sıraya Ekle)

Komut dosyalarını WordPress tema klasörünüzde veya WordPress Plugin. İşte jQuery'ye dayanan bir komut dosyası eklemek için tam kod:

my_theme_scripts işlevi () {

 wp_enqueue_script ('betiğim ", get_template_directory_uri ().' /js/my-script.js ', dizi (' jquery '),' 1.0.0 ', doğru);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Her şeyden önce bir işlev "olmalıdır" bağlı WordPress Üzerine (Kancalar WordPress kullanarak). Fonksiyonun ilk argümanı ADD_ACTION () WordPress'e bu komut dosyalarının nereye yerleştirilmesi gerektiğini söyler:

• Kamusal alanda
• Gösterge tablosunda

Eğer kullanırsan " wp_enqueue_scripts Kullanırsanız kamusal alana yüklenecekler " admin_enqueue_scripts Kontrol paneline yüklenecekler.

«Fonksiyonunda ADD_ACTION Kullanabilirsiniz " wp_enqueue_script Senaryoları eklemek için ihtiyacınız var. İşlev gerekli bir parametre ve dört isteğe bağlı parametre alır:

• İlk parametre, komut dosyanızın adıdır. Ne istediğinizi seçebilirsiniz, ancak benzersiz bir ad kullandığınızdan emin olun.
• İkinci parametre, dosyanın WordPress temanızdaki konumunu içermelidir veya WordPress Plugin.
• Üçüncü parametre bir dizi bağımlılık içerir. Yukarıdaki örnekte jQuery bir bağımlılıktır dedim. Tüm bağımlılıklar söz konusu komut dosyasından önce yüklenir.
• Dördüncü parametre bir sürüm numarasıdır
• Beşinci ve son parametre, komut dosyasını üstbilgiye mi yoksa altbilgiye mi yüklemek istediğinizi belirtir. Altbilgide yüklemek için "doğru" veya üstbilgiye komut dosyasını yüklemek için "yanlış" kullanınAyrıca bu parametreyi dolduramazsınız).

Outbuildings

WordPress, jQuery'nin bir kopyasını sunar, bu nedenle onu herhangi bir güçlük çekmeden bağımlılık olarak ekleyebilirsiniz. WordPress'in sunduğu bir dizi başka jQuery betikleri ve eklentileri vardır. Kodunuz bunlardan birine bağlıysa, kopyalarınızdan birini kullanmak zorunda değilsiniz, onu bağımlılık olarak eklemeniz yeterli. burada bir teklifleri WordPress komut listesi.

Birden çok bağımsız komut dosyası eklerseniz, bunları tamamen aynı şekilde bağımlılık olarak ekleyebilirsiniz. Aşağıdaki örneğe bir göz atın:

my_theme_scripts işlevi () {

 wp_enqueue_script ("benim-temel komut dosyası", get_template_directory_uri (). '/js/my-base-script.js', dizi ('jquery'), '1.0.0', doğru);

 wp_enqueue_script ("komut dosyam-uzantım", get_template_directory_uri (). '/js/my-script-extension.js', dizi ("komut dosyam-tabanım '),' 1.0.0 ', doğru);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

İlk komut dosyası jQuery'ye bağlı olduğundan, sonraki komut dosyası da ona bağlıdır. Bu yüzden, her ikisine de bir bağımlılık olarak jQuery eklemeniz gerekmez. Bu bağımlılık yönetimini kolaylaştırır.

koşullu Yükleme

Bazen komut dosyanızı her sayfada kullanmak istersiniz, ancak çoğu zaman belirli bir sayfaya bir komut dosyası yüklemek istersiniz. Bu, özellikle kontrol paneline komut dosyaları eklemeyi düşünürken doğrudur. İyi bir örnek kısa kodların kullanımı. Kısa kodlar, kullanıcıların birkaç basit numara kullanarak görsel metin düzenleyicide gelişmiş görüntüler oluşturmasına olanak tanır.

my_theme_scripts işlevi () {

 wp_register_script ('betiğim', get_template_directory_uri (). '/js/my-script.js', dizi ('jquery'), '1.0.0', doğru);

 wp_enqueue_script ('betiğim');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Komut dosyasını, WordPress'in komut dosyasını öğrenmesini sağlamak için kaydettik, ancak " enqueue ". Bu şekilde, komut dosyası yalnızca bu sayfada kısa kod kullanılıyorsa sayfaya eklenir.

Koşullu komut dosyalarını yüklemenin başka bir yöntemi de koşullu işlevleri kullanmaktır. Kategorinin tüm arşiv sayfalarına bir komut dosyası yüklemek istiyorsanız, işlevini kullanabilirsiniz. is_category ().

Örneğin, kullanıcıların makaleye ekleyebilecekleri bir resim döngüsü oluşturabilirsiniz: [carousel ids = '42,124,123,331,90, XNUMX ′]. Kimlikleri ile belirlenen resimler kullanılarak makale sayfasında bir döngü oluşturulacaktır.

Bunu yapmak için bir dosya oluşturmalısınız " carousel.js Hangi jQuery dayanmaktadır. İşte oraya ulaşmak için bir kod (Atlıkarınca oluşturmaz, ancak yükleme işleminin nasıl gerçekleştiğini görmenizi sağlar):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts işlevi () {

 wp_register_script ('karuselim', get_template_directory_uri (). '/js/my-carousel.js', dizi ('jquery'), '1.0.0', doğru);

}

add_shortcode ('atlıkarınca', 'karuselim');

my_carousel işlevi ($ args) {

 $ atts = shortcode_atts (dizi (

 'Kimlikler' => ",

 ), $ Atts, 'atlıkarınca');

 wp_enqueue_script ('atlı karıncam');

 // Atlıkarıncayı burada görüntülemek için kod

}

komut dosyalarını kaldırma ve değiştirme

Bu, şu ana kadar ortak bir senaryodur, ancak bazen bir komut dosyasını kaldırmanız veya değiştirmeniz gerekebilir. Bir eklentinin eklediği bir betiğin bulunduğu durumlara düştüm (ancak tema tarafından kullanılmıyor) uyumluluk sorunlarına neden oldu. Hata tamamen ortadan kalktığı için "geri çekme" en iyi seçenekti.

Yeni sürümlerle uyumlu olacağından emin olmak için bir şeyi test ediyorsanız, jQuery'yi daha yeni bir sürümle de değiştirebilirsiniz.

Bu durumlarda fonksiyonlar wp_deregister_script () "Ve" wp_dequeue_script () Yararlı. WordPress'te önceden eklenmiş kodları burada bulabilirsiniz.

my_theme_scripts işlevi () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', doğru);

 wp_enqueue_script ('betiğim', get_template_directory_uri (). '/js/my-script.js', dizi ('jquery'), '1.0.0', doğru);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

nihai düşünceler

WordPress'e bu yükleme yöntemi harika çünkü komut dosyalarınızı modüler bir şekilde eklemenize izin veriyor. Bu, bağımlılıkların modüler bir şekilde eklendiğinden emin olmanızı sağlayacaktır.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Premium SEO Paketi

Premium SEO Paketi bir WordPress Plugin SEO'nuzu optimize eder ve web sitenizin yükleme hızını artırmak için CSS'yi sıkıştırır.

Eklenti ayrıca web sitenizin tasarımını birkaç tıklamayla yönetmenize olanak tanır. Özellikleri şunları içerir: CSS ve JS sıkıştırma, video ve snippet site haritası entegrasyonu, HTML ve XML dosya biçimlendirme, 404 ve 301 sayfa yeniden yönlendirme, sosyal medya paylaşımı, sağlama ALT etiketi, son derece özelleştirilebilir düzen

Indir | gösteri | Web hosting

2. Nakliye için Woocommerce Teslim Süresi Seçici

Woocommerce Teslimat Süresi Seçici, müşterilerin ödeme sayfasında teslimat tarihini ve saatini seçmelerine olanak tanıyan bir WooCommerce uzantısıdır. 

Müşteriler, paketin teslim süresini evde seçebileceklerdir. Teslim süresi web sitesinin yöneticileri tarafından görülebilecek ve ayrıca e-posta yoluyla web sitesinin yöneticilerine veya çevrimiçi mağazaya gönderilecektir.

Indir | gösteri | Web hosting

3. Menü Kahraman

Bu eklenti, oldukça kolay birkaç adımda kendi özel WordPress menünüzü oluşturmanıza olanak tanır. Özellikle, zarif ve profesyonel bir WordPress menüsünü kolayca ve sezgisel olarak oluşturmanıza olanak tanır. 

Özelliklerle dolu en karmaşık mega menüden, açılır menüyle en basit menüye, WordPress eklentisi HeroMenu her türlü menüyü kurar ve dakikalar içinde çalışır hale getirir.

Diğerlerinin yanı sıra sunduğu özellikler açısından: PC, tablet ve akıllı telefonlarda mükemmel çalışma Özel CSS menüye kendi stillerinizi eklemek için, bir megamenu üreticisi, desteklenen birçok tarayıcı: Chrome, Firefox, Safari, Opera, IE9 ve daha fazlası.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Diğer yaygın WordPress hatalarını çözmenize yardımcı olacak diğer önerilen kaynaklara göz atın. 

• WordPress hataları yönlendir Nasıl saptamak
• Elementor ile özel bir düzen oluşturmak için nasıl
• kuruluşunuz için bir intranet WordPress nasıl oluşturulur
• WordPress üzerinde bir giriş sayfası oluşturmak için nasıl

Sonuç

Burada ! Bu eğitim için bu kadar, umarım WordPress'e JavaScript'in nasıl yükleneceğini anlamanıza yardımcı olmuştur. Arkadaşlarınızla paylaşmaktan çekinmeyin. sosyal ağlar tercih edilir. 

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Ama bu arada, bize Yorumlar ve özel bölümdeki öneriler.

...