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.
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
Ayrı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.
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.
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.
Indir | gösteri | Web 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.
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.
- WordPress üzerine etkili bir kategori ve etiketleri nasıl kullanılır
- Mobil WordPress için tepkili bir menü oluşturmak için nasıl
- kuruluşunuz için bir intranet WordPress nasıl oluşturulur
- WordPress bir eklenti yüklemeniz nasıl
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.
...
Çok teşekkür ederim. Bunu bir saatliğine $ işaretiyle yapmaya çalışıyorum. Jquery kullanmak sorun değil.