Ana İçeriğe Geç

doğru WordPress jQuery kodu nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

WordPress'in bir süredir kullanımda olmasına ve tema ve eklenti komut dosyalarının eklenmesinin bir süredir kullanılmasına rağmen, hala yapılması gereken yönteme dair küçük bir karışıklık var. WordPress'e komut dosyası eklemek için kullanın.

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

JQuery en çok kullanılan JavaScript çerçevesi olduğundan, onu WordPress temasına veya eklentisine nasıl ekleyeceğinizi göstereceğiz.

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.

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.

Eğer öğrenmek 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 * / $ ('. Hideable'). Açık ('klik', function () {$ (bu) .hide ();}) / * Uyumluluk modu * / jQuery ('. Hideable'). ('click', function () {jQuery (this) .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
  • A (seçici) HTML öğelerini "bulmak"
  • Bu öğeler üzerinde gerçekleştirilecek bir jQuery () eylemi

Komut dosyanızı altbilgiye yüklerseniz, kodunuzu adsız bir işleve sarabilirsiniz. İşte nasıl yapılacağı:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

(Fonksiyon ($) {$ () o (fonksiyonu 'klik' () {$ (this) .hide () 'hideable ..';})}) (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 (document) .ready (function ($) {$ () o ((fonksiyonu 'tıklayın') {$ (this) .hide () 'hideable ..';})});

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 yapabilirsiniz:

my_theme_scripts fonksiyonu () {wp_enqueue_script (benim-büyük-komut ', get_template_directory_uri () '/js/my-great-script.js', dizi (' jquery '), 1.0.0', doğru.); } ADD_ACTION ( 'wp_enqueue_scripts', 'my_theme_scripts');

İşlev beş argüman alır. Birincisi, betiği belirlemek için kullanabilirsiniz, ikincisi, betiğin dosyasının konumu, üçüncü parametre bir bağımlılıklar dizisidir.

Komut dosyası kullandığından jQuery'yi bir bağımlılık olarak ekledim. Bağımlı bir komut dosyası oluşturursanız "Benim-büyük-senaryo Bağımlılık listesine eklemeniz gerekir, böylece WordPress ilk önce hangi dosyaları yükleyeceğini bilir.

Ç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 betiği nereye koyacağını bilmesini sağlar. Varsayılan olarak, komut dosyaları web sitenizin sayfasını yüklemeyi yavaşlattığından kötü uygulama olan başlığa yüklenir (tarayıcılar bir <script> bloğuyla her karşılaşıldığında sayfayı yüklemeyi durdurur). 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, sadece " kanca "Farklı. Aşağıdaki örneğe bir göz atın:

function my_admin_scripts () {wp_enqueue_script ('harika-senaryo', plugin_dir_url (__FILE__). '/js/my-great-script.js', dizi ('jquery'), '1.0.0', doğru); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

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

Koşullu etiketlerin kullanımı

Komut dosyalarınızı yalnızca gerektiğinde yüklemek için koşullu etiketleri kullanın. Bu, komut dosyasını yalnızca belirli bir sayfada kullanmak istediğiniz en sık kullanılan gösterge panosunda kullanılır. Bu, bant genişliği ve işlem süresinden tasarruf sağlar; bu, web siteniz için daha hızlı yükleme süresi 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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Ayrıca bazı premium WordPress eklentilerini keşfedin

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

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

1. Etkileşimli Dünya Haritaları

Etkileşimli Dünya Haritaları, etkileşimli ve renkli işaretçiler, kıtalar, ülkeler veya bölgelerle istediğiniz kadar harita oluşturmanıza yardımcı olan bir WordPress eklentisidir.

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

Bu WordPress eklentisi, kolayca WordPress blogunuza kişi veya yorum formu eklemenizi sağlar. Doğrudan WordPress panosundan 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.

Indir | gösteri | Web hosting

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

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

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

Indir | gösteri |Web hosting

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Ücretsiz]

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ç

İşte bu! Bu eğitim için bu kadar. Umarım şimdi WordPress'e nasıl komut dosyası ekleyeceğinizi bileceksiniz. Tereddüt etmeyin ipucunu sosyal ağlarda arkadaşlarınla ​​paylaş.

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.

...

Bu makalede, 1 yorumunu içeren

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer