WordPress Geliştiricileri için JavaScript: JQuery ile Başlayarak
JQuery, etkileşimli web siteleri oluşturmanıza ve animasyonlar oluşturmanıza olanak tanıyan popüler bir JavaScript açık kaynak kütüphanesidir. Bu, müşterinin HTML komut dosyasını basitleştirmek ve Web’deki en yüksek ticarete sahip 10 milyon sitenin% 65’inde kurulumla yaygın olarak kullanılacak şekilde tasarlanmıştır. Bu, WordPress geliştiricileri için JavaScript’e odaklanan beş bölümümüzdeki üçüncü gönderi. Bu dizi boyunca temel bilgileri öğreneceksiniz, ancak bence zaten HTML ve CSS hakkında bilginiz var. Bu yapı taşı ile ilgili yardıma ihtiyacınız varsa, yeni başlayanlar için WordPress’in gelişimi hakkındaki dizimize bakın.
Önceki iki öğreticide, sözdizimi, değişkenler ve işlevler ve javascript nesneleri dahil olmak üzere temel – temel javascript görüyoruz. Bu öğretici, WordPress sitemize olağanüstü işlevsellik eklemek için kullanacağımız JQuery’yi kullanmaya hazırlamalıdır. WordPress geliştiricilerimiz için JavaScript serisindeki öğreticiyi özlüyor musunuz? Beş yazıyı buradan takip edebilirsiniz:
WordPress Geliştiricileri için JavaScript: Temelleri inceleyin
WordPress Geliştiricileri için JavaScript: Nesnelerle Başlamak
WordPress Geliştiricileri için JavaScript: JQuery ile Başlayarak
WordPress Geliştiricileri için JavaScript: WordPress’e JavaScript Yükle
WordPress Geliştiricileri için JavaScript: Ajax kullanma
Başlamadan başlayarak, hepimizin aynı yerden başladığından emin olun. Bu öğretici için tek ön koşul, dosyaları düzenleme yeteneği ile WordPress sitesine erişimdir. Sitede doğrudan denemeyi önermiyorum, bu yüzden lütfen yerel bir test veya kopya kurulumu kullanın. WordPress kurulumlarını yerel olarak yönetmenize yardımcı olacak birkaç makalemiz var, bu, internet bağlantınıza güvenmeyeceğiniz için testi çok daha hızlı hale getirecektir. Windows kullanıcısıysanız, PC/Windows’a yerel olarak XAMPP ve WordPress’i nasıl yükleyeceğinizi görün. Linux veya OSX kullanıyorsanız, MAMP makaleleriyle WordPress’in yerel olarak nasıl geliştirileceği makalemizi açın. Şahsen her iki sistemde kullanılabilecek vagrantları tercih ediyorum, ancak bunlardan biri burada amacımız için iyi olacak. Çocukların temalarını yapmak, test için WordPress varsayılan temasını, yirmi on altı kullanalım. Mevcut tema kodunu değiştirmek kötü bir uygulamadır, bu nedenle bir çocuk teması yapacağız. Çocuğun teması, belirlenmedikçe tüm işlevlerini ana temadan devralır. Tema klasörünüzde JQuery-Test-Theme adlı yeni bir dizin oluşturun. Style.css, scripts.js ve functions.php. Stil sayfasına aşağıdakileri ekleyin ve kaydet:
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Function.php’e aşağıdakileri ekleyin ve kaydet:
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Burada neler olduğunu anlamıyorsanız endişelenmeyin, sadece test ortamımızı hazırlıyoruz, şimdilik yaklaşan JavaScript koduna odaklanıyoruz. Kodu yerine girdikten sonra, çocuğunuzun temasını görünümde göreceksiniz.
Görünüş bölümünde çocuğumuzun teması. WordPress WordPress olmadan jQuery sizin için jQuery içerir, ancak WordPress üzerinde çalışmıyorsanız, yazdığınız herhangi bir jQuery kodundan önce kendiniz girmelisiniz. Bir kopyasını almak için jQuery web sitesini açın. JQuery JQuery’nin temelleri, esas olarak DOM’ların geçişi ve manipülasyonu için kullanılan (sayfada bir şeyler bulun ve değiştirin), olayları (tıklatırken ne yaptığını değiştirme, imleci, vb. asenkron yükleme). Bu öğreticide ilk ikisine odaklanacağız. Dom’un geçiş ve manipülasyonu ile başlayalım.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Bu, aşağıdaki oldukça çirkin görünüme benzer bir şey üretecektir.
JQuery ile Değiştirilmiş Öğeler
Birçok unsurla eşleşen seçmenleri kullanırsanız, her şeyi aynı anda değiştirebilmeniz için her şey jQuery tarafından alınacaktır. Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Değiştirilmiş Widget başlıkları
Seçmek istediğiniz öğeleri mükemmelleştirmek için bir dizi seçici kullanılabilir. Örneğin, bir bölümden verilen dizinleri olan öğeleri seçmek için: eq () kullanabilirsiniz. Yalnızca ilk widget başlığını kırmızı yapalım. Ana Çekirdek 36D467F72129E4C6177CE13D8F61C032 Seçmenler: GT () Verilenden daha büyük bir endeksi olan öğeleri seçin. Üçüncülükten sonra tüm widget başlıklarını renklendirelim:
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Dizin her zaman 0’dan başlar, yani 2 aslında üçüncü öğedir. Üçüncü elemandan sonra her şeyi geri renklendirdiğimiz için, renklendirilecek ilk öğe aslında dördüncü. Seçici: Not () öğeleri seçeneklerden silin. Kategori widget’dakiler hariç tüm başlıkları yeniden çözmek için kullanabiliriz.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Seçmenleri kullanmayın
JQuery belge sayfasındaki seçmenlerin tam listesine bakın. Crossing Dom Jquery, Dom’u geçmenize izin veren birçok işlev sunar. Seçilen DOM düğümünden başlarsınız ve ardından son hedefinize ulaşmak için geçiş işlevini kullanırsınız.
Farklı bir yöntem kullanarak widget’ın başlığını yeniden çözmek için bu işlevlerden bazılarını kullanalım. Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Başlangıçta, yan çubuğun bir kabı olan bir kenara seçtik. Daha sonra tüm çocukları doğrudan düğümden almak için Children () işlevini kullanırız. Bizim durumumuzda, bu widget içeren parçanın bir unsurudur. Son olarak, verilen seçmenlerle öğeler bulmak için Find () kullanıyoruz – H2 – ve bu öğeleri renklendiriyoruz.
Seçtiğiniz şekilde dikkatli olun! Widget’taki tüm H2 öğelerini seçtiğimiz için, Widget’ın başlığını değil, içindeki başlığı renklendirebiliriz. Widget başlığı olan widget’ın arka planını yeniden çözmek için kullanabiliriz. Bu, başlığı olmayan arama widget’ını hariç tutacaktır.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Elemanları uygun şekilde belirlemek için kullanabileceğiniz bir dizi yararlı geçiş işlevi vardır. İçeriğinizi değiştirmek, birkaç jQuery işlevini kullanarak sayfaya içeriği silebilir, ekleyebilir veya değiştirebilir. İçerik eklemenin en temel yolu, içerik enjekte etmek için öğeleri seçmek ve öğeleri seçmek ve HTML () veya text () kullanmaktır.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Html () HTML olarak girdiğiniz dizeyi ele alır, etiket doğru öğeye dönüştürülür. Metin dizeleri metin olarak ele alır, etiketler dönüştürülmez, çıktı olduğu gibi. Append () ve Prend () işlevleri, seçilen öğelerde yer alan içerikten önce ve sonra içerik ekleyebilir.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
Site açıklamasına metin ekleyin
Düzenlemenizin özelliğini ve öğelerini değiştirmek birkaç stil gördü – yukarıdaki örnek kodların çoğunda CSS () işlevini kullandım. Bu işlev, birkaç özellik ve CSS değerini uygulamak için kullanabileceğiniz nesneleri alır. Aşağıda, yayın başlığını değiştiren bir örnek:
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir
JQuery ile Stil Düzenleme
AddClass () işlevi, bunun yerine stil sayfamıza kuvvet ekleyebilmemiz için verilen sınıfı ekler. Sınıfları silmek için Removeclass () veya etkinleştirmek için ToggleClass () kullanabilirsiniz. HTML özniteliklerini değiştirmek için bir attr function () gerekir. Bir parametre ile kullanılırsa, öznitelikler alır, iki parametre kullanırsanız, verilen değere verilen öznitelikleri ayarlar.
Çekirdek 36D467F72129E4C6177CE13D8F61C032 içerir İlk satır kimliği verilen öğeden döndürür. İkinci sıra, kimliği verilene değiştirir. JavaScript ile şimdi daha geniş bir veri özniteliği daha yaygın hale geliyor. Bu, özel verilerimizi HTML öğesine eklemek için kullanılır. JQuery kullanarak yayınları silmek istersem, HTML öğesinden kimliği okumanın bir yoluna ihtiyacım var. Şu anda bu mümkün, ancak kimliği görmem, “post-” dizesini silmem ve geri kalanını sayısal bir kimlik olarak kullanmam gerekiyor. Bunun gibi bilgiler genellikle veri özniteliklerinde saklanır, şöyle görünür:
. Bu değeri almak için attr (‘data-id’) kullanabilirsiniz, ancak JQuery’nin bir kısayol: veri işlevi () vardır. Attr () ile aynı şekilde çalışır. Kimlik gibi bir parametre verirseniz, Data-ID’den bir değer alır. JQuery Events’teki etkinlik, belirli kullanıcı eylemlerine yanıt vermenizi sağlar. İmleciyi yönlendirirken, kullanıcı ekranın altına ulaştığında uygulanan uygulama açısından açık bir römorkör menü yapabilirsiniz. W3Schools, yaygın olarak kullanılan jQuery etkinliklerinin bir listesine sahiptir. Burada nasıl uygulanacağını göreceğiz. Çekirdek 36D467F72129E4C6177CE13D8F61C032
Bu işlevin sonuçları sitenizdeki Paskalya yumurtasıdır. Kullanıcı iki kez masthead’i tıklarsa, site açıklaması metni değişir. Etkinliği öğeye eklemenin birkaç yolu vardır. Bu yöntemi beğendim çünkü sayfa yükleme sayfaları eklense bile çalışacaktır – bir sonraki makalede Ajax gördüğümüzde bu bir sorun olacaktır. () İçin işlev üç argüman gerektirir. Birincisi duyulacak olaydır, ikincisi eklenecek bir unsurdur, üçüncüsü belirli eylemleri gerçekleştiren anonim bir işlevdir. JQuery ile Widget’ları Değiştirin Öğrendiklerimizi, tema dosyasındaki herhangi bir koda dokunmadan basit bir Widget Switch işlevselliği oluşturmak için kullanalım. Widget’a tıklandığında widget içeriğini etkinleştirecek öğeler ekleyeceğiz. Yalnızca dört satır koduna ihtiyacımız var! Çekirdek 36d467f72129e4c6177ce13d8f61c032
İlk satır, her widget’a sınıf geçişleri ile açık öğeler ekler. Tıklama olayı bu öğeye eklenmiştir. Anonim işlevde, tıklanan gerçek öğeyi ifade eden jQuery’yi (bu) kullanırız. Bu her widget için farklıdır çünkü her geçiş aralığı ayrı bir unsurdur. Üst öğeyi DOM’u geçerek ve daha sonra Widget’ta başlık veya anahtar düğmesi olmayan tüm öğeleri bularak ve etkinleştirmek için Toggle () işlevini kullanarak buluyoruz. İşte burada!
JQuery kullanarak widget’ları değiştirin
Uygulama, pratik, pratik yapın!Bu noktada JQuery hakkında birçok şey biliyorsunuz.Tıklanan teklifin herhangi bir kısmı olduğunda kullanıcıları makalelere getirecek işlevsellik oluşturabilirsiniz, web siteniz için seçilebilecek cilt yapabilirsiniz ve daha fazlası.Mümkün olduğunca çok çalışmayı öneririm.Bir sonraki öğreticide, WordPress temalarında ve eklentilerinde JQuery ve JQuery eklentilerini nasıl kullanabileceğimizi göreceğiz. Bu öğreticinin yararlı olduğunu düşünüyor musunuz?WordPress’in geliştirilmesinde neden JavaScript’i öğrenmek istiyorsunuz?Daha fazla bilmek istiyorsun?Bize aşağıdaki yorumlarda anlatın.
Etiket:
gelişim
Javascript
jQuery
