WordPress'e jQuery kodunu nasıl ekleyeceğinizi öğrenmek ister misiniz? Daha fazlasını öğrenmek için okumaya devam edin.

WordPress'in bir süredir kullanılabilir olmasına ve tema komut dosyalarının ve eklentilerinin eklenmesi bir süredir olmasına rağmen, hangi yöntemin kullanılacağı konusunda hala bazı karışıklıklar var. WordPress'e komut dosyası eklemek için kullanın.

Böylece olayları netleştirmeye çalışacağız.

jQuery en yaygın olarak kullanılan JavaScript Çerçevesi olduğundan, onu bir temaya veya WordPress Plugin.

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

O zaman neden burada olduğumuza dönelim.

JQuery uyumluluk modu

WordPress'e komut dosyaları eklemeye başlamadan önce, jQuery'nin uyumluluk modunu inceleyelim. WordPress, kodunuzla kullanabileceğiniz bir jQuery kopyası ile birlikte gelir. WordPress jQuery yüklendiğinde, diğer kütüphanelerle çakışmaları önlemek için bir mekanizma olan uyumluluk modunu kullanır. WordPress'te jQuery kodu nasıl eklenir

O olup olmadığını öğren JQuery temalarınızdan ve eklentilerinizden kaldırılmalı mı? WordPress ?

Bu, dolar işaretini doğrudan diğer projelerde yaptığınız gibi kullanamayacağınız anlamına gelir. WordPress'te jQuery yazarken, bunun yerine jQuery kullanmanız gerekir.

Ne demek istediğimi görmek için aşağıdaki koda bir göz atın:

/ * Normal mod * / $ ['. Gizlenebilir']. Açık ('tıklayın', işlev () {$ (bu) .hide ();}) / * Uyumluluk modu * / jQuery ('. Gizlenebilir'). Açık ('tıklama', işlev () {jQuery (bu) .hide ();})

Bilmeniz gereken şey, birkaç değişiklikle birlikte, dolar işaretini tekrar kullanabileceğinizdir. Her zaman tüm kodunuzda "jQuery" kullanmak çok yazmayı zorlaştırır.

Göz atın geliştiriciler WordPress için 10 kod editörleri

Sadece özetlemek gerekirse, jQuery'yi biliyorsanız, $ işareti jQuery () için bir takma addır, sonra bir işlev için bir takma addır. Temel sözdizimi: $ (Seçici) .action () :

  • JQuery tanımlamak için bir dolar işareti
  • HTML öğelerini "bulmak" için bir (seçici)
  • Bu öğeler üzerinde gerçekleştirilecek bir jQuery () eylemi

Komut dosyanızı altbilgiye yüklerseniz, kodunuzu anonim bir işleve sarabilirsiniz. İşte bunu nasıl yapacağınız:

(function ($) {$ ['. hideable']. on ('tık', function () {$ (this) .hide ();})}) (jQuery);

Komut dosyanızı başlığa eklemek istiyorsanız (Mümkünse ne kaçınmalısınızBelge hazır olduğunda çalışan bir işleve sarın.

Bu arada da keşfedin Nasıl kolayca web sitenizi bozmadan WordPress'teki kod

jQuery (belge) .ready (function ($) {$ ('. gizlenebilir']. on ('tıklama', işlev () {$ (bu) .hide ();})});

Komut dosyalarınızı jQuery ile nasıl ilişkilendirirsiniz

Artık WordPress'e geçerli bir jQuery kodu yazabildiğiniz için çalışmalarımızı web sitemize bağlayacağız. WordPress'te işlem denir kuyruğa "(kuyruk sistemi). Normal bir HTML web sitesi için etiketini kullanmalıyızsenaryo> komut dosyaları eklemek için.

WordPress de aynı şeyi yapabilir, ancak bunu başarmak için WordPress'in özelliklerini kullanacağız. Bu şekilde, WordPress bizim için tüm bağımlılıklarımızı yönetir.

Bir tema üzerinde çalışıyorsanız, işlevi kullanabilirsiniz. wp_enqueue_script () dosyanızda functions.php dosya. İşte bunu nasıl yapabileceğiniz:

function my_theme_scripts () {wp_enqueue_script ('benim-harika-komut dosyası', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', doğru); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

İşlev beş argüman alır. İlkini komut dosyasına başvurmak için kullanabilirsiniz, ikincisi komut dosyasının konumu, üçüncü parametre bir dizi bağımlılıktır.

Komut dosyası kullandığı için jQuery'yi bağımlılık olarak ekledim. Bağımlı olan bir komut dosyası oluşturursanız "Benim-büyük-senaryo WordPress'in önce hangi dosyaları yüklemesi gerektiğini bilmesi için bunu bağımlılık listesine eklemeniz gerekir.

Çok keşfetmek WordPress JavaScript Nasıl yüklenir

Dördüncü parametre bir sürüm numarasıdır ve beşinci parametre, WordPress'in komut dosyasını nereye koyacağını bilmesini sağlar. Varsayılan olarak komut dosyaları, web sitesi sayfanızın yüklenmesini yavaşlattığı için kötü bir uygulama olan başlığa yüklenecektir (tarayıcılar, engellendiğinde tüm sayfanın yüklenmesini durdurur est rencontré). Beşinci parametreyi kullanarak mümkünse tüm komut dosyalarınızı altbilgiye yerleştirmelisiniz " gerçek '.

gösterge tablosunda bir komut dosyası nasıl eklenir

WordPress'e doğru jQuery kodu ekleyinAyrıca komut dosyaları gösterge paneli. Kullanılan işlevler tamamen aynıdır, yalnızca bir " kanca "farklı. Aşağıdaki örneğe bir göz atın:

function my_admin_scripts () {wp_enqueue_script ('harika betiğim', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Kullanmak yerine wp_enqueue_scripts kullanmalıyız admin_enqueue_scripts, ve hepsi bu !

Koşullu etiketlerin kullanımı

Komut dosyalarınızı yalnızca gerektiğinde yüklemeniz için koşullu etiketleri kullanın. Bu, genellikle bir komut dosyasını yalnızca belirli bir sayfada kullanmak istediğiniz kontrol panelinde kullanılır. Bu, bant genişliğinden ve işlem süresinden tasarruf sağlar, bu da web siteniz için daha hızlı yükleme süreleri anlamına gelir.

Ayrıca bizim keşfetmek Blogunuzun yükleme hızını artırmak için 10 WordPress eklentileri

Bir göz atın dokümantasyon admin_enqueue_scripts Daha fazla bilgi için WordPress Kodeksinde.

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. Etkileşimli Dünya Haritaları

Etkileşimli Dünya Haritaları bir WordPress Plugin interaktif ve renkli işaretçiler, kıtalar, ülkeler veya bölgeler ile istediğiniz kadar harita oluşturmanıza yardımcı olur.

Etkileşimli dünya haritaları

Yeni sürümüyle tamamen uyumludur. WordPress ve Görsel Besteci. Bu eklenti sayesinde, çeşitli dünya türlerini görüntüleyebilirsiniz: tüm dünyanın bir haritası, bir kıta veya bir alt kıta (Afrika, Avrupa, Amerika, Asya, Okyanusya ve tüm alt kıtaları), bir ülke, ülke bölgelerine, Amerika Birleşik Devletleri'ne, Amerika Birleşik Devletleri'nin büyükşehir bölgelerine, Amerika Birleşik Devletleri'nin eyaletlerine ve büyükşehir bölgelerine bölünmesiyle ayrılmıştır.

Indir | gösteri | Web hosting

2. Takip ile AJAX İletişim Formu

Ce WordPress Plugin iletişim veya yorum formlarını kolayca eklemenizi sağlar WordPress blog. WordPress panosundan doğrudan erişilebilen bir ayar yöneticisi ile birlikte gelir.WP-ajax-temas halindeki izleme-eklentisi-wordpress-emniyete

Başlıca özellikleri diğerleri arasında: a fe-posta için CAPTCHA matematiğinde formlar, kişiselleştirme ve yapılandırma WordPress pano üzerinden d olasılığıÖzel bir otomatikcevaplayıcı, özel CSS desteği ve daha fazlasını tanımlayın.

IndirgösteriWeb hosting 

3. Ninja Formları için PayPal Standart Ödeme Ağ Geçidi

Ninja Forms için PayPal Standart Ağ Geçidi, PayPal ödeme ağ geçidi ile sorunsuz bir şekilde entegre olan formlar oluşturmanıza olanak tanır. 

Ninja formları için Paypal standart ödeme ağ geçidi

Kişiselleştirilmiş sipariş formları oluşturabilecek ve standart Paypal hesaplarını kullanarak ödeme alabileceksiniz. Ana özellikleri şunlardır: kolay ve hızlı entegrasyon, IPN entegrasyonu, PayPal ağ geçidini bireysel formlarda etkinleştirme / devre dışı bırakma yeteneği, düzenli ödemeler için destek vb.

Indir | gösteri |  Web hosting

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

Sonuç

Buraya ! Bu eğitim için bu kadar. Umarım artık WordPress'e nasıl komut dosyası ekleyeceğinizi biliyorsunuzdur. çekinmeyin bahşişi sosyal ağlarınızda arkadaşlarınızla paylaşın.

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.

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

...