WordPress Geliştiricileri için JavaScript: Ajax kullanma
Ajax veya eşzamansız JavaScript ve XML, sunucu tarafı komut dosyasıyla iletişim kurmak ve sayfaları yeniden sevmek zorunda kalmadan içeriği dinamik olarak yüklemenize izin vermek için kullanılır. Örneğin, yerel hayır kurumu için bir web sitesi oluşturduğunuzu ve olumlu titreşimleri teşvik etmek istediğinizi söyleyin. “Aşk göster!” Verandadaki sayaçlar ve Ajax sayesinde düğmeye her basıldığında, sayfayı yeniden bağlamadan sayım artacaktır. Bu, bugünün öğreticisinde yapacağımız bir örnektir. Bu, WordPress geliştiricileri için JavaScript’e odaklanan beş bölümümüzdeki son 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.
Son dört öğreticide, JavaScript, JQuery ve WordPress’te temel JavaScript’in nasıl kullanılacağını gördük. Bu makalede, Ajax’ın ne olduğunu, kullanımı ve WordPress’te onunla harika bir işlevsellik yapmayı öğreneceksiniz. Başlayalım. 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
Ajax Flow Ortak olan Ajax’ın temel akışı aşağıdaki adımları takip eder:
Sunucuda isteklerin talep edilmesi ve işleme işlemleri nedeniyle AJAX çağrılarını başlatma
Yanıtı yakalayın ve JavaScript aracılığıyla gereken her türlü eylemi alın
Yeni bir tema ortamı hazırlarken, bunu WordPress’te ayarlayalım. İlk örnek, başlığı tıkladığımızda bir yayının sahip olduğu yorumların sayısını içeren basit bir açılır pencere göstereceğiz. Çocuk temasını varsayılan yirmi on altı WordPress temasına göre kullanacağız, böylece hepimiz aynı tabandan başlıyoruz. Yapmanız gereken budur: WordPress kurulumunuzdaki ve “Ajax-Test” adınızdaki tema dizininde yeni bir klasör oluşturun. Dizinde, kendi işlevimizi eklemek için kullanacağımız WordPress ve Functions.php tarafından ihtiyaç duyulan Style.css ve son olarak JavaScript kodumuzu içerecek olan script.js oluşturun. Kuvvet sayfasına aşağıdakileri ekleyin:
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Ana temanın stil sayfasının çocuk teması tarafından yüklenmesi gerekir. Bu kez, çocuk temasının CSS dosyasından içe aktarılarak yapıldıktan sonra, şimdi bunu başarmanın önerilen yolu sıralamaktır. Enqueing ile ilgili bir ferahlığa ihtiyacınız varsa, bu serinin dört kısmını okuyun. Stylessheet ebeveynini ve JavaScript dosyamızı aynı anda enqueuee hadi:
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Daha ileri gitmek için enerjiniz olduğunu düşünüyorsanız, iyi bir resim bulun, 880px kez 660px’e kesin ve alt tema klasörüne yerleştirin, ardından screce.png adını verin. Bu, temayı etkinleştirmeye hazır olduğunuzda görünümde görünecektir.
Çocuğunuzun temasına ve voila’ya resim ekleyin!
Tüm meta verilerin altına düğmemizi ekleyelim:
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Tüm kodun ne anlama geldiğini keşfedelim. İlk satır, Post tarafından alınan sevgi miktarını alır. Bazı durumlarda, bu veriler, yani düğmeye hiç kimse tıklamadığında mevcut olmayacaktır. Bu nedenle, değer boşsa 0 değerini belirlemek için koddaki ikinci satırı kullanırız. Üçüncü satır, görüntüler ve sevgi miktarından oluşan bir aralıktan oluşan bir düğme görüntüler. Orada SVG kullanmak istiyorum çünkü görüntü kaynağını boş bıraktım. Base64 tarafından bir dizi görüntü yapmak için teşvik edilen SVG’yi kullanabilirsiniz. Bu, isteğinizi kaydeder ve web sitenizin performansını daha iyi hale getirir.
Aşağıdaki SVG – Base64 bağlantısını tıklayarak bu ücretsiz kalp resmini kullanıyorum. Görüntü kaynağına aldığınız kodu, aşağıdakiler gibi kopyala yapıştırın:
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Ayrıca düğmeyi düzenlemek ve yüzen bir etki vermek için biraz CSS kullanıyorum. Bunun bir düğme olduğu çok açık değil, ancak basit testlerimiz için işlev görecek. Çekirdek 3 BAE5578F5B73595A262E45B456095F
Ajax tarafından güçlendirilmeye hazır küçük aşk düğmemiz.
Sonu tetikler, JavaScript’imize ulaşırız! Düğme öğelerimizi hedeflememiz ve üzerindeki tıklamaları algılamamız gerekir. İşte bunu nasıl yapacağınız:
Çekirdek yükleme 5578f5b73595a262e45b4556095f Bu aşamadaki düğmeyi tıklarsanız, “Aşk veriliyor” metniyle ilgili JavaScript uyarıları göreceksiniz. Veri gereksinimleri Metin yerine Ajax çağrılarını tetiklememiz gerekir. Kodumuzu yazmadan önce ne göndermemiz gerektiğini öğrenelim. İlk ve en önemli URL AJAX, veri göndermek için bir yere ihtiyacımız var. Veri gönderdiğimiz yer verileri işleyecek ve çağrılara yanıt verecektir. WordPress, WP-Admin’deki admin-aajax.php dosyası kullanabileceğimiz Ajax çağrılarını işlemek için varsayılan bir konuma sahiptir. Bu URL’yi senaryomuza eklemenin bir yolu yok (hard kodlama kısa, ki bu imkansız), bu yüzden bazı WordPress hileleri kullanacağız.
WP_LOCALICH_SCRIPT () işlevi başlangıçta dizeyi iyi işlev gören bir JavaScript dosyasında çevirmeyi amaçlamıştır. Değişkenleri JavaScript dosyamıza, bu durumda Ajax dosya URL’mize devam etmek için de kullanabiliriz. Ajax_test_scripts () işlevine aşağıdaki kodu ekleyin:
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Bunun sonucu, bir özellik olarak son parametrede verilen bir dizi içerecek olan AjaxTest adlı bir nesne olacaktır. Ajax_url değerini almak için JavaScript’imizde Ajuxtest.Ajax_Url kullanabiliriz. Gönderi kimliğimiz, Gönderi Kimliği (sevgi eklediğimiz gönderiyi tanımlamak için kullanacağımız) gibi hakem verileri gönderecektir. Bu Dom’dan alınabilir. Aşağıdaki yirmi on altı temada kullanılan yapıya dikkat edin: Yirmi -Sixteen Dom
Düğmemizin atalarından biri olarak bir “makalesi” öğesi var. Bu öğenin bir sınıf yayına sahiptir ve kimlik özelliğinde sayısal kimlikler içerir. En zarif çözüm olmasa da, oradan kimlik alabiliriz.
Çekirdek yükleme 5578f5b73595a262e45b4556095f
WordPress eylemi ayrıca Action adlı bir parametre göndermemizi gerektirir. Tüm eylemler admin-ajax’a gönderileceğinden, onları ayırt etmek için bir yola ihtiyacımız var, bu nedenle bu parametre kullanılır. Ajax İstekleri Gönderme Şimdi her şeyi birleştirebiliriz. Kimlik yazısı ve eylemi içeren WP-Admin/Admin-aajax.php’ye AJAX çağrısı yapmamız gerekiyor. Bu yol. Çekirdek yükleme 5578f5b73595a262e45b4556095f
$ .Ajax (), birçok parametre alan bir işlevdir. URL, şu anda Ajax-ul.php web sitesi olan hedefi içerir. Tür, HTML formuna aşina olması gereken gönderiye ayarlanmıştır. Veri parametreleri, sunucuya göndermek istediğimiz anahtar değer çiftleri içeren nesnelerdir. Daha sonra, $ _Post [‘Action’] ve $ _Post [‘Post_id’] ile okuyabileceğiz. Başarılı parametreler, Ajax’ın çağrısı tamamlandığında çalışacak işlevlerdir. “Başarı! Yeni sayı “Sonunda yanıtımız yayınlandı. İşleme İstekleri Genellikle isteğe gönderildiği için admin-ajax.php dosyasını düzenlemeniz gerekir. Bu temel bir dosyadır, yani düzenlemenin yapılmaması gerektiği anlamına gelir. WordPress, kancaları ve eylem parametrelerini kullanarak Ajax çağrısı yapmanızı sağlar. Desen aşağıdaki gibidir: ‘Add_Love’ eylemlerinizi adlandırırsanız, işlevi (istediğiniz adınızı) WP_AJAX_ADD_LOVE ve/veya WP_AJAX_NOPRIV_ADD_LOVE adlı kancaya eklemeniz gerekir. Nopriv, çıkan kullanıcı için etkinleştirilir, burada yalnızca giren kullanıcılar için etkinleştirilir. Bizim durumumuzda ikisini de istiyoruz. Hızlı bir test olarak, sabit bir yanıt alalım: Çekirdek 3BAE5578F5B73595A262E45B4556095F içerir
İşlevlerimizi her iki kancaya, yankılanan 4’e ve ardından die () işlevini kullanarak ekliyoruz. Bu WordPress’te gereklidir, eğer değilse, her yanıtın sonunda 0 alacaksınız. Geçerli düğmeye tıklarsanız, aşağıdakileri görürsünüz:
Ajax düğmesine gel
Yapmanız gereken gerçek “aşk” miktarını elde etmek için, geçerli numarayı tek tek eklemek, veritabanına kaydetmek ve yeni numaraları yankılamaktır.
Geçerli düğmeye tıklarsanız, “1” gösteren bir açılır pencere görürsünüz. Sayfayı yenilerseniz, yeni bir numara görüntülenirsiniz. Düğmeye tıklamak 2 dönecektir. Şimdi yapmamız gereken tek şey, numaranın hemen kullanıcı arayüzünde görüntülenmesini sağlamaktır. Bu bölümün tepkisini kullanarak kullanıcı arayüzünde değişiklikler yapmak kolay görünüyor (çünkü öyle), ancak genellikle iyileştirilmesi en zor – daha sonra. Şimdilik yapmamız gereken, geçerli numarayı içeren öğeleri belirlemek ve içeriği bir yanıta dönüştürmektir.
Çekirdek yükleme 5578f5b73595a262e45b4556095f
Önceki JS kodumuza sadece iki satır ekledim. 5. satırda, $ sayı değişkeninde sayılar içeren bir öğe tutuyorum. 14. satırda, bu öğenin metnini yeni aşk sayısı olan bir yanıt içerecek şekilde değiştirdim. Ajax’ın ek endişeleri yüzeyde çok zor değil, iyi bir kullanıcı arayüzü yapmaya çalışırken çok zorlaşıyor. Verileri gönderin, işleyin ve neredeyse önemsiz bir yanıt verin, ancak düşünemeyeceğiniz yanıtların kullanımı ile ilgili bazı sorunlar:
Birisi düğmeyi kötüye kullanan ve sürekli basılan birisi?
Yanıtın gelmesi uzun sürerse, kullanıcı merak ediyor.
Sayı değişiklikleri çok gösterişli olmayabilir.
Düğmenin kendisi açıkça bir düğme değildir.
Bu sorunun çözülmesi aslında bu öğreticinin kapsamına dahil değildir. Bazıları diğer öğreticileri okuyarak öğrenilebilir, ancak bazılarının düzgün bir kullanıcı arayüzü yapmak için deneyiminize güvenmeniz gerekir ve eylemleriniz için anlaşılabilir. Güvenlik bir başka büyük ilgi. Bu basit aşk örneğinde net olmayabilir, ancak yönetici için gönderiyi silen bir düğme oluşturmak isteyebilirsiniz. Tüm eylemler nonces tarafından korunmalıdır. WordPress ve Ajax Strength, Ajax kullanarak yapılması kolay yararlı olan düzgün bir arayüz ve kullanıcı eylemleri yapar. Birkaç veri içeren, sunucuda işleme, yanıt gönderme ve kullanıcı arayüzü değişikliklerini başlatmak için bir yanıt kullanan bir istek göndermelisiniz. Ajax’ın asıl zorluğu, bunu sorumlu bir şekilde kullanmak ve UI’nizin eylemlerinizden önce, sırasında ve sonrasında hava geçirmez olmasını sağlamaktır. Bu, WordPress geliştiricileri için JavaScript’teki son öğretici olmasına rağmen, öğrenmeniz burada durmak zorunda değil! JavaScript bilginizi genişletmeye devam etmek istiyorsanız, denemek için bazı iyi kaynaklar: Akıcı JavaScript: Hem dijital hem de basılı kitaplar olarak mevcut JavaScript, JavaScript için kapsamlı ve iyi yapılandırılmış bir giriştir. Dil ya da siz hız elde etmenin hızlı bir yolunu arayan bir ebeveynsiniz.
W3Schools: W3Schools sonsuza kadar varmış gibi geliyor ve iyi nedenlerden dolayı – bu yeni başlayanlar için örneklerle dolu iyi bir kaynak. En iyisi, doğrudan sitedeki JavaScript örneklerini düzenleyebilir ve ön uçtaki değişikliklerinizin sonuçlarını görebilirsiniz. Bu, fonksiyonlar, döngüler, kontrol akışı, veri yapısı ve nesneleri içeren kavramları içeren sekiz birime bölünür. Başlangıçtan itibaren oyun yapmayı içeren bir son proje de var – ancak erişmek için Codecademy Pro’ya artmanız gerekiyor.
JavaScript Bahçesi: Bu belge koleksiyonu, programlama dilinin en eşsiz kısmını içerir. Bu, yaygın hataların ve ince böceklerin nasıl önleneceğinin yanı sıra, öğrenmesinde JavaScript’te yeni olanlar tarafından bulunabilecek performans sorunları ve kötü uygulamalar hakkında tavsiyeler sunar.
Envato Tuts+: JavaScript için tamamen yeniyseniz, nereden başlayacağınızı bilmiyorsanız ve bir el tutuşuna ihtiyacınız varsa, bu fantastik makale iyi bir lansman vakfıdır.
JavaScript Doğru Yol: Adının yanı sıra, bu bir sayfa kılavuzu, JavaScript’i öğrenmek için “doğru yol” hakkında talimatlar sunmaz, daha ziyade geliştiriciler tarafından gönderilen bir kaynak koleksiyonudur, en iyi nasıl başlayacağınız ve uygulanacağı hakkında bilgiden , JQuery ve Backbone.js gibi test ve çerçeve araçlarına.
Yeni beceriler öğrenmek gibi, ne kadar çok okur ve pratik yaparsanız, öğrenmek o kadar kolay olur ve diğer dillerde o kadar hızlı yetkin olursunuz.JavaScript gezinizle iyi şanslar! 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:
Ajax
Javascript
