WordPress Rest API ile VueJS bileşenini kullanma

Tork için son makalemde, WordPress API REST ile Vuejs JavaScript çerçevesini kullanmak için bir giriş yaptım. Bu yazıda, bir gönderiyi görüntülemek ve düzenlemek için WordPress REST API’sını Vuejs ve JQuery Ajax ile nasıl birleştireceğinizi öğrenirsiniz. Aynı zamanda Vue yapıcısına ve şablonun sözdizimine bir giriştir. Bu hafta, bileşenleri ve bazı ek veri özelliklerini tanıtmak istiyorum. Bileşen, uygulama boyunca daha fazla kodun yeniden kullanılmasına izin verir. Pratik bir örnek olarak, bu makale size yayınların ve tek yazı bileşenlerinin nasıl bir listesini yapacağınızı gösterecektir.
Bu Vuejs olduğundan, kod nispeten basit olacaktır, ancak reaktif çerçevenin tüm gücünden yararlanın. Bu makaleden başlayarak, GitHub’da yayınladığım çok basit bir WordPress teması yaptım. Tabii ki, başlangıçtan itibaren kendi temanızı oluşturabilirsiniz, ancak isterseniz yaptığım şablonu kullanabilirsiniz. Yirmi on beşten headers.php, footer.php ve index.php alarak başladım ve döngüler dahil çoğu PHP’yi sildim. Yaptığım önemli bir şey Vuejs ve Jquery’yi function.php’de enqueue idi. En sevdiğiniz çerçeveyi kullanarak döngü olmadan basit bir tema oluşturmadan veya temamı indirmeden önce bunu yapın.
Ayrıca, bu işlevi, bir yangın url’si ve yangın istirahati ile yapılandırma adı verilen değişkene eklemek için wp_localize_script aracılığıyla da kullanıyorum. İlk bileşen, Vuejs bileşenini Vue örnekleri oluşturmaya çok benzer hale getirir. Vue örneğimizde kullanılmak üzere “liste sonrası” bileşeni yapacağız. Bu bileşen Vue örneğinden ayrıldığından, tekrar kullanabiliriz. Vue bileşeni Vue.component () kullanılarak yapılır. Bileşen yapmanın sonucu, mini bir uygulama olarak çalıştırılacak bir HTML öğesine sahip olmamızdır. İşte kullanacağımız HTML işaretlemesi:

hepsi bu. Şablonlar sağlamamız ve ana bileşenleri ve örnekleri yazmamız gerekir, ancak sadece ihtiyacımız olan uygulamalar için HTML. Yapmamız gereken son şey bir şablon, ancak sözdizimi son makalede kullandığımızla aynı olacak. Bu şablon için “metin/html” türüne sahip bir komut dosyası kullanıyorum, böylece tarayıcının ihtiyaç duyulana kadar oluşturmaması. İçinde yayınları tekrarlamak için V-For özniteliklerini kullanıyorum. Bu sözdizimi her döngü için PHP gibidir, ancak geriye doğru. Vuejs ve Loop’ta “Post in Post” ı kullanıyoruz, görüntülenen mevcut gönderidir. İşte şablonlar:

Şimdi bazı JavaScript için hazırız. Son makalede olduğu gibi, WordPress Rest API üzerinden bazı veri almak için jQuery kullanarak başlıyoruz, ancak bir yazı yerine yayınların bir listesini alıyoruz. Bu sefer hazır olduğunda, örneğin Vue yerine bileşen verilerimize gönderiler: (işlev ($) {
var vue;
$ .when ($ .get (config.api.posts)) .that (işlev (d) {
Vue.component (‘liste gönderme’, {
Şablon: ‘#liste sonrası tmpl’,
Veri: function () {
dönüş {
Gönderi: D.
}
},
});
Vue = yeni Vue ({
EL: ‘#APlication’,
Veri: {}
});
});
}) (jQuery); Ana Vue örneğinin bir veri bileşeni olduğunu, ancak içinde verilerin bulunmadığını unutmayın. Bileşen yapıcı veri alır ve şablondaki hangi öğelerin oluşturulacağını söylemek için kullanılan benzer bir “EL” argümanına sahiptir. Ayrıca şablon için kimlik verdik.
Gönderin başlığını ve alıntısını gösteren bir liste için ihtiyacımız olan tek şey bu. Dinamik Dom Manipülasyonu Şimdi, diğer yayınlardan bir teklif gizlerken bir gönderi görüntülemenin bir yolunu oluşturmak için birkaç bileşeni değiştirelim. İşaretleme ve JavaScript kodundaki değişiklikler, JQuery’ye benzer bir şey yapmamız gerektiğinden çok daha basit olacaktır. Mucizeler V-IF özniteliklerinden gelecek. Bir öğeye uygulandığında, bu öznitelik, öğeye iletilen değere göre öğenin görüntülenmesi veya gizlenmesi gerekip gerekmediğine karar verir. Mevcut modelin bölümlerini veya bileşen yönteminde tanımlanan işlevleri kullanabiliriz.
Kullanımımız için, her şeyi bileşen verilerinden iki yeni özelliğe dayandıracağız – liste ve ekran. Liste, liste modunda olduğumuzu belirtmek için doğru olarak başlayacak Boolean olacaktır. Gösteri, görüntülenen ve 0 olarak başlayacak olan yayın kimliğini temsil eden bir tamsayı olacak, çünkü görüntülenmeyenlerle başlıyoruz. Bunu yapmadan önce, şablonumuzu, geçen hafta gösterdiğim gibi onclick satır içi işleyiciyle değiştirelim:

kapat
<a href="#" class="read-ore" role="button"

Artık veri özelliğinin doğru olup olmadığını gösteren bir gönderim teklifimiz var ve yayın kimliği görüntülenen özellik ile aynı olduğunda gönderme içeriği görüntüleniyor. Ayrıca, aynı koşullu mantığı kullanan daha fazla okuma düğmesi ve kapak ekledik.
Okuma düğmesinin daha fazla olduğunu ve el tutma işlemini kullanarak kapattığını unutmayın. Bunun bileşen yöntemi bağımsız değişkeninde tanımlanması gerekir. Ayrıca, okuma () işlevinin post.id’i nasıl aldığını görün, iyi çünkü şovun değerini ayarlamak için buna ihtiyacımız olacak. Her ikisi de sadece iki satır olan bu iki işlevi olan güncellenmiş bileşenler şunlardır: (işlev ($) {var vue;
$ .when ($ .get (config.api.posts)) .that (işlev (d) {
Vue.component (‘liste gönderme’, {
Şablon: ‘#liste sonrası tmpl’,
Veri: function () {
dönüş {
Liste: Doğru,
Gösteri: 0,
Gönderi: D.
}
},
yöntem: {
Oku: işlev (id) {
this.list = yanlış;
This.Show = id;
},
Kapak: function () {
this.list = true;
Bu görüntülenir = 0;
}
}
});
Vue = yeni Vue ({
EL: ‘#APlication’,
Veri: {}
});
});
}) (jQuery); Okuma tıklandığında, tıklamanın geldiği ve liste değerini false olarak ayarladığı Gönderi Kimliğine Gösteri değerini ayarlar. Tüm alıntıları gizlemek ve yalnızca gönderiyi görüntülemek için gereken tek şey budur. Close () tıklandığında, gösteri 0 olarak ayarlanır ve liste True olarak ayarlanır ve her şey normale döner.
Tek yazı bileşeni şimdi bir yazı için ikinci bir bileşen oluşturalım. Şimdilik, bunun için WordPress temasında single.php dosyasını kullanacağız. Gelecek hafta, bu ekran arasında dinamik olarak geçiş yapmak için bir yönlendirici ekleyeceğiz. Başlamadan önce, bu single.php’nin sadece yayınlar ve sayfalar değil, her türlü halka açık yayınla çalışacağından emin olmak istiyorum, bu yüzden bunu işlevime ekliyorum.
/**
REST API’daki her türlü halka açık gönderiyi gösterin
*/

Add_action (‘init’, function () {
Global $ wp_post_types;
foreach (get_post_types () olarak $ post_type) {if ($ wp_post_types [$ post_type]-> public &&! $ wp_post_types [$ post_type]-> show_in_rest) {
$ wp_post_types [$ post_type]-> show_in_rest = true;
if (boş ($ wp_post_types [$ post_type]-> rest_base) {
$ wp_post_types [$ post_type]-> rest_base = $ wp_post_types [$ post_type]-> name;
}
}
}
}, 40000); Şimdi tek PHP’mde, uygulamam ve şablonum için HTML işaretlemesi ile daha önce sahip olduğum şeyin basit bir versiyonunu yaptım:
</sopa

Şimdi öncekinden çok daha basit olacak yeni bileşenler yapmamız gerekiyor. Single.php’imdeki her şeyi yaptım, nihayet böyle görünüyordu:

</sopa

(işlev ($) {
Var configuration = {
ateş: {
Post: ” rest_base. ‘/’));?>”},
Nonce: “”
};
var vue;
$ .when ($ .get (config.api.posts + ‘1’)). that (işlev (d) {
Var post = vue.component (‘post’, {
Şablon: ‘#TMPL sonrası’,
Veri: function () {
dönüş {
Gönderi: D.
}
}
});
Vue = yeni Vue ({
EL: ‘#APlication’,
Veri: {}
});
});
}) (jQuery);

Bu son kez çok benzer, ancak döngü yoktur ve bu ayrı bir bileşendir. Şimdiye kadar yeniden kullanılacak artan bileşenler, basitlik uğruna, bu bileşeni jQuery.get () bileşeninde yaptım. Bir yazı veya gönderi alıyoruz ve ardından bileşenler yapmak için kullanıyoruz. Başarılıydı, ancak bileşenlerimizi HTTP’nin isteklerine çok bağlı ve tekrar kullanımı zor hale getirdi. Bu yüzden, bileşenlerin ilk yaşam döngüsü ve Ajax çağrısını bileşene nasıl taşıyabileceğimiz hakkında konuşmak istiyorum. Bu, bileşenlerin yüklenmesini yavaşlatacak ve bu serinin bir sonraki kısmı olan yönlendiricide yeniden kullanılmasına izin verecektir. Bileşen yüklendiğinde, Mount adlı bir yöntemi varsa, yöntem çağrılır. Bu, WordPress API REST’den veri almak için bileşen yönteminin özelliğindeki veya başka bir yerde işlevi çağırmak için kullanabileceğimiz bir yöntemdir. İşte yeni posta listemizin bileşeni: vue.component (‘Liste gönderme’, {
Şablon: ‘#liste sonrası tmpl’, veri: function () {
dönüş {
Liste: Doğru,
Gösteri: 0,
Gönderi: []
}
},
Yüklü: function () {
this.getPosts ();
},
yöntem: {
getPosts: function () {
Var self = this;
$ .get (config.api.posts, işlev (r) {
Self. $ set (self, ‘post’, r);
});
},
Oku: işlev (id) {
this.list = yanlış;
This.Show = id;
},
Kapak: function () {
this.list = true;
Bu görüntülenir = 0;
}
}
}); Gönderme için verilerde nasıl değere sahip olduğumuzu unutmayın, ancak boş. Bunu yapmazsak, bileşenlerin reaktif bir özelliği olarak kabul edilmeyecek ve daha sonra güncelleyemeyiz. Dikkat edilmesi gereken bir diğer önemli şey, bunu başarılı bir geri aramada güncellemek için bunu kullanmamızdır. Sıradaki nerede? Vuej’leri kullanmada yeniden kullanılabilecek bileşenler bu şekilde yapabiliriz. Şimdi bir listemiz ve tek bir ekranımız var. Herhangi bir yangın kuyruğu ile güçlü bir şekilde bağlı olmadıkları için, farklı yazı türleriyle kullanabiliriz veya en az bir sayfa yüklemede Ajax olmadan veri sağlayabiliriz. Tek yeni başlayan WordPress web teması için ihtiyacımız olan her şeye çok yakınız. Gelecek hafta, yeni sayfalar yüklemeden rotalar arasında durum değiştirebilmemiz için Vuejs yönlendiricisine dalacağız ve her şey daha çekici olmaya başlayacak. Gelecek hafta dinleyin, burada daha eksiksiz uygulamalar oluşturmak için iki bileşeni yönlendiriciye bağlayacağız. JavaScript API REST çerçevesi hakkında daha fazla bilgi edinmek için bkz. Caldera Learn.